Co to jest Core Web Vitals i jak go zoptymalizować

Opublikowany: 2023-06-12

W 2021 roku Google włączył doświadczenie strony jako czynnik rankingowy. Jego głównym celem jest poprawa wydajności sieci. Wraz z aktualizacją Page Experience Core Web Vitals stały się istotnym czynnikiem, który należy wziąć pod uwagę, jeśli chcesz, aby Twoja witryna zajmowała pozycje w wynikach wyszukiwania Google.

Gdy ktoś wyszukuje w Google określone słowo kluczowe, w jaki sposób Google określi, która witryna musi być wyświetlana na górze, a która na dole. Cóż, bez wątpienia najpierw bierze pod uwagę treść. Treść zawsze będzie dominować w rankingach, ale oprócz treści Google mierzy również wiele innych elementów strony internetowej, takich jak słowa kluczowe, użycie tych słów kluczowych na Twojej stronie, linki zwrotne i wiele innych. Jednym z nich jest również wydajność strony. Google mierzy wydajność strony za pomocą podstawowych wskaźników internetowych.

W tym artykule omówimy Core Web Vitals i to, jak możesz je zoptymalizować, aby uzyskać wyższą pozycję w wynikach wyszukiwania i pozyskać większy ruch.

Co to są podstawowe wskaźniki internetowe

Największa zawartość, opóźnienie pierwszego wejścia i skumulowana zmiana układu to trzy kluczowe wskaźniki wydajności, które składają się na Core Web Vital i mierzą, jak szybko i wydajnie ładuje się strona dla użytkowników, a także jak interaktywne i stabilne są elementy witryny pozostają przez cały proces ładowania.

Rozbijmy to dalej dla lepszego zrozumienia.

1. LCP (Największa farba zawierająca treści)

LCP ocenia, jak szybko może załadować się i pojawić największy element strony w części widocznej na ekranie (zdjęcia, wideo, animacje, tekst itp.).

Dobry LCP to 2,5 sekundy, podczas gdy wszystko pomiędzy 2,5 a 4 sekundami wymaga poprawy i powyżej 4 sekund jest uważane przez Google za słabe.

NAJWIĘKSZE ZAWARTOŚCIOWE STATYSTYKI FARB

  1. Największa zawartość zawierająca treść odpowiada za 25% Twojego wyniku wydajności Google Lighthouse.
  2. 43% adresów URL na urządzenia mobilne i 44% adresów URL na komputery stacjonarne przechodzi test porównawczy największego malowania treści w czasie 2,5 sekundy.
  3. Według badań przeciętna witryna B2B ma wynik 7,05 punktów za największą zawartość mobilną, czyli znacznie powyżej 2,5 punktów potrzebnych do uzyskania pozytywnej oceny.
  4. Według badań przeciętna witryna detaliczna ma wynik 9,17 punktów za największą treść na urządzeniach mobilnych, czyli znacznie powyżej 2,5 punktów potrzebnych do uzyskania pozytywnej oceny.

2. FID (opóźnienie pierwszego wejścia)

FID strony to czas potrzebny przeglądarce na rozpoczęcie przetwarzania procedur obsługi zdarzeń w odpowiedzi na pierwszą interakcję użytkownika ze stroną, taką jak kliknięcie, stuknięcie.

Dobry FID jest poniżej 100ms, podczas gdy wszystko pomiędzy 100-300ms wymaga poprawy, a powyżej 300ms jest uważane za słabe.

STATYSTYKA PIERWSZEGO OPÓŹNIENIA WEJŚCIA

  1. Pierwsze opóźnienie wejścia odpowiada za 25% Twojej oceny wydajności Google Lighthouse.
  2. 89% adresów URL na urządzenia mobilne i 99% adresów URL na komputery stacjonarne spełnia kryterium 100-milisekundowego opóźnienia przy pierwszym wejściu.

3. CLS (skumulowana zmiana układu)

CLS jest użytecznym miernikiem zorientowanym na użytkownika do pomiaru stabilności wizualnej, ponieważ pomaga ilościowo określić częstotliwość, z jaką użytkownicy napotykają nieoczekiwane zmiany układu. Jest to istotny aspekt pomiaru stabilności wizualnej.

