Core Web Vitals – przygotuj się na zmiany

Nie od dziś wiadomo, że algorytmy Google skupiają się nie tylko na tym, co czytają na naszych stronach i szybkości ładowania, ale również na zachowaniach i doświadczeniach użytkowników (UX). Dzieje się tak dlatego, że wyszukiwarka Google stara się dostarczać coraz lepszej jakości wyniki wyszukiwania na sprecyzowane zapytania użytkowników.

W maju 2020 roku oficjalnie ogłoszono nadchodzące zmiany w rankingu wyszukiwania, które będą dotyczyły jakości strony – Core Web Vitals.

“Today, we’re building on this work and providing an early look at an upcoming Search ranking change that incorporates these page experience metrics. We will introduce a new signal that combines Core Web Vitals with our existing signals for page experience to provide a holistic picture of the quality of a user’s experience on a web page.” (Maj 2020)

(źródło: https://developers.google.com/search/blog/2020/05/evaluating-page-experience )

 

Czym są Core Web Vitals?

Core Web Vitals to zestaw trzech wskaźników, które mają wpływ na rzeczywiste doświadczenia użytkowników na stronie. Określają one kluczowe aspekty takie jak: czas wczytania, interaktywność i stabilność ładowanej treści. Jak oficjalnie ogłoszono, od maja 2021 zostaną one dodane do czynników rankingowych algorytmu Google. 

źródło: https://developers.google.com/search/blog/2020/11/timing-for-page-experience 

Largest Contentful Paint (LCP)

Pierwszą z interesujących nas metryką jest wskaźnik LCP, który mierzy wydajność ładowania strony. Jest to czas potrzebny na wyrenderowanie największego elementu treści lub obrazu wyświetlanego w widocznym obszarze, od momentu, gdy użytkownik zażąda adresu URL. Aby zapewnić dobre wrażenia użytkownikom, LCP nie powinien przekroczyć 2,5 sekundy.

źródło: https://web.dev/lcp/ 

 

Elementy wpływające na LCP:

• elementy <img>,
• elementy <image> wewnątrz elementu <svg>,
• elementy <video> (używany jest obrazek filmu),
• elementy z tłem ładowanym za pomocą funkcji url(),
• elementy blokowe lub liniowe zawierające fragmenty tekstu.

Rozmiar elementu jest zazwyczaj rozmiarem wyświetlanym użytkownikowi w widocznym obszarze. Jeśli element wykracza poza widoczny obszar lub któraś z części jest przycięta, to fragmenty te nie są wliczane do rozmiaru elementu.

W przypadku obrazów, których rozmiar został zmieniony względem oryginału, zwracana jest mniejsza wartość – oryginalny rozmiar obrazu lub rozmiar po zmianie.  Jeśli obrazy zostały zmniejszone względem oryginału, zwracana będzie wartość po zmniejszeniu. Natomiast w przypadku obrazów, które zostały powiększone względem oryginału, zwracany będzie ich oryginalny rozmiar. 

Dla wszystkich elementów marginesy (margin), wypełnienia (padding) lub obramowania (border) zastosowane przez CSS nie są brane pod uwagę.

Przykłady:

źródło: https://web.dev/lcp/

Na LCP mają wpływ przede wszystkim cztery czynniki:

• długie czasy odpowiedzi serwera,
• blokowanie renderowania JavaScript i CSS,
• czas ładowania zasobów,
• renderowanie po stronie klienta.

Jeśli chcesz poprawić wynik LCP:

• zastosuj natychmiastowe ładowanie za pomocą wzorca PRPL (Preload > Render > Pre-cache > Lazy load),
• zoptymalizuj krytyczną ścieżkę renderingu (nadawanie priorytetu wyświetlaniu treści, które odnoszą się do bieżącej akcji użytkownika),
• zoptymalizuj CSS (np. optymalizacja obrazów tła CSS za pomocą zapytań, minifikacja CSS),
• optymalizacja obrazów (np. poprawa formatów obrazów na właściwe, kompresja zdjęć, użycie formatu WebP),
• zoptymalizuj czcionki internetowe (np. unikanie niewidocznego tekstu podczas ładowania czcionek),
• zoptymalizuj JavaScript (dla stron renderowanych przez klienta).

Więcej informacji o ulepszeniu LCP możesz znaleźć na: https://web.dev/optimize-lcp/ 

First Input Delay (FID)

FID to wskaźnik , który mierzy opóźnienie w interakcji ze stroną, a dokładniej czas od momentu, gdy użytkownik po raz pierwszy wejdzie w interakcję z Twoją stroną (kliknie link, naciśnie przycisk itd.) do momentu, gdy przeglądarka na nią zareaguje. Pomiar ten jest brany z dowolnego interaktywnego elementu, który użytkownik kliknął jako pierwszy. Jest to szczególnie istotne na stronach, na których użytkownik musi coś zrobić, ponieważ właśnie wtedy strona staje się interaktywna. Aby zapewnić dobre doświadczenia użytkownikowi, czas FID powinien nie przekraczać 100 milisekund.

źródło: https://web.dev/fid/ 

FID skupia się tylko na zdarzeniach wejściowych z dyskretnych akcji, takich jak kliknięcia, stuknięcia i naciśnięcia klawiszy.

Interakcje takie jak przewijanie i powiększanie, są akcjami ciągłymi i mają zupełnie inne ograniczenia wydajności (ponadto przeglądarki często są w stanie ukryć ich opóźnienie poprzez uruchomienie ich w osobnym wątku).

Nie wszyscy użytkownicy będą wchodzić w interakcję z Twoją witryną przy każdej wizycie. Oznacza to, że niektórzy użytkownicy nie będą mieli żadnych wartości FID, niektórzy użytkownicy będą mieli niskie wartości FID, a niektórzy użytkownicy prawdopodobnie będą mieli wysokie wartości FID.

Jeśli chcesz poprawić wynik FID:

• zmniejsz wpływ kodu hostowanych w innych domenach,
• zminimalizuj pracę głównego wątku,
• zmniejsz czas wykonywania JavaScript,
• utrzymuj liczbę żądań na niskim poziomie, a rozmiar transferu na małym.

Więcej informacji o ulepszeniu FID możesz znaleźć na: https://web.dev/optimize-fid/ 

Cumulative Layout Shift (CLS)

Kolejna metryka mierzy stabilność wizualną. Jest to wielkość przesunięcia układu strony podczas fazy ładowania. Wynik jest oceniany w skali 0-1, gdzie zero oznacza brak przesunięcia, a 1 oznacza największe przesunięcie. Jest to istotne, ponieważ przesuwanie się elementów na stronie podczas gdy użytkownik próbuje wejść w interakcję z nią, negatywnie wpływa na jego doświadczenia. Aby zapewnić dobre wrażenia użytkownikom, strony powinny utrzymać CLS na poziomie nie większym niż 0.1.

źródło: https://web.dev/cls/ 

Winowajcą nieoczekiwanych przesunięć zawartości może być obraz lub wideo o nieznanych wymiarach, czcionka, która renderuje się większa lub mniejsza niż jej wartość domyślna, albo reklama lub widżet innej firmy, które dynamicznie zmieniają swoje rozmiary.

źródło: https://web.dev/cls/ 

Zmiana układu jest zła wtedy, gdy użytkownik się jej nie spodziewa. Przesunięcia układu, które następują w odpowiedzi na interakcje użytkownika (kliknięcie linku, naciśnięcie przycisku) są dobre, o ile przesunięcie następuje na tyle blisko interakcji, że jest to zrozumiałe dla użytkownika.

źródło: https://web.dev/cls/ 

Aby uniknąć nieoczekiwanych przesunięć układu należy:

• dołączać rozmiary obrazów i wideo rezerwując wymaganą przestrzeń (np. przy pomocy Aspect Ratio Boxes w plikach CSS),
• unikać wstawiania treści nad istniejącą treścią.

Więcej informacji o ulepszeniu CLS możesz znaleźć na https://web.dev/optimize-cls/ 

Innymi znanymi dotychczas czynnikami rankingowymi w Google są:

Dostosowanie do urządzeń mobilnych (mobile-friendly)

Nie trudno się domyśleć, że użytkowników korzystających z urządzeń mobilnych wciąż przybywa. Od 2015 roku możemy obserwować większą liczbę użytkowników na urządzeniach mobilnych w Polsce, a od 2016 roku na całym świecie. 

źródło: https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/poland#yearly-2011-2021 

Aktualne statystyki na całym świecie

źródło: https://gs.statcounter.com/ 

Poniżej prezentujemy dane o urządzeniach użytkowników z Google Search Console jednego z naszych klientów z ostatnich 3 miesięcy. Z łatwością można zauważyć, że liczba użytkowników na urządzeniach mobilnych jest prawie dwukrotnie większa niż na pozostałych wersjach strony.

Google doskonale wiedziało o ciągłym wzroście użytkowników na urządzeniach mobilnych, dlatego od wielu lat pracowało nad polepszeniem ich indeksacji. W listopadzie 2016 roku po raz pierwszy ogłoszono testowanie indeksacji stron mobilnych. W 2018 roku około 50% stron indeksowanych było w wersji mobilnej.

Z roku na rok coraz więcej stron indeksowanych było przez Googleboty na smartfony. W marcu 2020 roku około 70% stron było indeksowanych jako pierwsze w wersji mobilnej i w tym czasie oficjalnie ogłoszono, że od września 2020 roku mobile-first index będzie stosowane w 100% witryn.

Jeśli chcesz poprawić widoczność swojej strony w rankingach Google upewnij się, że wszystkie istotne elementy widoczne w wersji na komputery również wyświetlane są na urządzeniach mobilnych. W przeciwnym razie Googleboty mogą nie widzieć kluczowych elementów na Twojej stronie. Najczęstszymi elementami, których brakuje w wersji mobilnej, są: treści, nagłówki, obrazy, nawigacja okruszkowa (breadcrumbs), a nawet menu nawigacyjne.

źródło: https://developers.google.com/search/mobile-sites

Podstawowy test optymalizacji mobilnej możemy sprawdzić przy pomocy darmowego narzędzia od Google:

źródło: https://search.google.com/test/mobile-friendly 

Bezpieczne przeglądanie (Safe Browsing)

Bezpieczne przeglądanie – jak dowodzi Google – chroni około 2 miliardy urządzeń. Główne problemy bezpieczeństwa, które są wykrywane przez narzędzia Google dotyczą: złośliwego i niechcianego oprogramowania, stron phishing’owych, stron wprowadzających w błąd oraz plików szkodliwych z możliwością pobrania na urządzenie.

Napotkane przez Googleboty problemy związane z bezpieczeństwem dotyczące naszej witryny możemy sprawdzić w narzędziu Google Search Console.

Zabezpieczenia HTTPS

Bezpieczeństwo danych przesyłanych za pomocą HTTPS jest zapewnione dzięki protokołowi TLS, który jest rozwiniętą wersją protokołu SSL. Strony korzystające z SSL możemy łatwo rozpoznać po adresach URL, które rozpoczynają się od “https://…”, a nie “http://…”. Protokół SSL wzbogaca protokół TCP o funkcje zapewniające poufność, integralność danych oraz uwierzytelnienie serwera (np. Sempai.pl) i klienta (przeglądarka internetowa).

Natrętne reklamy pełnoekranowe (Intrusive interstitial guidelines)

Natrętne reklamy pełnoekranowe to takie, które zajmują znaczną część stron, stąd ich nazwa. Użytkownicy uważają je za irytujące, dlatego Google obniża w rankingu strony z reklamami niechętnie spotykanymi przez użytkowników.

 

Core Web Vitals – jak możemy je sprawdzić?

Wyniki Core Web Vitals warto monitorować. Sprawdzić można je na różne sposoby. Oto najważniejsze z narzędzi, które można w tym celu wykorzystać:

Podstawowe wskaźniki internetowe (Google Search Console)

Posiadając usługę w Google Search Console możemy sprawdzić raport podstawowych wskaźników internetowych przygotowany na podstawie rzeczywistych danych o korzystaniu. Raport ten zbiera anonimowo dane o czasach działania strony od użytkowników, którzy ją odwiedzają

Przechodząc do szczegółów problemów w raporcie, jesteśmy w stanie sprawdzić statystyki wskaźników oraz podobne adresy URL, które napotykały ten sam problem. Z tego też miejsca pojedyncze adresy URL możemy automatycznie otworzyć i sprawdzić przy pomocy PageSpeed Insights. Jest to narzędzie szczególnie pomocne developerom podczas poprawy wskaźników na stronie.

 

Nowa wersja Google Search Console – zobacz główne zmiany.

Chrome DevTools Performance panel

W panelu Performance narzędzia Chrome DevTools sekcja Experience pomocna jest szczególnie w wykryciu nieoczekiwanych przesunięć układu (CLS). Jest to niezbędne w znajdowaniu i naprawianiu problemów z niestabilnością wizualną strony, które przyczyniają się do skumulowanego przesunięcia układu. Panel Performance pozwala również na zmierzenie LCP i FCP, które znajdziemy w sekcji Web Vitals.

PageSpeed Insights

Narzędzie pozwalające sprawdzić statystyki pojedynczych adresów URL. Jest niezwykle przydatne w momencie, gdy chcemy poprawić prędkość ładowania strony. Dostarcza również informacji o Web Vitals dla pojedynczego adresu URL.

Link: https://developers.google.com/speed/pagespeed/insights/ 

Przechodząc do dalszych sekcji raportu, możemy sprawdzić sugestie zmian, które poprawią prędkość oraz doświadczenia użytkowników na danej podstronie.

Lighthouse

Darmowe narzędzie do poprawy jakości stron internetowych. Zawiera audyt wydajności, dostępności, SEO i wiele więcej.

Rozszerzenie Chrome Web Vitals

Rozszerzenie pozwalające na sprawdzenie wskaźników LCP, FID i CLS na stronie, z której aktualnie korzystamy w przeglądarce Chrome.

Link: https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma/

Rozszerzenie Chrome Core SERP Vitals

Rozszerzenie może być szczególnie przydatne, gdy chcemy w szybki sposób porównać wskaźniki Web Vitals z konkurencją w SERP. Pozwala na wybór wyświetlania danych: z wersji mobilnej lub desktopowej.

Link: https://chrome.google.com/webstore/detail/core-serp-vitals/oipmhlkineglclpndlecjmbleapbcilf 

Screaming Frog SEO Spider

Popularny w świecie SEO Crawler Screaming Frog w płatnej wersji pozwala na sprawdzenie LCP, CLS (Web Vitals) oraz TBT (Total Blocking Time) na podstawie API PageSpeed Insights. 

Ogromnym plusem tego narzędzia jest możliwość wykonania sprawdzenia poszczególnych czasów ładowania na wielu adresach URL należących do naszej strony. API PageSpeed Insights pozwala na ograniczoną liczbę zapytań, około 25 000 dziennie. Zgromadzone dane jesteśmy w stanie wyeksportować i zapisać do pliku np. CSV.

 

Podsumowanie

Śledząc ostatnie i nadchodzące update’y możemy obserwować, w jakim kierunku rozwija się algorytm Google. Coraz większy nacisk jest nakładany na doświadczenia użytkowników i dopasowanie wyników pod ich indywidualne potrzeby. Jest to zupełnie naturalne, ponieważ konkurencja na popularne zapytania rośnie, a Google stara się dostarczać wyniki najwyższej jakości.

Aby pozostać wysoko w rankingu lub wybić się w nim, nie można zapominać o technicznych aspektach SEO. Sama poprawa Core Web Vitals i prędkości witryny nie wystarczy. Powinniśmy skupiać się nie tylko na frazach kluczowych, ich pozycjach i doświadczeniu użytkowników, ale również na samej zawartości strony. Dopasowane zapytanie, dobre doświadczenie oraz łatwość odnalezienia szukanej informacji na stronie – to najważniejsze wartości, jakie możemy przekazywać naszym klientom za sprawą SEO.