Core Web Vitals – czym są i jak je poprawić?

Aktualizacja algorytmu Google związanego z UX nastąpi latem 2021 r. Ściślej rzecz biorąc, aktualizacja algorytmu rozpocznie się 05.2021 i planowo prace wdrożeniowe mają zakończyć się do 08.2021. Wskaźniki Core Web Vitals oficjalnie staną się czynnikiem rankingowym algorytmu Google – czym jest Core Web Vitals i jak przygotować się na nadchodzące lub też – jeśli ten artykuł czytany jest już po fakcie – wprowadzone zmiany? O tym wszystkim piszemy poniżej.

Core Web Vitals – co to jest?

Core Web Vitals to zestaw wskaźników internetowych, które mierzą doświadczenia użytkowników na stronie internetowej lub aplikacji. Dane pochodzące z CrUX i Page Speed Insights podsumowują, czy nasza strona internetowa jest dobrze przygotowana na potrzeby użytkowników.

Core Web Vitals mierzą przede wszystkim: szybkość ładowania strony, interaktywność oraz stabilność wizualną witryny.

Obecnie zestaw wskaźników obejmuje 3 metryki:

  • LCP – Largest Contentful Paint (największe wyrenderowanie treści).
  • FID – First Input Delay (opóźnienie przy pierwszym działaniu).
  • CLS – Cumulative Layout Shift (zbiorcze przesunięcie układu).

Trio tych wskaźników nazywane jest Core Web Vitals. Wprowadzenie tych wskaźników oraz sama inicjatywa ma na celu zwrócenie uwagi na ważne czynniki, które mają realny wpływ na odbiór strony i doświadczenia użytkownika podczas korzystania z witryny.

Core Web Vitals – omówienie wskaźników

core web vitals obrazek 6

Trzy podstawowe wskaźniki internetowe to LCP, FID i CLS – wszystkie dotyczą szybkości i jakości wczytywanej strony, która ma wpływ na doświadczenia użytkowników. Poniżej postaramy się omówić każdy wskaźnik szczegółowo.

LCP – największe wyrenderowanie treści

LCP (ang. Largest Contentful Paint) to rodzaj wskaźnika, który próbuje zmierzyć, jak szybko wczytuje się największy element na stronie podczas wizyty użytkownika na stronie.

Wskaźnik wykrywa oraz identyfikuje największy element na stronie np. (obraz, film wideo, blok tekstu), a następnie mierzy, jak długo dany element wczytuje się od momentu załadowania się strony.

lcp obraz

Docelowy wynik wskaźnika LCP nie powinien przekraczać 2,5 sekundy.
Wynik powyżej tej wartości wymaga poprawy.

>2,5s

Jak poprawić wynik LCP?

Sprawdź, jakie kroki należy podjąć, aby zredukować czas załadowania zasobów – i tym samym poprawić wynik LCP.

Warto wykorzystać Content Delivery Network (CDN)

System CDN poprawia szybkość serwisu – jest to rozproszona sieć serwerów, która pomaga zminimalizować opóźnienia w ładowaniu zawartości strony www. Szczególnie warto wykorzystać sieć CDN, kiedy treści kierujemy do użytkowników z wielu krajów – warto wtedy dostarczać zasoby z serwera zlokalizowanego najbliżej użytkownika.

Warto zoptymalizować serwer lub sprawdzić jego ustawienia

Elementem podstawowym do wysokiej wydajności serwisu jest szybki serwer z odpowiednią konfiguracją. Podstawowe elementy konfiguracji serwerów to np. nowa wersja PHP, włączenie pamięci podręcznej, włączenie kompresji itd.

Warto zoptymalizować stronę

Optymalizacja strony internetowej w dzisiejszych czasach to bardzo ważny aspekt w kontekście całościowego rozwoju i wydajności strony internetowej.

Przede wszystkim na początku powinniśmy spróbować jak najbardziej odchudzić nasz serwis ze zbędnych linijek kodu i dostosować go w miarę możliwości do najnowszych wytycznych i aktualnie stosowanych praktyk.

W kolejnym kroku możemy wykorzystać moduły przyśpieszające strony (popularny i wydajny plugin np. dla CMS WordPress to WP-Rocket). To narzędzie do cache’owania i przyśpieszania ładowania stron z takimi funkcjami jak: cache strony, wstępne ładowanie cache, kompresja GZIP, minifikacja HTML, JS, CSS, opóźnienie ładowania obrazów, serwowanie statycznego HTML i wiele innych.