Dobry CLS jest poniżej 0,1, podczas gdy wszystko pomiędzy 0,1 a 0,25 wymaga poprawy, a powyżej 0,25 jest uważane za słabe

 

SKUMULACYJNE STATYSTYKI PRZESUNIĘĆ UKŁADU

  1. Skumulowana zmiana układu odpowiada za 5% Twojego wyniku wydajności Google Lighthouse.
  2. 46% adresów URL dla urządzeń mobilnych i 47% adresów URL dla komputerów stacjonarnych przechodzi test porównawczy Cumulative Layout Shift na poziomie 0,1.

Teraz, dlaczego Core Web Vitals jest ważny

Narzędzie takie jak Core Web Vitals pomaga poprawić pozycję Twojej witryny w wynikach wyszukiwania. Są one kluczowe, ponieważ informują Google, jak dobrze działa witryna i gdzie można ją ulepszyć.

Core Web Vitals niezaprzeczalnie podnoszą znaczenie UX jako elementu rankingu.

Dlatego optymalizacja pod kątem podstawowych wskaźników internetowych może mieć ogromne znaczenie, jeśli konkurujesz w dziedzinie, w której jakość treści jest prawie porównywalna, co oznacza, że ​​jeśli Google musi pokazać dwie strony o tej samej jakości treści, woli tę, która ma dobry wynik Core Web Vitals. Pamiętaj, że nic nie zastąpi wysokiej jakości treści na Twojej stronie.

Co John Mueller z Google ma do powiedzenia na temat Core Web Vitals

Inną rzeczą, o której należy pamiętać w przypadku Core Web Vitals, jest to, że jest to coś więcej niż przypadkowy czynnik rankingowy. Wpływa to również na użyteczność Twojej witryny po jej uszeregowaniu (kiedy odwiedzają ją ludzie). Jeśli uzyskasz większy ruch (z innych działań SEO), a współczynnik konwersji jest niski, ruch ten nie będzie tak cenny, jak w przypadku wyższego współczynnika konwersji (zakładając, że UX/szybkość wpływa na współczynnik konwersji, co zwykle ma miejsce).

Posiadanie solidnych wskaźników Core Web Vitals to znacznie więcej niż optymalizacja wyszukiwarek, mówiąc prościej. Każdy właściciel witryny powinien dołożyć wszelkich starań, aby poprawić ogólne wrażenia odwiedzających.

Nawet jeśli zawartość Twojej strony jest doskonała, nadal musisz upewnić się, że każdy aspekt Twojej witryny jest zoptymalizowany, aby uzyskać wysoką pozycję w wyszukiwarce, tak aby Twoja witryna była widoczna dla docelowych odbiorców. Core Web Vitals podkreśla również znaczenie doświadczenia użytkownika.

Jak mierzyć podstawowe wskaźniki internetowe

Możesz sprawdzić podstawowe wskaźniki internetowe swojej witryny za pomocą kilku testów, raportów i rozszerzeń.

Najważniejsze z nich to:

  • Ocena podstawowych wskaźników internetowych PageSpeed ​​Insights;
  • Raport Core Web Vitals w Google Search Console;
  • Rozszerzenie Core Web Vitals do przeglądarki Chrome.

1. Ocena podstawowych wskaźników internetowych w PageSpeed ​​Insights

Google PageSpeed ​​Insights (PSI) jest podzielony na dwie sekcje:

  • Określ, czego doświadczają Twoi rzeczywiści użytkownicy (ocena Core Web Vitals)
  • Zidentyfikuj problemy z wydajnością (dane laboratoryjne, wynik PSI).

Skoncentruj się na pierwszej części, aby poprawić swój wynik Core Web Vitals. Raport Field Data zawiera tę analizę. Dane do tego badania pochodzą z raportu Chrome User Experience Report (CrUX). Te dane są oparte na rzeczywistych interakcjach użytkowników z Twoją witryną. Google weźmie pod uwagę te wyniki pól podczas ustalania pozycji w wyszukiwarkach.

Sekcja „Diagnostyka” PSI jest również dobrym źródłem informacji o czynnikach, które mogą zmienić dowolne z trzech wskaźników:

PSI bierze pod uwagę wskaźniki rzeczywistych użytkowników i dane laboratoryjne podczas określania ogólnego wyniku optymalizacji i oferowania zaleceń dotyczących optymalizacji.

