Google PageSpeed Insights - Jak uzyskać 100/100?

Google PageSpeed Insights to narzędzie, które pozwala w pewnym stopniu ocenić jakość wykonania oraz działania strony internetowej. Moim zdaniem jest to całkiem uzasadnione. Za pomocą usługi, po podaniu odnośnika witryny, możemy wykonać szereg testów. Niektóre dotyczą aspektów technicznych, inne bezpośrednio wygody użytkowników. Pewne jest jedno. Dobry wynik w tym teście świadczy o dużym doświadczeniu twórcy oraz przywiązaniu uwagi do jakości, szczegółów. Pozytywny wynik może się tutaj odbić na Twoich wynikach w wyszukiwarkach, a na pewno zostanie doceniony przez czytelników.

Sam przywiązuję ogromną uwagę do realizowanych przeze mnie projektów. Nic dziwnego, że nowa wersja mojej strony internetowej uzyskuje w teście Google cudowne 100 na 100 punktów. Osiągnięcie tego wyniku to nie lada wyzwanie! Co zrobić, aby uzyskać taki wynik?

Legenda

Zacznijmy od tego jak wygląda sam test. Po wklejeniu odnośnika witryny, którą chcemy zweryfikować otrzymujemy szczegółowy raport. Wszystkie kryteria oceny są jasne. Dodatkowo usługodawca publikuje własne porady co można poprawić oraz w jaki sposób (bywa to jednak nieoczywiste - stąd ten artykuł). Test jest podzielony na dwie klasy urządzeń: komórki oraz komputery. Zielone znaczniki w legendzie oznaczają brak problemów - wybór poprawnych rozwiązań (dobra robota!), żółte komunikują drobnostki, które będzie można względnie łatwo naprawić. Tematy oznaczone na czerwono oznaczają istotne problemy, których rozwiązanie może wpłynąć pozytywnie na odbiór naszej strony internetowej.

image ‘assets/posts/2016-10-07-google page-speed- insights-jak-uzyskac-100-na-100/google-page-speed-baszczewski.png’ no exists

Dodatkowe szczegóły na temat działania narzędzia możemy poznać w jego dokumentacji.

Kompresja

Aby uzyskać dobry wynik w obrębie testu Google PageSpeed Insights Twoja strona powinna kompresować określone dane. Kompresja pozwala zmniejszyć ilość danych, które będą pobrane przez użytkowników odwiedzających Twoją stronę internetową. Równocześnie może skrócić czas oczekiwania na jej kompletne załadowanie się. Przeglądarki wspierają kompresję gzip. Ta powinna być stosowana dla różnego rodzaju plików, które dobrze się kompresują. Między innymi tekstowych: html, txt, js, css, json, txt. Jest jednak całkiem zbędna dla formatów, które same w sobie mają kompresję (np. pliki graficzne jpg).

Sposób włączenia kompresji w obrębie witryny może zależeć od serwera oraz technologii w obrębie której zbudowałeś stronę internetową. Jeśli korzystałeś z tradycyjnego serwera WWW takiego jak Apache wystarczy, abyś włączył określony moduł (mod_deflate / mod_gzip). Jeśli serwujesz statyczną stronę internetową (tak jak ja), pliki być może będą musiały być skompresowane jeszcze przed ich wysłaniem na serwer!

# plik .htaccess oraz moduł mod_deflate
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

# plik .htaccess oraz moduł mod_gzip
<IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Pamięć podręczna przeglądarki

Niezależnie od tego jak wygląda Twoja klasyczna strona internetowa, ta zawiera elementy statyczne oraz dynamiczne. Często treść Twojego portalu będzie się zmieniała wraz z każdym odwiedzeniem czytelnika. Siłą rzeczy ta nie może być w żaden sposób buforowana. Co innego pliki, które muszą być załadowane wraz z każdym wyświetleniem witryny, a ich zawartość jest stała. Obrazki, style kaskadowe, pliki JavaScript, wszystkie powinny mieć nadane flagi informujące przeglądarkę o tym jak długo mogą być przechowywane, zanim zajdzie kolejna potrzeba ich pobrania z serwera strony.

