Podstawowe wskaźniki internetowe – jak spełnić?

Dużo już powiedzieliśmy o narzędziu PageSpeed Insights i najnowszej aktualizacji SearchConsole. W artykule o wpływie szybkości na pozycjonowanie i o ścieżce krytycznej wspominaliśmy, że istnieją obecnie podstawowe wskaźniki internetowe (ang. Core Web Vitals). To one, zbierając dane z CrUX i PageSpeed Insights oraz podsumowują czy nasza strona działa prawidłowo w przeglądarkach naszych użytkowników.

Nie wszystko, co można obliczyć, liczy się i nie wszystko, co się liczy, można obliczyć.
Albert Einstein

Jak sprawdzić czy strona spełnia podstawowe wskaźniki internetowe?

Istnieją dwa sposoby na sprawdzenie czy nasza strona spełnia wymogi jakościowe w ramach Podstawowych wskaźników internetowych.

PageSpeed Insights
SearchConsole

Pierwsze narzędzie: PageSpeed Insights sprawdza pojedynczą podstronę i wyświetla ogólne sugestie na temat tego jak można poprawić dla niej uzyskane wyniki.

PageSpeed informuje wprost, czy dana witryna ogólnie spełnia czy nie spełnia wymagań Core Web Vitals. Są one spójne z tym co właściciel strony widzi w SearchConsole w zakładce „Podstawow Wskaźniki Internetowe”. Dodatkowo, raport w PageSpeed Insights wizualizuje wartości wskaźników z uwzględnieniem ilości użytkowników na wykresie paskowym.

Strona spełnia podstawowe wskaźniki internetowe, kiedy wszystkie trzy najważniejsze wartości mieszczą się w pożądanych zakresach. Szerokość paska to ilość użytkowników z danych CrUX, dla których wskaźniki mieściły w danych przedziałach:

Kiedy wskaźniki przekraczają dopuszczalne wartości, strona nie spełnia podstawowych wskaźników internetowych. Na poniższej ilustracji widać wymagającą poprawy wartość CLS:

Drugie narzędzie: Search Console to najważniejsze miejsce dla właścicieli stron internetowych, gdzie mogą oni sprawdzić najważniejsze informacje o stanie własnej strony internetowej w oczach Google.

To właśnie tutaj dla całej witryny generowany jest wykres i można zapoznać się z tym na których podstronach dochodzi do błędów i jakie są działania zaradcze.

Jak widać w przypadku tej strony nie ma niczego do poprawiania. Wystarczy monitorować i szybko zareagować, gdyby wystąpiły pomarańczowe bądź czerwone wartości.

Oba narzędzia są przydatne podczas poprawiania wskaźników internetowych. Search Console dokładnie pokaże nam gdzie są błędy na podstawie zebranych danych a PageSpeed Insighs pozwoli wykonać szybki test diagnostyczny i podpowie kierunki, w których powinniśmy podążać w celu spełnienia podstawowych wskaźników internetowych.

Wyniki słabej jakości i wymagające poprawy.

Kiedy klikniemy otwórz raport, panel pokaże nam ilość podstron z błędami a klikając na pozycje w szczegółach, otrzymamy listę podstron, które trzeba poprawić.

Ilość podstron z wynikami słabej jakości

Dlaczego tak? Bo należy pamiętać, że informacja o spełnieniu podstawowych wskaźników internetowych i odpowiednie dla nich wykresy w Search Console aktualizowane są ze sporym opóźnieniem (ok. miesiąca).

O tym:

skąd Google bierze te wartości (mowa o CrUX),
jak wpływają one na pozycjonowanie,

Dowiesz się z artykułu: wpływ PageSpeed na pozycjonowanie.

Pamiętajmy jeszcze szalenie istotną rzecz. Metryki są obliczane osobno dla urządzeń mobilnych i Desktop. Obecnie większą wagę mają wyniki dla urządzeń mobilnych z powodu tzw. indeksowania mobile-first.

Czym są podstawowe wskaźniki internetowe (Core Web Vitals)?

Podstawowe wskaźniki internetowe to 3 wartości:

LCP – Największe wyrenderowanie treści,
FID – Opóźnienie przy pierwszym działaniu,
CLS – Zbiorcze przesunięcie układu.