Chociaż informacje te są pomocne, są gromadzone w kontrolowanym środowisku przy użyciu określonych urządzeń i sieci w laboratorium. Jednak niektórzy goście Twojej witryny mogą korzystać z przestarzałej technologii lub słabych połączeń. Dlatego porównywanie wyników laboratoryjnych z rzeczywistą wydajnością witryny nie jest dobrym pomysłem.

PSI nie zawsze zapewnia podsumowanie pola.

Kiedy CrUX nie zebrał wystarczającej ilości danych z terenu, jak to często bywa w przypadku mniejszych stron internetowych, pojawiają się takie problemy. Na szczęście istnieją dodatkowe źródła, z których możemy zbierać dane terenowe.

2. Raport Core Vitals Web w Google Search Console

Do Google Search Console (GSC) dodano dwa nowe raporty Core Web Vitals, jeden dla urządzeń mobilnych i jeden dla komputerów.

Każdy raport zawiera informacje dotyczące danych pola i wydajności grup adresów URL.

Raporty te doskonale nadają się do wykrywania typowych problemów z wieloma adresami URL. Dzięki temu otrzymasz informacje o całej witrynie, a nie tylko o jednej stronie.

Na przykład, jeśli masz dużą liczbę identycznych stron, w których największym elementem jest obraz, wskaźnik LCP będzie taki sam dla każdej z nich. W tej sytuacji GSC wykrywa problemy z LCP na każdej stronie.

Krótko mówiąc, te nowe raporty GSC to najbardziej niezwykłe podejście do śledzenia wydajności podstawowych wskaźników internetowych w całej witrynie.

3. Wykorzystanie raportu Chrome User Experience Report (CrUX) do uzyskania danych terenowych

Dostęp do zbioru danych CrUX można uzyskać na dwa sposoby

  • Chrome UX Report API — aby uzyskać dostęp do tego programisty, musisz znać JavaScript i JSON.
  • BigQuery — wymaga projektu Google Cloud i umiejętności SQL.

Będziesz musiał włożyć więcej pracy niż tylko przekazanie strony przez PSI lub GSC. Oferują jednak więcej opcji porządkowania i wizualizacji danych. Na przykład BigQuery ma funkcje dzielenia danych i łączenia z innymi zbiorami danych.

Wypróbuj obie strategie, jeśli masz zasoby i wiedzę techniczną, aby je wdrożyć.

Niektóre istotne statystyki dotyczące podstawowych wskaźników internetowych

  1. 56% ze 100 najpopularniejszych domen na komputery stacjonarne przechodzi Core Web Vitals
  2. Efekt ciężkiej marki – główne marki zajmują wysokie pozycje nawet przy słabych wynikach.
  3. W lutym 2022 r. 61% ze 100 najlepszych urządzeń mobilnych zdało Core Web Vitals
  4. W lutym 2022 r. średni czas ładowania 100 najpopularniejszych domen w USA wynosił 2,38 sekundy na komputerach stacjonarnych i 2,32 sekundy na urządzeniach mobilnych – poniżej rozsądnego progu Google wynoszącego 2,5 sekundy.
  5. W lutym 2022 r. średni wynik CLS dla komputerów stacjonarnych i urządzeń mobilnych wynosił odpowiednio 0,11 i 0,08 – po raz pierwszy średni wynik CLS dla 100 najlepszych witryn na urządzeniach mobilnych spadł poniżej odpowiedniego progu Google wynoszącego 0,1
  6. W styczniu 2020 r. tylko 22% domen na komputery i 27% ze 100 najpopularniejszych domen na urządzenia mobilne przeszło odpowiednio Core Web Vitals. Szybko do lutego 2022 r., a odsetek ten wzrósł ponad dwukrotnie do 56% na komputerach stacjonarnych i 62% na urządzeniach mobilnych. Pokazuje to, że domeny o najwyższej skuteczności znacznie poprawiły wydajność sieci.
  7. Witryny Top 100, B2B, Healthcare i Dict/Reference mają średni LCP wynoszący 2,5 sekundy lub mniej na obu urządzeniach.
  8. Średnio mobilny LCP dla podróży jest 1,6 razy gorszy niż dla witryn Dictionary/Reference.
  9. Średnio desktopowy LCP dla Travel jest 1,5 raza gorszy niż dla domen B2B.
  10. Adresy URL na pozycji 1 mają o 10% większe prawdopodobieństwo przejścia oceny Core Web Vitals niż adresy URL na pozycji 9.
  11. Z pozycji 1 na pozycję 5 następuje 2% spadek współczynnika zdawalności oceny Core Web Vitals dla każdego stanowiska.

