ZipNews.pl

Każdy szanujący się wydawca treści (jakże pięknie brzmi ta funkcja!) nie byłby szanującym się, nie posiadając ani jednego wiernego czytelnika. Nie byłby równoczesnie prestiżowy, gdyby nie wsłuchiwał się w głos tych, którzy go czytają. Dzisiaj zatem – w sumie po raz pierwszy – spełnimy prośbę jednego z naszych czytaczy. Wystosował do nas prośbę o bliższe przyjrzenie się stronie ZipNews.pl, której jest właścicielem. A cóż to za serwis? – zapyta co bardziej rozgarnięty czytelnik. Pozwólmy wypowiedzieć się temu, kto wie to najlepiej:

Zipnews to serwis newsowy, ale nastawiony na dawanie czytelnikowi tylko wartościowych informacji (staramy się filtrować wszystkie nieistotne pierdoły), a technicznie zrobiony tak, żeby wszystko działało szybko.

Zatem oprócz standardowego marudzenia, strona dostanie solidną analizę prędkości. Zatem zaczynajmy!

• Nazwa doskonale oddaje przeznaczenie serwisu (kondensacja najważniejszych informacji) i jest chwytliwa. Troszkę mi tylko brakuje odpowiedniej ikonki w logo.
• Zresztą cały serwis wydaje się być niedokończony (widać to zwłaszcza w wersji mobilnej, gdzie treść nie oddycha z powodu braku marginesów) – to nie błąd a nowe podejście. Choć sam pomysł na głupi nie wygląda i na pewno przyspiesza i ułatwia tworzenie nowych serwisów, osobiście ciut bym z nim uważał. Czasami można z nim przegiąć i powstanie z niego coś pokroju nowego Digga, któremu brakuje najbardziej podstawowych funkcjonalności (z pełnoprawnego serwisu społecznościowego stał się? przystawką dla Facebooka).
• Pierwsze wrażenia z użytkowania? Czuję się jak na targu, gdzie nagania się mnie do kupna danego produktu. Wszystkiemu winny całkowicie niepotrzebny popup. W ostateczności przeżyłbym jego pojawienie się, gdyż kliknięcie w mały iksik (mógłby być ciut większy) nie kosztuje zbyt dużego wysiłku. Jednak jego działanie jest po prostu źle zaprojektowane. Bardzo łatwo odkryć, że włącza się gdy użytkownik nic nie kliknął a równocześnie przesunie się myszką z dołu do samej góry strony (dość logiczne – skoro myszka znajduje się na samym górnym brzegu strony i przywędrowała tam skądś ze środka strony, to użytkownik najprawdopodobniej chce zamknąć lub przełączyć kartę przeglądarki). Na razie wszystko brzmi bardzo sprytnie, ale niestety wykonanie kuleje. Popup bowiem całkowicie nie pamięta swojego stanu. Wszedłeś na ZipNews.pl pierwszy raz danego dnia i nie chciałeś nic przeczytać? Super, narzućmy się. Wszedłeś drugi raz tego samego dnia i nie kliknąłeś żadnego newsa, bo nie przybyło nic ciekawego? Super, narzućmy się. Właśnie wróciłeś do strony głównej po przeczytaniu newsa? Super, narzućmy się? Raz dziennie dla użytkownika, który nic nie przeczytał – tak to powinno działać. Ktoś się boi, że komunikat o cookies zniszczy stronę?
• Jak już narzekamy na funkcjonalność: nienawidzę, gdy blokuje mi się powiększanie na fonie. Żeby móc sobie pozwolić na taki ruch, trzeba stworzyć genialny interfejs godny natywnej aplikacji. Tutaj takiego nie ma i zmiana wielkości palcem się przydaje.
• Co mi się rzuciło w oczy jako jedne z pierwszych? Tytuły jak w Fakcie. Doskonałym przykładem Szef dżihadystów został przywódcą wszystkich muzułmanów. Cóż, lekkie rozczarowanie po przeczytaniu.
• Bardzo podoba mi się konwencja, która zastępuje podawanie źródła informacji – krótka adnotacja Najlepiej pisze o tym:.
• Bardzo za to nie podoba mi się przycisk Udostępnij. Pomijając fakt, że jest beznadziejnie zrobiony technicznie, to wspiera tylko Facebooka. To, że chcę coś udostępnić, nie znaczy, że chcę to zrobić na fejsie. Tutaj przydałby się mechanizm Web Wishes, ale oczywiście nikt go nie wspiera?
• Strona konkretnego newsa jest moim zdaniem przeładowana. Sam news zajmuje 20% strony, reszta to spis kategorii i pozostałych newsów. Osobiście wywaliłbym wszystko spod newsa – to nic innego, jak powtarzanie strony głównej.
• Formularz kontaktowy ma poprawnie przypięte etykiety. Bardzo duży plus za to. Oczywiście nie może być bezbłędnie, bo mamy za to przycisk Submit zamiast polskiego Wyślij.
• Przy zabawie serwisem zauważyłem jeszcze jedną, małą niedogodność, tym razem w adresach – http://zipnews.pl/kategoria/<b>page</b>/3. O wiele ładniej wyglądałoby tutaj polskie strona (albo po prostu sam numerek).
• Style dla :focus są takie same, jak dla :hover – kolejny duży plus. Szkoda jednak, że ta sytuacja ma miejsce jedynie w nagłówku. Przydałaby się także w czasie przełączania pomiędzy newsami, bo tam gubi się domyślny outline (zwłaszcza w Chrome).
• TAB-ując przez stronę zauważyłem też jedną, ciekawą rzecz – w sekcji Gorące tematy część linków jest brzydko ukryta (przez overflow:hidden).
• Ta strona ma jedną, bardzo poważną wadę, która w moich – i zapewne nie tylko moich – oczach dyskwalifkuje ją jako stronę informacyjną. Brakuje feeda – nie ma tu ani kanału RSS, ani kanału Atom? a tylko tak de facto przeglądam newsy w Sieci.
• Tyle z nietechnicznych rzeczy, związanych z usability. Teraz zobaczmy co siedzi pod maską. Walidator zgłasza 3 błędy, z czego 1 związany jest zewnętrzną usługą (Google Fonts – mogliby nauczyć się podawać poprawną wersję) a 2 kolejne ze świadomą decyzją webmastera (o której nieco później).
• Outline wygląda prawie dobrze. Brakuje jednak głównego nagłówka strony, jest także jedna nienazwana sekcja. W przypadku podstrony konkretnego newsa nie jest już tak różowo. Widać, że news jest podpięty pod sekcję Gorące tematy a to błąd. Ta sekcja powinna być oddzielna i być na tym samym poziomie, co główny news na stronie.
• Język strony jest określony – kolejny plus.