Przeglądarkę o tym czasie można poinformować na wiele różnych sposobów. Między innymi za pomocą nagłówków HTTP Expires oraz Cache-Control.

Pozostaje kwestia dodania tych nagłówków. Tutaj podobnie jak z kompresją można to zrobić bezpośrednio zmieniając konfigurację serwera. Jeśli Twoją stronę napędza serwer Apache zainteresuje Cię moduł mod_expires. Jeśli stronę publikujesz za pomocą chmury (np. Amazon S3) odpowiednie meta dane musisz nadać już na etapie ich zamieszczania.

# plik .htaccess oraz moduł mod_expires
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
    ExpiresByType text/html "access plus 10 seconds"
    ExpiresByType image/gif "access plus 30 days"
    ExpiresByType image/jpeg "access plus 30 days"
    ExpiresByType image/png "access plus 30 days"
    ExpiresByType image/jpg "access plus 30 days"
    ExpiresByType image/svg+xml "access plus 30 days"
    ExpiresByType text/css "access plus 30 days"
    ExpiresByType text/javascript "access plus 30 days"
    ExpiresByType application/javascript "access plus 30 days"
    ExpiresByType application/x-javascript "access plus 30 days"
</IfModule>

Pliki multimedialne

Poza ustaleniem zasad dotyczących buforowania swoich plików graficznych, musisz zadbać również o ich dostosowanie do szablonu oraz urządzenia. Do szablonu ponieważ może okazać się, że obrazek jest pobierany w rozmiarze większym aniżeli to konieczne. Kolejno jest skalowany w dół już za pośrednictwem samej przeglądarki. To marnotrawstwo zasobów, jako że użytkownik musiał pobrać dużą grafikę, a nie przełożyło się to w ogóle na jakość jej prezentacji. Strona wczytywała się dłużej, zużyto nie potrzebnie transfer danych. W dobie stron responsywnych pojedyncza grafika podczas rysowania na stronie może jednak przybrać różne rozmiary. Inne na komputerach stacjonarnych. Całkiem inne na urządzeniach mobilnych. Być może Twoje zdjęcie będzie wypełniało całą dostępną szerokość lub wysokość. Aby poprawić zaistniałą sytuację powinieneś każdą pojedynczą grafikę (jeśli jej rozmiar nie jest na stronie stały w rozmiarach), przygotować w kilku wariantach. Nowoczesne przeglądarki internetowe dysponują wsparciem atrybutu imgsrc (dla taga img) oraz tagiem <picture>, dzięki którym możesz wskazać w jakich okolicznościach, jakie warianty Twojej grafiki będą miały być załadowane przez przeglądarkę. Jak używać tych elementów języka HTML 5, po które sięgnąć to temat na całkiem osobny artykuł.

Podsumowując. Spełnienie tego wymagania Google PageSpeed Insights będzie dla Ciebie dużym wyzwaniem. Musisz zadbać o tworzenie obrazków w wielu różnych formatach, jak i sam szablon będzie musiał być zaktualizowany aby je wspierać.

Redukowanie ilości kodu

Kompresja przesyłanych plików do przeglądarki nie jest jedynym sposobem na ograniczenie ilości przekazanych danych, niezbędnych do wyświetlenia strony. Przykładowo Twój kod HTML, CSS oraz JavaScript, może być pozbawiony zbędnych formatowań, komentarzy, białych znaków, dzięki czemu będzie zajmował znacznie mniej miejsca! Wiele bibliotek dostępnych w sieci w swoich zasobach posiada wariant zmniejszony oraz oryginalny. Oryginalny jest wygodny dla programistów. Zmniejszony natomiast zajmuje mniej miejsca i szybciej zostanie załadowany przez przeglądarkę. Komu udostępniasz stronę? Zwykłym czytelnikom czy programistom? Oczywiście, że zależy Ci na normalnych czytelnikach, dlatego też powinieneś korzystać z plików poddanych stosownej obróbce. Dotyczy to zarówno bibliotek trzecich, jak i kodu przygotowanego na potrzeby Twojego szablonu. Oczywiście nie musisz ręcznie usuwać zbędnego kodu. Możesz do tego zadania użyć dziesiątki dostępnych narzędzi, np. gulp-clean-css, html-minify, uglify.