Jak zoptymalizować podstawowe wskaźniki internetowe

Teraz, gdy mamy dobrą wiedzę na temat podstawowych wskaźników internetowych i sposobu ich działania, możemy skierować naszą uwagę na kilka zalecanych kroków w celu ulepszenia podstawowych wskaźników internetowych. Pamiętaj, że wyniki testu będą dyktować kroki, które musisz podjąć, aby podnieść swoje wyniki. Dlatego konieczne jest rozważenie rad i sugestii zawartych w PageSpeed ​​Insights (lub innych narzędziach testowych, z których korzystasz).

Poniżej przedstawiono sprawdzone podstawowe strategie podnoszenia wyników Core Web Vitals.

1. Korzystaj z sieci dostarczania treści

Korzystanie z CDN znacznie poprawia wydajność witryny. Witryny korzystające z CDN ładują się stosunkowo szybko. Dlaczego? Ponieważ CDN sprawia, że ​​transfer danych między serwerem a użytkownikiem końcowym jest szybki.

CDN to rozległa sieć połączonych ze sobą serwerów. Możesz przechowywać zawartość swojej witryny na wielu serwerach korzystających z CDN. Gdy użytkownik uzyskuje dostęp do Twojej witryny, serwer znajdujący się najbliżej geograficznie udostępnia mu witrynę, skracając czas przesyłania danych.

Korzystając z CDN, możesz skrócić czas ładowania LCP użytkowników. Dzięki jego zastosowaniu można również skrócić czas do pierwszego bajtu (TTFB).

2. Optymalizuj obrazy

Innym sposobem na zwiększenie LCP jest optymalizacja obrazu. Obrazy są duże, jeśli mają wysoką rozdzielczość, a ładowanie zajmuje rozsądną ilość czasu, co niekorzystnie wpływa na wynik LCP.

Korzystanie ze skompresowanych obrazów przyspiesza ładowanie. Wiele witryn, takich jak TinyJPG, może bezpłatnie zmniejszyć rozmiar obrazu bez obniżania jego jakości. Obrazy można dalej optymalizować, upewniając się, że mają prawidłowy rozmiar i wymiary.

Dlatego mądrze jest upewnić się, że nie używasz zbędnych wymiarów obrazu w niektórych obszarach witryny. Włączenie odpowiednich atrybutów może pomóc przeglądarce w zapewnieniu idealnej ilości miejsca na części strony, zmniejszając potrzebę ciągłych zmian układu.

Wprowadzając zmiany w kodzie źródłowym, możesz zmienić właściwości szerokości i wysokości plików multimedialnych.

3. Zaimplementuj leniwe ładowanie

Zarówno Twój LCP, jak i czas wczytywania strony mogą zyskać na leniwym ładowaniu. Smush to tylko jeden przykład kilku wtyczek WordPress oferujących leniwe ładowanie.

Leniwe ładowanie, znane również jako ładowanie na żądanie, to metoda poprawy wydajności treści internetowych.

Leniwe ładowanie pomaga załadować tylko niezbędny element i opóźnia ładowanie reszty, dopóki nie będzie ona potrzebna użytkownikowi, w przeciwieństwie do ładowania masowego, które ładuje całą stronę internetową naraz i renderuje ją za jednym razem.

4. Zoptymalizuj czcionki swojej witryny

Czcionki, których używasz w swojej witrynie, mogą wpływać na czas jej ładowania w taki sam sposób, jak obrazy. Dzieje się tak, ponieważ każda kombinacja grubości czcionek wymaga od przeglądarki załadowania całej rodziny czcionek.

Optymalizacja czcionek internetowych to prosty sposób na zwiększenie szybkości witryny. Dzieje się tak, ponieważ zoptymalizowane czcionki internetowe zajmują mniej miejsca na komputerze użytkownika i ładują się znacznie szybciej.