• <meta http-equiv="refresh" content="3600; url=http://zipnews.pl/" >

  Jak dla mnie, zupełnie niepotrzebna rzecz. Nie dość, że raczej nikt nie spędza godziny na stronie informacyjnej, to nienawidzę, gdy strona mi się przeładowuje bez powodu. Jeśli chcę sobie sprawdzić czy nie doszły jakieś nowe newsy, sam odświeżę stronę w momencie, w którym uznam to za stosowne (albo zrobi to za mnie mój czytnik RSS). Co więcej, to odświeżanie jest wadliwe. Dokładnie taki sam znacznik znajduje się na podstronie newsa. Co to oznacza? Że jeśli zostawiłem sobie przeczytanie jakiegoś newsa na później i wrócę do niego po więcej niż godzinie, zastanę niepotrzebną mi stronę główną.

• W head znajduje się jedynie arkusz stylów zaciąganych z Google Fonts – głównego arkusza stylów tu nie ma. Zatem gdzie jest? Na samym końcu strony, po zamykającym znaczniku html. Błąd? Nie, świadoma, acz nie do końca nieprzemyślana decyzja webmastera. Rozumiem myślenie: CSS w head blokuje wczytywanie strony, więc przerzućmy go jak najniżej (i dodatkowo zminifikujmy – rzadko widzę minifikowany CSS a to przecież dobra rzecz!). Problem w tym, że to, co zyskujemy na tym zabiegu, tracimy poprzez wsadzenie arkusza z Google Fonts. Ba, tracimy jeszcze więcej, bo dodatkowo odpytujemy DNS-y. Poza tym – arkusz na samym dole strony nie sprawdzi się z innej przyczyny. Choć strona, faktycznie, powinna wczytać się szybciej, to użytkownik odniesie dokładnie odwrotne wrażenie. Najpierw bowiem pojawi się czysty szkielet strony (całkowicie nieostylowany HTML) a dopiero po chwili doczytane zostaną style. Wniosek? Coś się za długo wczytuje. Jeśli chcemy zyskać na wydajności w kwestii CSS, to inlinujmy krytyczne fragmenty CSS – są narzędzia od tego (ci goście znają się na rzeczy, więc warto ich posłuchać!).
• Logotyp strony jest częścią nawigacji a to błąd. Logotyp stanowi główny nagłówek strony. Sensowniej byłoby wsadzić całe to górne nav w header.
• Bardzo dużym plusem jest poprawnie wykonany formularz wyszukiwania – jest label specjalnie dla AT! Ba, jest nawet [role=search]. To wciąż spora rzadkość.
• .hashtags pasowałoby na sekcję. No i zakłóca hierarchię nagłówków. Z powodzeniem mogłoby tutaj być zastosowane h2 (oczywiście przy założeniu, że logotyp to jedyne h1 na stronie).

