Core Web Vitals – kilka słów o optymalizacji podstawowych wskaźników internetowych

calendar 2021/06/14
  • niezbędnik właściciela e-sklepu

Wprowadzenie przez Google podstawowych wskaźników internetowych (ang. Core Web Vitals) ma spore szanse zostać...

example_image
Wprowadzenie przez Google podstawowych wskaźników internetowych (ang. Core Web Vitals) ma spore szanse zostać jednym z najważniejszych tegorocznych wydarzeń w e-handlu. A do tego wydarzenia warto odpowiednio się przygotować.
  W poprzednich artykułach poświęconych zbliżającemu debiutowi Core Web Vitals skupiliśmy się już na znaczeniu nowych wskaźników dla branży handlu elektronicznego (o czym przeczytasz we wpisie Core Web Vitals – kilka słów o zmianie algorytmu Google) oraz na gotowości polskich e-sklepów (o czym przeczytasz we wpisie Czy polskie e-sklepy są gotowe na Core Web Vitals?). Optymalizacja Core Web Vitals nie jest taka straszna. Z myślą o nieco zagubionych (a być może nawet i zestresowanych) właścicielach małych i średnich e-sklepów przygotowaliśmy kilka wskazówek z tego zakresu .  

Czym są Core Web Vitals?

  Podstawowe wskaźniki internetowe (ang. Core Web Vitals) to zapowiedziane przez Google nowe mierniki jakości witryn internetowych, które począwszy od czerwca 2021 roku mają dołączyć do grona składowych tzw. algorytmu Google (wpływa on na pozycje, jakie dana witryna osiąga w wynikach wyszukiwania). Core Web Vitals tworzą:
  • LCP (ang. largest contentful paint),
  • FID (ang. first input delay),
  • CLS (ang. cumulative layout shift).
 
Optymalizacja LCP
  Largest Contentful Paint to wskaźnik mierzący prędkość ładowania największego elementu danej witryny. Na jego wynik w głównej mierze wpływają:
  • <img>,
  • <video>,
  • elementy z  tłem ładowanym za pomocą funkcji <url>,
  • elementy blokowe (np. duże fragmenty tekstu).
Powyższe elementy oraz m.in. długa odpowiedź serwera i czas ładowania zasobów witryny wspólnie wpływają na ostateczną wartość LCP. Wśród zaleceń mających na celu optymalizację LCP na pierwszy plan wysuwają się:
  • optymalizacja i kompresja obrazów,
  • udoskonalenie i kompresja użytych czcionek,
  • optymalizacja CSS oraz JavaScript.
 
Optymalizacja FID
  First Input Delay informuje o opóźnieniu reakcji witryny na podejmowane przez użytkowników interakcje. W praktyce oznacza czas pomiędzy działaniem użytkownika (np. wpisaniem adresu URL danego e-sklepu) do momentu, gdy przeglądarka zareaguje na tę interakcję. Zalecana wartość wskaźnika FID nie powinna przekraczać 100 milisekund. W jaki sposób można optymalizować ten wskaźnik? Eksperci w pierwszej kolejności zalecają:
  • zmniejszenie wpływu kodu hostowanego w innych domenach,
  • zminimalizowanie pracy głównego wątku,
  • zmniejszenie czasu wykonywania JavaScript,
  • utrzymanie liczby żądań na niskim poziomie.
 
Optymalizacja CLS
  Cumulative Layout Shift jest wskaźnikiem mówiącym o stabilności wizualnej witryny (czy jej elementy nie przesuwają się w trakcie ładowania). Jako jedyny z podstawowych wskaźników internetowych nie jest wyrażany w jednostkach czasu. Jego wartość mieści się w przedziale 0-1, gdzie 0 oznacza zerowe przesunięcie. Jest niezwykle istotny z punktu widzenia doświadczenia użytkowników, ponieważ przesunięcia witryny w trakcie podejmowanych przez nich prób interakcji rodzą zrozumiałą frustrację. Zgodnie z zaleceniami Google CLS nie powinien przekraczać wartości 0,1. Ten przekraczający 0,25 można uznać za synonim negatywnego doświadczenia użytkowników. W jaki sposób optymalizować wynik CLS? Wśród rekomendacji najczęściej wymienia się:
  • rezerwację wymaganej przestrzeni z uwzględnieniem wymiarów obrazów i video, gdyż zwykle te elementy powodują nieoczekiwane przesunięcia witryny,
  • unikanie wstawienia nowej treści nad istniejącą.
  Optymalizacja Core Web Vitals jest bardzo ważna. Warto jednak pamiętać, że, wbrew pozorom, Google wcale nie zdejmuje z barków właścicieli witryn internetowych konieczności dbania o wysoką jakość prezentowanych treści. Powiedzenie „content is the king” w dalszym ciągu pozostaje aktualne. [grwebform url="https://news.ucancommerce.com/view_webform_v2.js?u=A&webforms_id=4" css="on" center="off" center_margin="200"/]