Poniżej opis każdej z metryk, wartości dla 3 zakresów dobry, wymagające poprawienia i słabej jakości oraz techniki ich optymalizacji.

LCP – Największe wyrenderowanie treści

LCP (ang. Largest Contentful Paint) – to metryka, która określa czas potrzebny na pokazanie się w przeglądarce największego elementu treści podczas wizyty na stronie.

Dobrej jakości LCP nie przekracza 2,5 sekundy. Wynik powyżej tej wartości wymaga poprawienia a LCP powyżej 4 sekund, określane jest jako słabej jakości.

Element ten znajduje się zazwyczaj w obszarze górnego zgięcia (ang. above the fold). Obszar ten jest pokazany na tych małych zrzutach ekranu w wynikach PageSpeed Insights. Tak to wygląda w przypadku wyników mobilnych:

Above The Fold na urządzeniach mobilnych

A tak w przypadku Desktop:

Above The fold dla urządzeń typu desktop

Przykładowo, na stronie głównej mojej strony (dla widoku mobilnego i desktop) LCP stanowi zdjęcie.

Optymalizacja LCP

Jak poprawić LCP? Na czas LCP wpływa bardzo wiele czynników zarówno związanych z szybkością strony jak i wydajnością. Aby spełnić standardy jakościowe LCP i poprawnie dobrać działania optymalizacyjne trzeba zrozumieć, że LCP to wypadkowa TTFB (czyli wydajności serwera i oprogramowania back-endowego) oraz optymalizacja wydajności górnego obszaru strony.

O szalenie istotnym TTFB, za który najbardziej odpowiedzialny jest serwer i ewentualnie system cache, czytaj więcej w poradniku o TTFB – jak zmniejszyć opóźnienie serwera. Są tam też linki i konkretne wskazówki dostosowane do konkretnych systemów CMS.

Skuteczna optymalizacja LCP różni się w zależności od tego jakiego rodzaju elementem jest LCP. Jeżeli LCP jest zdjęciem, efektywnym sposobem skrócenia czasu LCP będzie

optymalizacja zdjęcia (rozmiaru, formatu, kodowania),
sposobu jego dostarczenia (np. za pomocą CDN lub kodu base64)
zastosowanie techniki lazy-loading zdjęć,
zastosowanie tagu picture z alternatywnymi formatami,
kolekcja srcset z zapytaniami medialnymi dostosowująca rozdzielczość do konkretnego urządzenia).

Jeżeli elementem LCP jest tekst, możemy skrócić jego czas za pomocą:

optymalnego sposobu instalowania fontów np. redukcji ich ilości,
ogólnopojętej optymalizacji fontów.
wykorzystania właściwości display w kodzie CSS.

Jeżeli wyświetleniu tekstu towarzyszy animacja lub jest on elementem slajdera, optymalizacja może polegać na umiejętnym wklejeniu kodu JS lub stosowania techniki lazy-load.

Niezależnie od tego jakiego rodzaju elementem jest LCP, metrykę tę zawsze można skrócić za pomocą optymalizacji ścieżki renderowania. Do takich technik należy:

FID – Opóźnienie przy pierwszym działaniu

FID (ang. First Input Delay) to opóźnienie przy pierwszym działaniu / interakcji, jest to czas liczony od załadowania pierwszych elementów DOM do momentu możliwości interakcji (czyli przewijania i klikania) na stronie internetowej.

Strona spełnia wskaźnik na zielono, jeżeli czas do pierwszej interaktywności nie przekracza 100ms. Wyniki pomiędzy 100ms a 300ms wymagają poprawienia. FID powyżej 300ms może znacznie pogarszać user experience i wskaźniki jakości.

FID nie jest już zależny od TTFB, ponieważ aby elementy DOM pojawiły się w przeglądarce, odpowiedź serwera musi być odebrana i przetworzona.

Dobrej jakości wartość FID jest odczuwana jako „szybkie działanie strony internetowej” z perspektywy użytkownika, oznacza to że poszczególne strony pojawiają się szybko i od razu można po nich klikać i je przewijać.

Optymalizacja FID

Jak skrócić FID? Wartość FID można obniżyć za pomocą wielu technik optymalizacyjnych, niezależnie od charakteru strony można próbować zwiększyć jakość FID poprzez:

