24 października 2020

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

Kategoria: Web
Tagi: dla klientów, dla profesjonalistów
Autor: Paweł Mansfeld

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.

  1. PageSpeed Insights
  2. 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:

Strona spełnia podstawowe wskaźniki internetowe.

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:

Strona nie spełnia podstawowych wskaźników internetowych

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:

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.

(Ładowanie) LCP – Największe wyrenderowanie treści

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

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.

(Interaktywność) FID – Opóźnienie Przy Pierwszym Działaniu

Jeżeli czas do pierwszej interaktywności nie przekracza 100ms

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.

Interakcja na stronie internetowej

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:

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.

(Stabilność wizualna) CLS – Zbiorcze przesunięcie układu

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.

Wizualizacja przesunięć CLS

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).

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ć błędnych praktyk, które powodują niskiej jakości wartości podstawowych wskaźników internetowych.

Źródła

https://support.google.com/webmasters/answer/9205520?hl=pl

https://web.dev/vitals/

https://web.dev/lcp/

https://web.dev/fid/

https://web.dev/cls/

Oceń artykuł na temat: Podstawowe wskaźniki internetowe – jak spełnić?
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 8


 

Odpowiedz lub skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *


 

Następny artykuł

Wykryto brak połączenia z Internetem.