Web Design Blog / Web:

Jak uzyskać 100 punktów w Page Speed Insights?

Data publikacji: 16 maja 2019

Uzyskanie maksymalnego wyniku 100% w Page Speed Insights jest mokrym snem web deweloperów oraz SEOwców. Tajemnicą poliszynela jest fakt, że osiągnięcie wyniku 100/100 nie należy do szczególnie trudnych zadań jeżeli tworzymy stronę od podstaw. Wystarczy tak naprawdę przestrzegać bardzo prostych zasad w tworzeniu stron internetowych i unikać wykorzystywania tanich szablonów z zagranicznych marketów.

W tym artykule podpowiem jak zdobyć 100 procent w teście Page Speed Insights zarówno dla urządzeń mobilnych jak i Desktop.

Ciekawostką jest fakt, że sposób ewaluacji stron w tym narzędziu jest co jakiś czas uaktualniany. Niegdyś sprawdzał czas odpowiedzi (oczywiście w postaci TTFB) i tego czy deweloperzy trzymają się starych i sprawdzonych technik optymalizacji stron takich jak:

  • minimalizacja kodu HTML, CSS, JS,
  • stosowania zoptymalizowanych grafik,
  • wykorzystywania pamięci podręcznej.

Obecnie sprawdza także wydajność stron, czyli:

  • czas do pełnej interaktywności,
  • procesor bezczynny po raz pierwszy,

a także User Experience (np. widoczność tekstu podczas ładowania się strony internetowej). Niektóre wymogi zostały troszkę zmienione np. kiedyś ustawienie nagłówków Expires na 30 dni dawało pełny wynik, dziś trzeba je ustawić na okres roku ale do tego jeszcze dojdziemy.

Kryteria oceny i zasada ewaluacji w Page Speed Insights

Formaty graficzne nowej generacji

Nowa odsłona Page Speed Insights (od końca 2018 roku) wymaga stosowania formatów graficznych nowej generacji. Mowa oczywiście o otwartym standardzie grafiki internetowej jaki jest WebP, o którym pisałem już jakiś czas temu w artykule o optymalizacji zdjęć na stronach internetowych. Jako, że podmiana wszystkich grafik z PNG i JPG (lub JPEG) na WebP spodoba się użytkownikom Chrome, Opery i Firefoxa to użytkownicy nieco gorszych przeglądarek takich jak Internet Explorer i Safari będą troszkę zawiedzeni – dlaczego? – ponieważ nie zobaczą zdjeć. Przeglądarki te nie wspierają formatu WebP.

Jest metoda aby pogodzić potrzeby obu grup użytkowników – należy użyć podejścia progressive enhancement i zdjęcia zamieszczać zarówno w starym jak i nowym formacie. Chociaż Page Speed tego nie wymaga warto się pochylić nad nieco mniej zaawansowanymi użytkownikami Internetu i zamieścić alternatywne formaty starszej generacji w następujący sposób:

<picture> 
	<source type="image/webp" srcset="obrazek.webp"> 
	<img src="obrazek.png" alt="opis obrazka"> 
 </picture>

Nowe formaty należy zastosować także dla atrybutów poster w klipach video oraz dla tła i dynamicznie wykorzystywanych atrybutów typu data-src w efektach parallax itp.

Lazy load, czyli leniwe ładowanie obrazków (odłożenie wczytywania niewidcznych obrazów)

Aby zdobyć 100 punktów w nowym Page Speed Insights należy stosować technikę optymalizacyjną o nazwie lazy-load. Polega to na tym, że grafiki które są położone niżej niż 2000 pikseli mają być ładowane z opóźnieniem, np po jakimś czasie od pełnego wczytania się strony lub po przewinięciu widoku w dół. O tym jak działa w praktyce lazy load i jak go zaprogramować napisałem w artykule: Lazy load czyli opóźnione ładowanie zdjęć w jQuery

Page Speed Insights sprawdza też czy wykorzystano także standardowe techniki optymalizacyjne, o których już napisałem osobne artykuły.

Pamięć podręczna dla zasobów statycznych (Expires / Cache-Control)

Raz pobrany plik z serwera może być wielokrotnie użyty przez przeglądarkę do generowania wyglądu kolejnych podstron witryny. Pamięć podręczna plików statycznych oraz nagłówki sterujące buforowaniem zasobów w kolejnych warstwach infrastruktury to jedna z najbardziej pierwotnych i krytycznych technik optymalizacji witryn internetowych. Czytaj więcej jak ustawić nagłówki Expires i Cache-Control oraz jakie są między nimi różnice.

Kompresja zasobów tekstowych (włącz kompresję tekstu)

Znaczne przyspieszenie pobierania się witryn internetowych jest możliwe dzięki bezstratnej kompresji danych. Kompresja zasobów tekstowych jest dostępna dzięki algorytmowi deflate – temu samemu, który odpowiada za kompresję grafik PNG. Kompresję GZIP lub deflate stosujemy najczęściej dla zasobów HTML, CSS, JS oraz XML. Czytaj o tym jak włączyć GZIP / deflate na standardowym serwerze WWW.

Minifikacja CSS, JavaScript

Dużo mniej efektywna ale niosąca wielowymiarowe korzyści jest minimalizacja kodu CSS i JS. Jest to usunięcie nadmiarowych znaków w kodzie, który nie wpłynie na finalny efekt interpretacji przez silnik przeglądarki. Spacje i tabulatory i znaki nowej linii w kodzie interpretowanym są potrzebne podczas pracy z kodem a w JS można zmienić nazwy zmiennych na unikalne i jednoliterowe zamienniki. Jest wiele narzędzi które automatyzują tego typu prace i o nich napisałem osobny artykuł. Czytaj jak poradzić sobie z tym punktem w minimalizacji kodu CSS i JavaScript.