Zaznaczamy jednak, że żaden moduł nie zastąpi dobrze wykonanej strony www. Jeśli potrzebujesz pomocy w zakresie optymalizacji swojej witryny, możesz skontaktować się z naszym specjalistą. Doradzimy najlepsze rozwiązanie.

Sprawdź też: Strony WordPress – czym wyróżnia się dobra strona WordPress?

Warto zoptymalizować grafiki na stronie internetowej

Jednym z najczęstszych błędów popełnianych przez właścicieli stron internetowych jest stosowanie i wgrywanie na stronę niezoptymalizowanych grafik. Często wgrywane są zdjęcia z rozmiarami 4000px w miejsce elementów, które wyświetlają co najwyżej kilkaset pikseli. Google jest bardzo na to wyczulone, dlatego warto zadbać o optymalizację grafiki na stronie internetowej.

Szczególnie pamiętaj o: korzystaniu z nowoczesnych formatów zdjęć, takich jak np. WebP, kompresji zdjęć oraz stosowaniu odpowiednich rozmiarów grafik.

FID – opóźnienie przy pierwszym działaniu

FID (ang. First Input Delay) to wskaźnik, który określa, ile czasu zajmuje użytkownikowi interakcja ze stroną.

W wielu witrynach, np. po zalogowaniu się na swoje konto, musimy odczekać pewien czas aż np. załadują się wszystkie zasoby i dopiero wtedy możemy podjąć interakcję z witryną (np. kliknąć w button, element z menu itd.)

fid obraz

Docelowy wynik wskaźnika FID nie powinien przekraczać 100ms.
Wynik powyżej tej wartości wymaga poprawy.

>100ms

Jak poprawić wynik FID?

Generalnie w większości przypadków optymalizacja parametru LCP powinna wpłynąć pozytywnie również na FID. Głównym problemem, który wskazuje na nieprawidłową wartość parametru FID w większości przypadków jest niezoptymalizowany kod JavaScript, który jest kompilowany w momencie renderowania się strony www. Im dłuższy kod JS, tym dłuższe ładowanie strony.

Jeśli masz problem ze wskaźnikiem FID, szczególnie zwróć uwagę na:
  • niepotrzebne skrypty JS – wyrzuć je lub ładuj je asynchronicznie po załadowaniu podstawowych zasobów;
  • opóźnienie ładowanie skryptów pochodzących z zewnętrznych adresów – np. Google Tag Manager, Tidio chat, Google Analytics, SmartsUpp i inne;
  • usuń nieużywane fragmenty kodu JS.

CLS – zbiorcze przesunięcie układu witryny

CLS (ang. Cumulate Layout Shift) to wskaźnik, który mierzy wszelkie niespodziewane przesunięcia elementów na stronie, pojawiające się nagle podczas ładowania witryny (lub później).

Głównym założeniem tego wskaźnika jest zbadanie wizualnej stabilności strony – zbyt długie ładowanie niektórych elementów na stronie, a następnie gwałtowne ich „przeskakiwanie” może spowodować, że użytkownik kliknie w coś, czego tak naprawdę nie ma zamiaru.

cls obraz

Pewnie nie raz niechcący kliknęliście np. na reklamę na stronie internetowej, która pojawiła się dopiero po pewnym czasie, podczas gdy chcieliście kliknąć na zupełnie inny element.

Core Web Vitals - czym są i jak je poprawić? 1

Docelowy wynik dla wskaźnika CLS nie powinien przekraczać 0.1 ms.
Wynik powyżej tej wartości wymaga poprawy.

>0.1ms

Jak poprawić CLS?

W pierwszym kroku powinniśmy sprawdzić, które sekcje ulegają przesunięciu np. za pomocą PageSpeed Insights. Problem z parametrem CLS najczęściej powodują grafiki na stronie, które podczas przeładowywania się zmieniają pozycje elementów obok nich. W takim wypadku należy przydzielić predefiniowane rozmiary dla danego elementu za pomocą odpowiednich atrybutów.

Przykład:

							
							
					<img src="jakiesZdjecie.png" width="100" height="100" alt="optymalizacja CLS">				
			

Jak sprawdzić, czy Twoja witryna ma dobre wyniki Core Web Vitals?

