Core Web Vitals

Szykują się zmiany

Nie zostań w tyle za konkurencją!

Home

Core Web Vitals – nie przegap zmian!

zmiany

Już od sierpnia 2021, pojawi się nowy czynnik rankingowy – Core Web Vitals. Zoptymalizuj więc swoją stronę już dziś, by nie zostać w tyle ze konkurencją! Zadowolenie użytkownika z korzystania z witryny powoli zaczyna wysuwać się na pierwszy plan. Czy jesteś gotowy na zmiany?

Czym są Cire Web Vitals?

Core Web Vitals (podstawowe wskaźniki internetowe) to wskaźniki dotyczące szybkości i wydajności stron internetowych, związane z rzeczywistym zachowaniem użytkowników na stronie. Zostały one ogłoszone w połowie 2020 roku. Core Web Vitals mają być wdrażane stopniowo od połowy czerwca 2021, a pełnoprawnym czynnikiem rankingowym staną się w sierpniu 2021. To nowy czynnik rankingowy wprowadzony przez Google, biorący pod uwagę zadowolenie internauty związane z użytkowaniem danej witryny i mierzący kwestie w rzeczywisty sposób na to zadowolenie wpływające. Satysfakcja użytkownika staje się coraz ważniejszą kwestią, od której w dużej mierze będzie zależeć pozycja strony w wyszukiwarce. Google stara się również dostarczać wyniki wyszukiwania coraz lepszej jakości. Wskaźnik ten jest związany z responsywnością, szybkością oraz stabilnością wizualną. Będzie brany pod uwagę równolegle z certyfikatem HTTPS, bezpiecznym przeglądaniem, byciem mobile friendly, brakiem uciążliwych reklam.

Do Core Web Vitals zaliczamy:

Core Web Vitals

Źródło: https://web.dev/vitals/

LCP (Lagrest Contentful Paint)

Wskaźnik ten mierzy wydajność witryny, pokazując szybkość ładowania strony, czyli czas, który jest potrzebny do załadowania największego elementu znajdującego się na stronie. Dotyczy to tak zwanego obszaru above the fold, czyli pierwszego ekranu widocznego po załadowaniu strony. Pozytywny wskaźnik wynosi mniej niż 2,5 sekundy. 2,5 – 4 sekundy to wynik przeciętny, natomiast powyżej 4 sekund oceniany jest jako niski, ponieważ niesie ze sobą ryzyko, że użytkownik zniecierpliwi się i opuści stronę przed jej pełnym załadowaniem.

FID (First Input Delay)

To opóźnienie przy pierwszym działaniu, wskazujące na interaktywność strony. Jest to czas liczony od momentu rozpoczęcia ładowania strony do momentu, w którym strona będzie w stawie w pełni odpowiedzieć na interakcję. Czas ten powinien wynosić maksymalnie 100 milisekund od pierwszej interaktywności. Czas w granicach między 100, a 300 milisekund świadczy o konieczności poprawy, natomiast wynik powyżej 300 milisekund oceniany jest jako negatywny.

CLS (Cumulative Layout Shift)

To wskaźnik mierzący stabilność wizualną układu strony. Oznacza liczbę nieoczekiwanych przesunięć widocznych podczas ładowania strony. Nie wlicza się jednak wyskakujących pop-upów. Wskaźnik CLS powinien wynosić maksymalnie 0,1. Wartość 0,1-0,25 wskazuje na stabilność strony, powyżej 0,25 wskazuje na konieczność optymalizacji strony.

Pozostałe Web Vitals

Do pozostałych Web Vitals możemy natomiast zaliczyć:

TTFB (Time to First Byte)

Wskazuje na czas odpowiedzi serwera. To czas od momentu wysłania zapytania do momentu odebrania przez użytkownika pierwszego bajtu odpowiedzi.

FCP (First Contentful Paint)

Wskaźnik pokazuje ile czasu zajmuje przeglądarce załadowanie pierwszego contentu na stronie, na który może składać się obraz, treść lub video.

TTI (Time to Interactive)

Pokazuje czas potrzebny do momentu umożliwiającego wprowadzenie danych na stronie od momentu załadowania strony.

TBT (Total Blocking Time)

Wskaźnik pokazujący ile czasu opływa od załadowania pierwszych treści na stronie do momentu możliwości wprowadzenia danych.

Jak sprawdzić Core Web Vitals?

