Ranking blogów Daj Się Poznać 2017
Aktualizacja:
Badana populacja
W tegorocznym konkursie Daj Się Poznać rejestrację rozpoczęło ponoć już ponad 1000 uczestników. Wśród tych, którzy doprowadzili ją do końca znajduje się obecnie 838 linków do blogów.
To ogromna liczba ludzi, którzy planują w najbliższym czasie blogować. Można też łatwo zaobserwować, że wiele blogów powstało właśnie na potrzeby konkursu. W statystykach z zeszłego roku, które opublikował Maciek Aniserowicz widać duży rozstrzał wieku i płci, a przeglądając plany projektów można też wysnuć wniosek o bardzo różnym poziomie doświadczenia technicznego u blogujących.
Mężczyźni, kobiety, absolwenci politechnik i ludzie traktujący póki co przygodę z IT hobbystycznie. Różnorodność kulturowa, przy której typowy użytkownik Wykopu automatycznie dostaje bólu czterech liter. Mimo to, wszystkie ze stron mają w założeniu podobny charakter. Są blogami spełniającymi pewne określone wymagania, więc jako takie wydają się ze sobą porównywalne.
Na część blogów udało mi się już zawędrować, poczytać, skomentować. Tutaj jednak chciałbym przedstawić trochę inną statystykę - bardziej techniczną, mierzalną i być może użyteczną na start dla nas wszystkich :)
Co zmierzyłem
Dla wszystkich blogów widocznych na opublikowanej liście uczestników, poprosiłem API usługi PageSpeed Tools firmy Google o ocenę strony pod kątem jej wydajności. Podstawowym wskaźnikiem jest wartość punktowa (score) będąca liczbą całkowita z zakresu 0 — 100.
Metryka ta bierze jednak pod uwagę wiele kryteriów wpływających na użyteczność strony. Oprócz samego czasu odpowiedzi strony, dużo większy nacisk jest kładziony na użyteczność dla użytkownika. Strona może mieć bowiem długi czas pełnej odpowiedzi (jeśli np. zawiera dużo obrazów albo złożone skrypty, ich doładowywanie może trwać dobrych kilka sekund), a mimo to być w stanie pokazać użytkownikowi treść artykułu w ułamku sekundy. Uwzględnione są też doświadczenia użytkowników korzystających z urządzeń mobilnych.
Czy punktacja taka jest użyteczna dla właściciela bloga? Na pewno może być, jeśli zmotywuje nas do poprawy wydajności. Poprawiając punkty zwykle faktycznie poprawiamy doświadczenie użytkownika odwiedzającego bloga, a prawdopodobnie również ranking strony w wyszukiwarkach, na czym nam często zależy. Czy porównywanie według ich punktacji ma sens? Prawdę mówiąc myślę, że dużo mniejszy, ale o wnioskach później. Najpierw wyniki :)
Jak wypadamy jako grupa?
Najczęściej pojawiające się punktacje dla blogów z listy Daj Się Poznać 2017 na dzień 5.03.2017 r. można zilustrować histogramem przedstawionym na rys. 1. Widać na nim, że wyniki w zakresie 77 — 87 można uznać za "typowe" dla grupy blogów. To dobry wynik i narzędzie Google'a pokaże takim osobom zielony kolor, wskazujący że wydajność jest dobra. Oczywiście zawsze można też coś w takiej sytuacji poprawić, żeby podbić wynik do 100.
Na liście znalazła się jedna "setka" spełniająca wymagania bloga i kilka pozycji bliskich 100. Minimalny wynik w grupie to 18 punktów. Jeśli chcesz sprawdzić jak wypada Twój blog, odwiedź narzędzie PageSpeed Insights i wpisz adres swojego bloga.
Popatrzmy może w takim razie na rekordzistów aby zrozumieć czym się wyróżniają :)
Dziewięciu wspaniałych
W poniższej tabeli znajdują się blogi, które w rankingu zajęły najwyższe pozycje. Zastrzegę od razu, że wyrzuciłem z niego kilka pozycji, a mianowicie takie które:
- Zawierały pustą stronę typu "hello world", nie przypominająca w żaden sposób bloga
- Nie zawierały żadnego wpisu
- Zawierały tylko jeden automatyczny wpis typu "Hello world" albo "Lorem ipsum" i świadczyły o braku jakiegokolwiek wkładu do tej pory (poza rejestracją)
Przyjmując te arbitralnie wybrane zasady na odfiltrowanie blogów, tabela wygląda następująco:
| Blog | PageSpeed score | Czym się wyróżnia? |
|---|---|---|
| 100 | Strona na Wordpressie, raczej minimalistyczny design ale bez skrajności, na razie tylko jeden wpis. Tak czy inaczej, maksuje punktację :) | |
| https://arturtamborski.pl/ | 97 | Wyraźny minimalizm w wyglądzie i w kodzie, renderuje się dzięki temu naprawdę szybko |
| 96 | Blog na Wordpressie, pojawiają się zarówno grafiki jak i co nieco styli, na razie jeszcze minimum treści. | |
| https://wzieba.github.io/ | 96 | Minimalistyczny wygląd, prawdopodobnie statycznie wygenerowana strona, hosting na GitHub Pages |
| 96 | Minimalistyczny wygląd, prawdopodobnie statycznie wygenerowana strona, hosting na GitHub Pages | |
| 96 | Minimalistyczny wygląd | |
| 96 | Strona na Wordpressie, theme używa dość wielu zasobów takich jak CSS, obrazy, a mimo to punktacja jest wysoka | |
| 96 | Strona na Wordpressie, theme używa dość wielu zasobów takich jak CSS, obrazy, a mimo to punktacja jest wysoka | |
| 96 | Ekstremalnie minimalistyczny, ale czytelny design ;) |
Gratulacje dla całej czołówki :) Widać wyraźnie, że wszystkie blogi są nowe i nie nabrały jeszcze za wiele treści i funkcjonalności. To właściwie logiczne, że im mniej funkcjonalności zawiera projekt informatyczny, tym mniej zdążył też zgromadzić bugów wydajnościowych. Ciekawy jestem, czy któraś z osób faktycznie starała się już na starcie celowo optymalizować wydajność strony, czy to jedynie wynik wyboru dobrej platformy na start i jej domyślnej konfiguracji?
Maruderzy ;)
Co znajdziemy po drugiej stronie rankingu? Być może to da nam więcej do myślenia na temat tego jak interpretować wyniki.
| Blog | PageSpeed score | Dlaczego? |
|---|---|---|
| http://limecoding.pl/ | 21 | Tu widać że blog istnieje znacznie dłużej niż przez ostatnie kilka dni. Strona jest ładna, responsywna, dobrze wygląda na telefonie i używa jej się całkiem wygodnie. Być może pewne elementy można łatwo zoptymalizować. |
| http://www.javadevmatt.pl/ | 20 | Dość popularny blog Mateusza Kupilasa, dużo treści, UX całkiem pozytywny, strona responsywna i na oko ciężko mi dostrzec duże problemy wydajnościowe. Przynajmniej w przeglądarce z noscriptem i adblockiem ;) |
| http://sharpcode.pl/ | 20 | Tutaj doświadczenia z wydajnością są faktycznie bardzo słabe, biorąc pod uwagę że na blogu znajduje się dopiero jeden wpis nie można tego wytłumaczyć dojrzałością ;) Jest więc miejsce na poprawki, być może niewielkie zmiany będą w stanie drastycznie poprawić wynik. |
| http://webroad.pl/ | 20 | Kolejna strona, która jest ładna, responsywna, użyteczna i ma już sporo ciekawych treści. Być może niski ranking wynika z tego, że do czasu pełnego załadowania strony jest ona zasłonięta ekranem "ładowania" przez co faktycznie doświadczenie przy wchodzeniu na stronę jest słabe. |
| http://pancor.esy.es/ | 18 | Tu treści jest na razie bardzo mało, a niskie punkty wynikają z tego, że... obrazek tła ma około 6 mb. Prawdę mówiąc łatwo takie rzeczy przeoczyć, sam miałem sporo do optymalizacji i późniejszy wykres pokaże że to jedna z najczęstszych przyczyn zaniżonego wyniku na naszych blogach. |
Ciekawostka: ilość ładowanych zasobów i outlierzy
W czasach przed HTTP2, które w zasadzie dopiero się rozkręca, jednym z kluczowych parametrów wydajności strony była liczba ładowanych zasobów - arkuszy styli, skryptów, obrazków. Developerzy uciekali się to tricków takich jak np. css image sprites zmieniając elegancko oddzielone od siebie logicznie zasoby w pojedynczy obrazek, aby ładował się szybciej. Podobne założenie tkwi również za koncepcją bundlingu, czyli łączeniu wielu plików CSS czy JavaSciprt w jeden, aby pobrać zasób "za jednym zamachem".
HTTP2 wprowadza rozwiązania sprawiające, że te techniki mogą wkrótce odejść do lamusa. Wydaje się to zresztą potwierdzać rysunek 2, gdzie pokazana jest ilość zasobów ładowanych przez stronę.
W przeszłości do strony podpięte były typowo arkusze styli CSS, pliki JavaScript, kilka obrazków. Wykres pokazuje, że w dzisiejszym ekosystemie normą jest kilkudziesięciu zewnętrznych plików z zasobami, a w ekstremalnym przypadku jest ich ponad 200.
Takim blogiem jest np. https://jacekc91.wixsite.com/dajsiepoznac zawierający 205 zasobów, w tym 161 zewnętrznych plików JS. Łącznie na stronie ładowane jest ponad 5 mb JavaScriptu. To sporo, zwłaszcza jeśli mamy limity na ilość danych na smartfonie. Winna temu wydaje się być platforma Wix, a potwierdza to drugi outlier w tej kategorii doczytujący 180 zasobów: blog https://kordzikartur.wixsite.com/home.
Co jednak najbardziej ciekawe, score wydajności dla tych blogów wynosi aż 90, a wiele reguł wydaje się przestrzeganych. Obie strony są dostępne przez HTTPS, a serwer HTTP wspiera standard HTTP2, co pozwala na relatywnie szybkie wczytanie wszystkich tych zasobów.
Czy warto przejmować się punktami PageSpeed?
Wyciągając wnioski z opisanych wyżej danych, można na pewno stwierdzić że ranking PageSpeed jest przede wszystkim narzędziem, które może nam pomóc poprawić wydajność i użyteczność bloga. Porównywanie stron pod kątem punktów uzyskanych w teście nie odnosi się do treści, a do aspektów technicznych. Można zauważyć odwrotną korelację między punktacją i ilością treści (blogi z większym bagażem treści mają często niższe ratingi).
Jeśli poprawki sugerowane przez narzędzie są proste (np. lepsza kompresja obrazków na stronie), warto je wdrożyć. Każde 100 ms przy ładowaniu strony to odczuwalna przez czytelnika zmiana w responsywności strony i lepsze wrażenie. W komercyjnych serwisach przekłada się to mierzalnie na lepsze zarobki. W technicznych blogach - zapewne na bardziej profesjonalny wizerunek ;)
Jak poprawić wyniki?
Jeśli chcesz poprawić wynik dla swojej strony, najlepiej przejrzeć po prostu raport z narzędzia PageSpeed Insight dla swojej strony i wdrożyć zalecane w nim poprawki. Są opisane prostym językiem i po polsku i zwykle łatwo wprowadzić je w życie.
Na koniec jako ciekawostkę załączam zestawienie przyczyn, które najbardziej zaniżają punktację szybkości w grupie blogów konkursu Daj Się Poznać (rys. 3).
Dla ścisłości załączam zbiór danych z których wyciągałem statystyki: wyniki zapytania do PageSpeed Insights dla wszystkich stron bloga (plik ZIP, 750 kb). Nie ma w nim danych dla kilkunastu stron, które zwróciły status HTTP wskazujący na błąd (zwykle 400, 500 lub 404), lub nie było ich jeszcze na liście konkursowej w czasie pisania artykułu (w związku z tym, że rejestracja została na starcie przedłużona).
Dzięki za odwiedzenie bloga. Jeśli chciałbyś coś dodać w temacie wydajności stron, pomiaru ich jakości, a może samego konkursu Daj Się Poznać, to zachęcam do komentowania :) Zapraszam również do śledzenia kanału RSS tego bloga. Już wkrótce pojawią się tu kolejne ciekawe artykuły. Do zobaczenia!