• To, co obecnie jest header, to po prostu sekcja. Boli najbardziej jednak niewłaściwe zastosowanie [role=banner]. Zgodnie z wytycznymi ARIA, tak oznaczony element zawiera podstawowe informacje o stronie, takie jak jej tożsamość (logotyp).

  A region that contains mostly site-oriented content, rather than page-specific content.

  Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.

  Jak widać z tej definicji, lista newsów nijak do niej nie pasuje. Natomiast górna nawigacja – a i owszem.

• Zamiast section[role=main] lepiej jest użyć po prostu main.
• Myślę też nad listami newsów dla konkretnych kategorii. W HTML5 można też to zapisać w inny sposób – section > article. Niemniej obecny kod jest jak najbardziej poprawny – w końcu lista jest tu listą (a to – paradoksalnie – wciąż rzadkość w Sieci?).
• Zupełnie nie rozumiem czekania na load, żeby załadować skrypty, tym bardziej, że robimy to na końcu strony. W tym wypadku najlepiej po prostu użyć script[async] i tyle. Nie ma sensu przy de facto gotowym drzewku DOM dodatkowo opóźniać wczytywania skryptów.
• W przypadku podstrony konkretnego newsa nieprawidłowym jest oznaczenie głównego artykułu przez section > article (jeszcze bezsensowniejsza jest rola, nadana tej sekcji! W tym momencie tworzymy nie sekcję z artykułem, ale artykuł zależny od innego artykułu!). Ten artykuł jest głównym elementem na stronie, zatem to on powinien mieć [role=main], natomiast to, co obecnie ją ma, powinno mieć [role=complementary] (albo być po prostu aside).

• A co w JS?

  var pbrt=0;
  setTimeout('pbrt=1', 10000)

  Nie przekazuj stringa do timera. Tym samym wywołujesz sobie eval, które może być? 10 razy wolniejsze od normalnego wywołania funkcji.

• Śmieszy mnie natomiast „warunkowe” wczytywanie jQuery. Nie byłoby w tym ciekawego, gdyby nie fakt, że? kod jQuery jest sztywno umieszczony w pliku JS. W tym wypadku po prostu darowałbym sobie ten warunek.
• Kod JS nie jest zminifikowany a jest większy od CSS-a strony. Nawet pomimo asynchronicznego wczytywania skryptów, nie widzę powodu, dla którego nie można by go przyspieszyć, zmniejszając rozmiar pliku.
• A jak ogólnie wygląda prędkość strony? Nie najlepiej. Najpoważniejsze zarzuty to brak cache oraz długie czasy odpowiedzi serwera (co niestety da się odczuć „osobiście”). Głównie te dwa elementy należałoby poprawić przy opracowywaniu finalnej wersji strony.
• A jaki byłby mój sposób na wyciśnięcie maksimum ze strony tego typu? Jekyll – zwłaszcza, że nie ma tu nigdzie komentarzy a jedyna dynamiczna rzecz (wyszukiwarka) może być ze spokojem zoutsource’owana (Google) lub zastąpiona innymi rozwiązaniami (jak choćby rozbudowanymi tagami czy kategoriami, które już tutaj są). Do tego jakiś build tool, żeby ładnie się wszystko generowało i mod_pagespeed. Mogę dać sobie uciąć rękę, że będzie to szybsze od najlżejszego możliwego WordPressa. Niemniej jest to rozwiązanie mniej przyjazne dla osób publikujących artykuły i pewnie wymagałoby dodatkowego szkolenia. W tym wypadku WP jest sensownym kompromisem (zwłaszcza nieprzeładowany pluginami).

Jest dobrze (wreszcie ktoś dba o podstawową dostępność!), chociaż mogłoby być lepiej (trzeba podbać trochę o semantykę!). Zabiegi przyspieszające niestety niekoniecznie się sprawdzają, co widać po wyniku w Google PageSpeed. Niemniej poprawienie tych problemów nie powinno sprawić większych trudności.

To jedna z lepszych stron, które ostatnimi czasy nawiedzały naszą stronę – w niektórych aspektach jest wręcz perfekcyjna. Na szczęścieNiestety, wciąż nie jest to strona prefekcyjna. Niemniej – rokuje dobrze!