Modyfikacja skryptu strony

Aby spełnić wszystkie oczekiwania tego rygorystycznego testu, będziesz zapewne musiał zaktualizować oprogramowanie swojej witryny. Być może będą musiały być poczynione w jego ramach duże zmiany. Aby użytkownicy szybko mogli zobaczyć treści, które dla nich przygotowałeś, nie możesz zablokować wyświetlana strony przez małe pliki, które muszą być załadowane, zanim cokolwiek się wyświetli. Jeśli w obrębie <head> Twojej strony importujesz wiele styli kaskadowych bądź plików skryptów JS w sposób synchroniczny, uniemożliwiasz wyświetlenie czegokolwiek, zanim te dane nie zostaną załadowane! Google jest tutaj dość rygorystyczny. W praktyce dla idealnego wyniku nie dopuszcza… rzadnego pliku w tej sekcji, który byłby ładowany synchronicznie! Możesz pomyśleć: “jak zatem mam wprowadzić style kaskadowe dla mojej witryny?”. Odpowiedź jest prosta. To co niezbędne powinno być wklejone bezpośrednio w obrębie <style>. Tutaj masz również ograniczenia. Twój docelowy plik HTML nie może być za duży, ponieważ zostanie wyzwolony inny wyjątek. Pozostałe style, które mogą zaczekać powinieneś załadować na samym końcu, albo asynchronicznie. Drugie rozwiązanie jest wskazane jeśli chcesz zachować zgodność z walidacją W3C. Dla mnie ta jest priorytetowa. Uff. Ze skryptami JavaScript jest nieco łatwiej. Zawsze możesz je załadować na samym końcu strony, albo wczytywać dynamicznie kiedy jest taka potrzeba (patrz RequireJS).

Jeśli posiadasz stronę, która bazuje na jakimś gotowym szablonie, bądź korzystasz z jakiegoś “masowego” frameworka, systemu zarządzania treścią, być może narzucone pliki, które muszą być załadowane w określonym miejscu strony całkiem uniemożliwią Ci spełnienie tych wymogów.

Czytelny szablon

Google PageSpeed Insights jest kompleksowym testem. Oceni nie tylko z czego składa się Twoja strona internetowa. Sprawdzi również jak wygląda po wyświetleniu i czy aby odnośniki nie są za małe, nie występują zbyt blisko siebie. Jeśli zależy Ci na dobrym wyniku Twoja strona powinna być czytelna! Zalecane jest również by sam szablon zachowywał się w sposób responsywny.

Dobry hosting

Twoja strona może być zaprojektowana poprawnie technicznie, a nadal nie uzyskasz wyniku 100/100. Dlaczego? W ramach testu sprawdzana jest również wydajność serwera. W sensie czy odpowiedzi HTTP zostaną zwrócone w akceptowalnym czasie (mniej niż 200 ms). Nie dopuszczalne jest by Twój serwer zaczął wysyłanie wyników z dużym opóźnieniem! Jeśli odpowiedź Twojego serwera wykracza poza wspomniany limit masz dwie możliwości: skorzystać z lepszego hostingu bądź zoptymalizować oprogramowanie, które napędza Twoją witrynę.

Gra warta świeczki?

Uzależnienie odbioru projektu od tego wyniku raczej było by absurdalne. Jest wiele stron internetowych, w których nie sposób było by wprowadzić optymalizacje gwarantujące wynik 100 na 100. Bardzo rozsądne moim zdaniem jest jednak wymaganie, aby w przygotowanej witrynie nie było rażących błędów, które zresztą w tym teście oznaczone są na czerwono. Niektóre optymalizacje pod kątem Google PageSpeed Insights wymagają swego rodzaju sztuczek. Moim zdaniem nie powinny być celem samym w sobie. Jeśli zobaczymy jednak fajną witrynę, dobrze ocenianą, która przy okazji wyświetla się szybko, wygląda ciekawie… czy nie pozostaje nam nic innego jak pogratulować autorowi i docenić jego pracę?