Na początek sprawdź Google Search Console. To narzędzie, w którym znajdziesz zakładkę “Podstawowe wskaźniki internetowe”, a w zakładce znajdziesz informacje zawierające dane na temat wydajności Twojej witryny w porównaniu z elementami Core Web Vitals.

Google Search Console

W zakładce “Podstawowe wskaźniki internetowe” w Google Search Console znajdziesz listę adresów URL, których dotyczy problem oraz elementy, które należy poprawić. W raporcie znajdziesz wskaźniki, które wcześniej w naszym artykule już omówiliśmy – tj. LCP, FID i CLS.

google search console core web vitals

PageSpeed Insights

W celu zidentyfikowaniu błędów bardzo pomocne jest również narzędzie PageSpeed Insights. To narzędzie oferuje szereg danych na temat witryny zarówno na urządzeniach mobilnych, jak i na komputerach. Narzędzie pokazuje, z jakimi elementami i zasobami jest problem w witrynie, więc jest doskonałym punktem wyjścia do wprowadzania ulepszeń na stronie  i uzyskiwania pozytywnych wyników w kluczowych wskaźnikach.

Core Web Vitals - czym są i jak je poprawić? 2

Narzędzie dla deweloperów

W procesie wdrażania poprawek, nieocenionym narzędziem jest konsola wbudowana w przeglądarkę Chrome.

W konsoli w zakładce „Coverage” mamy możliwość sprawdzenia, jakie dokładnie linijki kodu i arkuszy stylów nie są używane na danej podstronie.

W konsoli w zakładce „Performance” możemy łatwo zidentyfikować elementy i dokładne fragmenty kodu, które mają wpływ na podstawowe Core Web Vitals.

Core Web Vitals - czym są i jak je poprawić? 3

Sprawdź też: Techniczne SEO – co to jest? Na co zwrócić uwagę podczas audytu SEO?

Inne elementy ważne dla wyszukiwarek internetowych

Jeśli chcesz zadbać o wysokie pozycje w wyszukiwarce Google oprócz wskaźników Core Web Vitals, powinieneś wziąć też pod uwagę szereg innych rzeczy jak np. 

Mobile friendly

Co prawda duża część stron internetowych jest już responsywna i prawidłowo dostosowuje się do rozmiaru urządzenia mobilnego, to wciąż jednak często ignorowany jest aspekt wydajności tego układu. Jako właściciel serwisu powinieneś dołożyć wszelkich starań, aby wygląd Twojej strony internetowej na urządzeniach mobilnych nie tylko nie odstraszał i umożliwiał jej przeglądanie, ale był po prostu przyjazny i intuicyjny.

Https

Tutaj również jest to na dzisiejsze czasy absolutne must have, jeśli myślimy o wysokich pozycjach w wyszukiwarce Google i pozytywnych wrażeniach użytkownika. Protokół SSL m.in. szyfruje wpisywane dane przez użytkowników i zapewnia bezpieczeństwo witryny.

Reklamy

Jeśli prowadzisz witrynę, na której umieszczasz reklamy to upewnij się, że w żaden sposób nie wpływają one negatywnie na odbiór witryny przez użytkownika. Szczególnie zwróć uwagę na to, czy elementy reklamy nie utrudniają użytkownikowi nawigacji po stronie i czytania lub oglądania treści.

Wysokiej jakości treści

Szczególnie zadbaj o estetyczną i jasną strukturę treści, przy tym unikając ścian tekstów i dbając o poprawność języka polskiego.

Sprawdź też: Copywriting – co to jest i dlaczego dobry copywriter jest ważny

Przejrzysty układ strony i nawigacja

Zaplanuj logicznie architekturę informacji oraz dostarcz użytkownikowi jasny układ nawigacji.

Core Web Vitals – Podsumowanie

UX (doświadczenia użytkownika) na stronach internetowych stało się czynnikiem rankingowym algorytmu Google od czerwca 2021 roku. Na razie dokładnie nie znamy wagi tego czynnika w algorytmie, ale prawdopodobnym scenariuszem jest to, że będzie ona coraz większa. Core Web Vitals to zestaw wskaźników internetowych, które Google obecnie wykorzystuje do określenia i oceny doświadczeń użytkowników na danej stronie internetowej.

Upewnij się, że Twoja witryna jest dobrze przygotowana pod użytkowników, jeśli nie chcesz stracić swoich pozycji. Skorzystaj z dostępnych narzędzi, aby sprawdzić wydajność witryny i wprowadź niezbędne zmiany.

Dodaj komentarz