Usuń nieużywany kod CSS

Nowa wersja PageSpeed Insights wymaga nie tylko minimalizacji ale także usunięcia nieużywanych instrukcji CSS. Skąd się biorą taki instrukcje? Obecnie strony są budowane z wykorzystaniem front-endowych frameworków czyli takich szkieletów jak Bootstrap a nawet gotowych szablonów stron WWW które oczywiście mają swoje zalety ale zawierają wiele elementów interfejsu których nie wykorzystujemy. Należy te elementy z arkusza stylu usunąć. Jest to jeden z trudniejszych punktów do zrealizowania bez odpowiednich narzędzi i motywacji ale jest możliwy z odrobiną motywacji i znajomości CSS. Czytaj więcej o tym jak usunąć nieużywany kod CSS.

Eliminacja zasobów blokujących renderowanie

Ilość oraz rozmiar zasobów zewnętrznych ma ogromny wpływ na uzyskiwany wynik PSI ale nie należy bać się każdej linijki CSS i JavaScript. Dołączenie do zoptymalizowanej strony skompresowanego kodu CSS frameworku Bootstrap oraz jego skryptu JS (wraz z Popper i jQuery Slim) nadal pozwala osiągnąć 100 (zarówno przy urządzeniach mobilnych jak i w Desktopie).

Ten punkt jest połączony z poprzednim, ale ważny jest także sposób umieszczania zarówno stylów jak i skryptów JavaScript. Czytaj o tym kiedy dokonywać kombinacji, czyli scalania skryptów w jeden plik, a kiedy wklejać je w ciało strony: Kombinacja plików CSS / JS vs. wklejanie kodu w ciało strony.

Zapewnij widoczność tekstu podczas ładowania „czcionek”

To jeden z punktów, który dotyka nie tyle szybkości wczytywania co User Experience witryny. Jeżeli korzystasz w niej z niestandardowych fontów możesz pozwolić na wyświetlenie się tekstu za pomocą standardowej „czcionki” dzięki nowym właściwościom w CSS:

Wystarczy dodać do elementów, w których używamy niestandardowych fontów właściwości font-display z wartością swap:

@font-face{
font-family:Lato;
font-style:normal;
font-weight:400;
font-display:swap;
src:local('Lato Regular');
}

Właściwość ta spowoduje, że jeśli font nie jest załadowany, każdy element, który próbuje jej użyć musi wyrenderować się przy użyciu fontu rezerwowego (poprostu kolejnego w liście font-family). Jeśli font zostanie pomyślnie szybko załadowany, jest używany standardowo. W efekcie może się zdarzyć, że przy niskiej jakości połączeniu użytkownik będzie korzystał z fontu rezerwowego np. domyślnego fontu przeglądarki lub font się zauważalnie podmieni krótko po pełnym wczytaniu witryny.

Skróć czas reakcji serwera (TTFB)

Czas reakcji serwera TTFB (ang. Time To First Byte) to opóźnienie, które jest liczone od wysłania żądania HTTP do serwera WWW do momentu odebrania przez nas pierwszego bajtu odpowiedzi. Im mniejszy czas TTFB tym lepiej – określa on jednocześnie jakość hostingu oraz jakość wdrożenia witryny, sklepu czy aplikacji internetowej.

Na długość czasu TTFB składa się ogrom czynników ale najważniejsze z nich to:

  • poziom skomplikowania CMSa i złożoności obliczeniowej generowania widoków,
  • jego dodatków (modułów, pluginów, rozszerzeń i ich ilości),
  • faktyczne parametry serwera,
  • fizyczna odległość klienta od serwera WWW,
  • obciążenie ruchem (obciążenie łącza i CPU)

Czas TTFB można radykalnie skrócić za pomocą skorzystania z technik pamięci podręcznej w warstwie aplikacji. Czytaj w jaki sposób testować i jak skrócić czas TTFB witryny w różnych CMSach w osobnym artykule.

Co psuje lub uniemożliwia uzyskanie pełnego wyniku Page Speed Insights?

  • Nieprofesjonalna strona, czyli korzystanie z gotowych szablonów, które zostały stworzone na bazie innych gotowych szablonów, które zostały dostosowane do potrzeb klienta za pomocą wtyczek, które w nieoptymalny sposób ładują nadmiarowy kod JS/CSS.
  • Stosowanie wielu web-fontów w dodatku z paroma wersjami grubości.
  • Stosowanie fontów ikonowych, podczas kiedy wykorzystujemy kilka znaczków, które spokojnie mogłyby być zastąpione wersjami inline SVG.
  • Brak podstawowej wiedzy i wyczucia w optymalizacji i projektowaniu stron WWW.

Podsumowanie

Zdobycie 100 punktów w PageSpeed Insights daje pewność, że od strony deweloperskiej poczyniono wszystkie wysiłki aby strona działała szybko i była wygodna dla użytkowników. PSI to jeden z głównych wyznaczników jakości stron internetowych i źródło satysfakcji dla perfekcjonistów.

Zielony wynik w Page Speed Insights z pewnością zostanie doceniony przez klientów, dla których korzystanie ze strony będzie wygodne oraz przez algorytm wyszukiwarki, który nagrodzi nas lepszymi pozycjami w wyszukiwarce.

Źródła

https://developers.google.com/web/tools/lighthouse/audits/webp?utm_source=lighthouse&utm_medium=unknown

Jak uzyskać 100 punktów w Page Speed Insights?
4.6 (91.67%) głosów: 12


Komentarze

Brak komentarzy.

Dodaj swój komentarz