Z drugiej strony, jeśli odpowiednia czcionka internetowa nie została jeszcze załadowana, przeglądarka może nie renderować automatycznie komponentów tekstowych. Jednak przejście na alternatywne czcionki może spowodować niepożądane zmiany układu, obniżając wynik CLS.

Zachowaj ostrożność przy wyborze czcionki dla swojej witryny. Jeśli używasz więcej niż dwóch czcionek, najlepiej jest używać czcionek globalnych, aby selektywnie stosować niezbędne typy i grubości, zamiast stosować każdą z nich do każdego elementu. Korzystając z tej metody, możesz ograniczyć pobieranie czcionek do tych, które są ściśle niezbędne dla zawartości.

5. Zaktualizuj swój hosting WordPress

Jeśli czas ładowania strony jest zbyt długi, może to być wskazówką do zmiany planu hostingowego. Zmiana hostingu ze współdzielonego na dedykowany może znacznie zwiększyć FCP.

Zamiast wybierać najtańszą, mądrą decyzją jest wybór najlepszej witryny hostingowej, która zapewnia wszystkie potrzebne funkcje. Jakość usług świadczonych przez Twojego hosta WordPress ma kluczowe znaczenie dla sukcesu Twojej witryny. Ma to daleko idące konsekwencje, od czasu ładowania strony po bezpieczeństwo. Zwłaszcza jeśli masz dużą lub wyrafinowaną witrynę internetową, nie jest to miejsce na pójście na łatwiznę. Zamiast tego aktualizacja dostawcy hostingu lub planu jest jedną z najszybszych, ale najpotężniejszych strategii optymalizacji witryny i skrócenia czasu ładowania.

Przeczytaj o hostingu: Recenzja Bluehost

6. Wyeliminuj zasoby blokujące renderowanie

Strony internetowe nie mogą być renderowane bez towarzyszących im plików HTML, CSS i JavaScript. Wszystkie te pliki zawierają skrypty, które mogą uniemożliwić ludziom dostęp do rzeczy, które próbują zobaczyć.

Możesz jednak zapobiec negatywnemu wpływowi tych skryptów na Twój interfejs użytkownika (i z kolei pomóc zwiększyć podstawowe wskaźniki internetowe), usuwając zasoby blokujące renderowanie i wszelkie niepotrzebne CSS lub skrypty.

Istnieje wiele metod, aby to osiągnąć. Pierwszym z nich jest usunięcie wszelkich dodatkowych spacji lub komentarzy z kodu JavaScript i CSS. Ponadto możesz zmniejszyć rozmiar kodu JavaScript i CSS, łącząc pliki.

7. Odrocz ładowanie JavaScript

Jest to kolejny sposób na wyeliminowanie elementów blokujących renderowanie, co znacznie poprawia FID.

Dzięki temu strony internetowe ładują się szybko, blokując ładowanie plików JavaScript.

Ładuje inną zawartość twoich stron, zamiast czekać na załadowanie plików JS. Oprócz tego możesz skonfigurować swoją witrynę tak, aby szybko wczytywała krytyczne skrypty CSS pojawiające się w części strony widocznej na ekranie. Możesz to osiągnąć, wyodrębniając materiał z podstawowego pliku CSS i umieszczając go w kodzie swojej witryny.

8. Zaimplementuj buforowanie treści.

Inteligentne buforowanie zawartości jest jednym z najpotężniejszych narzędzi, jakie masz do dyspozycji, jeśli chodzi o poprawę doświadczenia użytkownika. Centralna technika dostarczania treści protokołu HTTP wykorzystuje buforowanie lub tymczasowe przechowywanie treści z wcześniejszych żądań. Jeśli pozwalają na to zasady buforowania zawartości, komponenty w dowolnym punkcie łańcucha dostaw mogą przechowywać jej kopie, aby przyspieszyć kolejne żądania.

Buforowanie bardzo pomaga w poprawie podstawowych wyników Web Vital.

9. Wstępnie załaduj obrazy bohaterów

Obrazy bohatera są zwykle najważniejszym elementem, który pojawia się nad zawartością części strony. Tak więc, jeśli ładują się szybciej, ogólny interfejs użytkownika jest znacznie lepszy. LCP można drastycznie zmniejszyć, używając atrybutu łącza „rel=preload” , co jest szczególnie przydatne w przypadku obrazów bohaterów ładowanych za pomocą CSS lub JavaScript.