eliminację niewykorzystywanych skryptów JavaScript,
eliminację lub opóźnienie skryptów ładowanych z zewnątrz,
usunięciu czasu wykonywania skryptów (np. poprzez optymalizację kodu i usunięciu zależności),
odłożenia wykonywania i inicjalizacji skryptów w czasie (np. po załadowaniu strony lub po określonej interakcji),
zastosowanie pasywnych detektorów do poprawy działania przewijania,
unikaniu metody document.write(),
wykorzystanie technologii PWA – Pogressive Web Apps,
używać renderowania strony po stronie serwera w przypadku stron SPA – Single Page Application.

CLS – Zbiorcze przesunięcie układu

CLS (ang. Cumulative Layout Shift) to zbiorcze przesunięcie układu czyli suma widocznych przesunięć podczas ładowania się strony. Odpowiada za stabilność wizualną i silnie wpływa na user experience.

Wartość CLS to ułamek wspomnianego wyżej obszaru „nad zgięciem” czyli widocznego pola strony, które widać bez przewijania. Mimo, że dla zachowania dobrego user experience powinniśmy dążyć do braku jakichkolwiek przesunięć, istnieją zakresy tak jak w przypadku poprzednich podstawowych wskaźników internetowych.

CLS dobrej jakości znajduje się w przedziale od 0 do 0.1 pola widoku przeglądarki. Wartości kwalifikujące się jako wymagające poprawienia mieszczą się w przedziale od 0.1 do 0.25 a z CLS słabej jakości mamy do czynienia w przypadku, kiedy suma przesunięć była większa od 0.25 pola strony.

Pewnie nie raz zdarzyło się doświadczyć sytuacji kiedy chęć kliknięcia w menu lub linki kategorii spowodowała w kliknięcie w… reklamę, która dosłownie przed dotknięciem ekranu lub kliknięciem myszą pojawiła się w polu właściwego linka.

Optymalizacja CLS

Jak naprawić problem z CLS w Google SearchConsole i PageSpeed Insights?Optymalizacja CLS jest dosyć prosta, wystarczy spełnić następujące rekomendacje:

wykluczenie z mechanizmu lazy-load elementów położonych w obszarze above the fold,
stosowanie atrybutów width i height dla standardowych obrazków (szczególnie logo i tych które znajdują się u góry strony) oraz elementów iframe / embed,
odpowiednia wartość font-display dla napisów znajdujących się u góry strony lub optymalizacja ładowania fontów,
unikanie reklam o zmiennej wysokości,
stosowanie placeholderów, które rezerwują miejsce dla obrazków, reklam i elementów dynamicznych generowanych za pomocą JS,
wklejenie krytycznego CSS w element head (więcej informacji na ten temat jest w artykule o optymalizacji CSS).

Jak poprawić Core Web Vitals?

Istnieje wiele narzędzi, które podpowiadają co konkretnie należy poprawić na stronie internetowej aby wyniki Core Web Vitals widoczne w Search Console uległy znacznej poprawie. Wspominaliśmy już o narzędziu PageSpeed. Zobacz moje dwa na ten temat:

Podsumowanie

Jak widać każdą metrykę można z łatwością obniżyć za pomocą odpowiednich działań optymalizacyjnych. Wykonane z należytą starannością techniki optymalizacyjne wymienione w artykułach o przyspieszaniu stron internetowych pozwolą cieszyć się dobrej jakości podstawowymi wskaźnikami internetowymi a tym samym: lepszymi wrażeniami użytkowników, SEO oraz pozycjami w wyszukiwarce.

Optymalizacja podstawowych wskaźników internetowych – jak zresztą inne działania nastawione na techniczne polepszenie jakości strony i sklepu internetowego – może trudna do wykonania w przypadku stron o ogólnie niskiej jakości wykonanych w edytorach wizualnych i na gotowych szablonach, gdzie zwyczajnie nie mamy kontroli nad każdym kawałkiem kodu.

Artykuł nie przypadkowo opublikowałem w dziale Web (a nie SEO), ponieważ podstawowe wskaźniki internetowe (Core Web Vitals) stały się elementarną miarą ich jakości i technicznej poprawności. Tak samo jak unikamy błędów indeksowania, czy błędów w kodzie tak samo powinniśmy unikać praktyk, które powodują niskie wartości metryk, które tutaj opisywaliśmy.