To, czy Twoja witryna spełnia Core Web Vitals, sprawdzisz wykorzystując Google Search Console. Wejdź w sekcję „ulepszenia”, a następnie wybierz „podstawowe wskaźniki internetowe”. Znajdziesz tam raporty CWV dla komputerów i urządzeń mobilnych. Można tam znaleźć informacje, na których dokładnie podstronach znajdują się nieprawidłowości.

Innym narzędziem jest witryna GTMetrics https://gtmetrix.com/. Ważne jest sprawdzenie różnych podstron, ponieważ wyniki różnią się.

Kolejna propozycja to Page Speed Insights https://developers.google.com/speed/pagespeed/insights/?hl=pl.

Podobnie jak w przypadku GTMetrics, wyniki różnią się dla poszczególnych witryn. Możesz również skorzystać z Web Dev: https://web.dev/measure/ lub Web Page Test https://www.webpagetest.org/.

Kolejna propozycja to Lighthouse, narzędzie open source, które służy do wykonywania audytów. Lighthouse występuje w formie wtyczki do przeglądarki Chrome lub jako jedna z funkcji Chrome DevTools.

Możesz także zainstalować wtyczkę Core Web Vitals Extension

https://chrome.google.com/webstore/detail/core-web-vitals/adeniimnihmbpgpbljmnohjpoolmgabj lub Web Vitals Extension https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

Jak zoptymalizować stronę pod Core Web Vitals?

By strona była zoptymalizowana pod Core Web Vitals, musisz pamiętać o kilku niezwykle istotnych kwestiach.

Kolejność ładowania

Przede wszystkim elementy z przestrzeni above the fold (czyli pierwszy ekran widoczny po załadowaniu strony) powinny zawsze ładować się w pierwszej kolejności. W danym momencie powinny ładować się tylko te pliki, które są potrzebne, dzięki zastosowaniu tak zwanej techniki lazy loading. Kolejne elementy pojawiają się w miarę scrollowania strony. Zasoby zapewniające użytkownikowi największą wartość powinny ładować się w pierwszej kolejności. Takie rozwiązanie przyspiesza szybkość ładowania się strony, pozytywnie wpływając na wskaźnik LCP.

Optymalizacja grafik

Konieczna jest optymalizacja grafik, ponieważ ich zbyt duże rozmiary potrafią znacznie spowolnić działanie serwera. Najlepiej zastosować możliwie najmniejszy rozmiar, który nie wpłynie negatywnie na jakość. Dobrze jest usunąć dane EXIF (dotyczące lokalizacji, ustawień urządzenia, informacji o aparacie). Warto zastanowić się również nad formatem – WebP będzie najbardziej wydajny, jednak jego wadą jest to, że nie jest on obsługiwany przez Internet Explorer.

Kolejna ważna rzecz to responsywność grafik, dzięki której grafiki dostosowują się do urządzenia, na którym są wyświetlane. Warto również dodać atrybuty height i width do obrazów, dzięki którym zminimalizujemy ryzyko przesunięć grafik.

Optymalizacja fontów

Kolejnym elementem do zoptymalizowania są fonty – ich duża różnorodność negatywnie wpływa na ładowanie strony. Dobrze jest więc zredukować ich ilość do minimum. Podobnie sytuacja wygląda w przypadku wielu wariantów grubości danego fontu.

Minifikacja i kompresja

Ładowane zasoby powinny być zminifikowane i skompresowane. Dobrze jest też unikać ładowania zasobów z zewnętrznych serwerów. Niezwykle ważna jest optymalizacja czasu odpowiedzi serwera, dzięki której możliwa jest poprawa szybkości ładowania strony. Nie można zapomnieć o minifikacji plików JS i CSS, która polega na usunięciu wszystkich zbędnych enterów, spacji, znaków, tabulatorów oraz komentarzy, które zwiększają rozmiar pliku, nie wpływając na działanie kodu. Ważne okaże się również ograniczenie skryptów JS i stylów CSS, polegające na usunięciu fragmentów kodu, które są zbędne na danej podstronie lub zmodyfikowanie kodu w taki sposób, by fragmenty te wczytywały się tylko na tych podstronach, na których są konieczne. Przydatne okaże się także rozbicie długo działającego kodu na mniejsze zadania.

Third-party code

Kolejna ważna kwestia dotyczy tego, by kod innej firmy (czyli tak zwany third-party code) obejmujący reklamy, narzędzia analityczne biblioteki obrazów czy platformy zarządzania danymi nie ładował się przed skryptem własnym.

Our Score

Dodaj swój komentarz

Zaloguj się aby dodać komentarz.