10. Powstrzymaj się od przedkładania reklam lub wyskakujących okienek nad inne treści.

Niski wynik CLS jest wynikiem przesunięcia treści na stronie spowodowanego dodaniem treści na górze.

Zarezerwuj miejsce na reklamy, ramki iframe i inne formy zawartości dynamicznej.

Nieprzydzielanie im określonej przestrzeni to pewny sposób na zakłócenie układu, podobnie jak w przypadku obrazów i filmów. Aby uniknąć przepełnienia zawartości kontenera, użyj właściwości overflow: hidden i wybierz kontener o odpowiedniej wielkości.

11. Rozdziel długie zadania

To musi być twój najwyższy priorytet. Gdy długie zadania opóźniają Główny Wątek, nie może on szybko reagować na prośby użytkownika. Wydajność witryny można znacznie poprawić, dzieląc je. Zmniejsza to FID i poprawia UX

12. Zatrzymaj lub odłóż na później uruchamianie niepotrzebnych skryptów innych firm

Twoje własne skrypty witryny mogą nie działać na czas, jeśli są w konflikcie ze skryptami strony trzeciej. Zastanów się, które skrypty są najbardziej przydatne dla użytkownika końcowego i nadaj im wyższy priorytet. Skrypty reklam i wyskakujących okienek nie powinny znajdować się na górze listy.

Jak radzi sobie 10 najlepszych domen w USA pod względem podstawowych wskaźników internetowych na podstawie widoczności SEO Searchmetrics.

Wszystkie metryki oraz to, czy domena spełnia podstawowe wskaźniki internetowe, są raportowane co miesiąc na poziomie domeny. W lutym 2022 r. 75% wszystkich wczytywania stron Wikipedii na komputery trwało mniej niż 1,1 sekundy, a domena uzyskała 0 punktów zarówno w FID (podany w milisekundach), jak i CLS, przechodząc Core Web Vitals.

Ranga Domena LCP (y) FID (ms) CLS Zdałeś CWV?
1 wikipedia.org 1.1 0 0 Tak
2 youtube.com 6.2 0 0,15 NIE
3 facebook.com 3.7 0 0,05 NIE
4 amazon.com 2.0 25 0,2 NIE
5 google.com 1.1 0 0 Tak
6 imdb.com 2.3 0 0,15 NIE
7 instagram.com 3.2 0 0,1 NIE
8 merriam-webster.com 2.2 25 0 Tak
9 twitter.com 3.4 0 0,05 NIE
10 britannica.com 2.2 25 0 Tak

10 najlepszych CWV dla urządzeń mobilnych na podstawie wskaźnika Searchmetrics SEO Visibility .

Tam, gdzie było to możliwe, użyto mobilnej wersji domeny. Zależy to jednak głównie od gromadzenia danych przez CrUX. Większy odsetek witryn mobilnych przechodzi Core Web Vitals niż komputery.

Ranga Domena LCP (y) FID (ms) CLS Zdałeś CWV?
1 wikipedia.org 1.3 0 0 Tak
2 m.youtube.com 2.3 0 0,1 Tak
3 m.facebook.com 2.9 0 0 NIE
4 amazon.com 1.9 0 0,1 Tak
5 instagram.com 4.4 0 0,25 NIE
6 imdb.com 2.3 0 0 Tak
7 google.com 1.2 0 0 Tak
8 merriam-webster.com 1.6 50 0 Tak
9 britannica.com 1.7 25 0 Tak
10 linkedin.com 1.4 0 0 Tak

Wniosek

Core Web Vitals to rewolucja w ulepszaniu korzystania z Internetu dla wszystkich. Pomiary te będą nadal uwzględniane w systemie rankingowym Google.

Dlatego ważne jest, aby mieć je na oku, nawet jeśli nie widzisz nic złego.

Aby witryna działała pomyślnie, ciągłe ulepszanie doświadczenia użytkownika ma kluczowe znaczenie. Dzięki dostępności wielu pomocnych narzędzi i wtyczek proces ten może być znacznie prostszy i łatwiejszy niż byłby w innym przypadku. Lub jeśli wydaje ci się to zniechęcające, możesz zatrudnić programistę, który zrobi to za ciebie.