Spis treści
- Core Web Vitals – Co to takiego?
- Jak zmierzyć Core Web Vitals swojej witryny?
- Co oznaczają poszczególne elementy Core Web Vitals?
- Waga poszczególnych elementów Core Web Vitals i ich wpływ na wynik
- Jak i dlaczego warto zadbać o Core Web Vitals swojego serwisu?
- Jak możemy Ci pomóc?
- Źródła wiedzy
Core Web Vitals – Co to takiego?
W jednym z poprzednich artykułów pisaliśmy o TTFB (Time To first Byte). Jest to jeden z elementów dużo większej układanki nazwanej Core Web Vitals. Jest to zbiór współczynników odnoszących się do szybkości i wydajności działania stron internetowych.
Google już od dawna informowało, że współczynniki Core Web Vitals będą miały coraz większy wpływ jako czynniki rankingowe wyszukiwarki – i tak też się stosunkowo niedawno stało. Pierwsza aktualizacja algorytmu Google pod tym kątem miała miejsce w drugim kwartale 2021 roku i w jej konsekwencji wiele stron odnotowało znaczne spadki. Witryny, które nie zdążyły przygotować się do aktualizacji algorytmu dostały zatem jasny sygnał, że jest to najwyższy czas na poważne przyjrzenie się temu zagadnieniu.
Jak zmierzyć Core Web Vitals swojej witryny?
Mając świadomość wagi problemu, samo nasuwa się pytanie – w jaki sposób przeanalizować swój serwis pod tym kątem? Google już bardzo dawno wyszło naprzeciw temu problemowi i stworzyło narzędzie o nazwie PageSpeed Insights. Jest to rozbudowane narzędzie pozwalające zarówno stworzyć ogląd osobie nie będącej zaznajomionej z zagadnieniami technicznymi, jak i dać jasne wskazówki developerom. Narzędzie znajduje się pod adresem: https://developers.google.com/speed/pagespeed/insights/. Jego obsługa jest bardzo intuicyjna i prosta – wystarczy wprowadzić adres na którym mają zostać przeprowadzone testy i kliknąć „Analizuj”
Co oznaczają poszczególne elementy Core Web Vitals?
Samo przeprowadzenie testu mamy za sobą – jak zatem zrozumieć wyniki zaprezentowane przez narzędzie? Raport podzielony jest na poszczególne czynniki:
First Contentful Paint (FCP)
Mierzony jest czas do wyrenderowania przez przeglądarkę pierwszego elementu DOM (bloku tekstu lub obrazu) po uruchomieniu jej przez użytkownika.
Largest Contentful Paint (LCP)
Odnosi się do wydajności ładowania strony w kontekście największego jej elementu (grafika, tekst, video) znajdującego się w obszarze widocznym podczas ładowania. Powinien on załadować się krócej niż w 2,5 sekundy.
First Input Delay (FID)
Jest to okres czasu pomiędzy rozpoczęciem ładowania witryny, a zdolnością reakcji przeglądarki na interakcję podjętą przez użytkownika (np. Kliknięcie przycisku). Powinien on być krótszy niż 100ms.
Cumulative Layout Shift (CLS)
Wskaźnik czysto wizualny, a więc mający wpływ również na UX witryny. Jest to wartość numeryczna nie posiadająca własnej jednostki miary, wyrażana w skali 0-1. Mierzone jest przesunięcie treści strony podczas jej ładownia mogące mieć miejsce w wyniku np. doładowywania elementów lub modyfikacje treści wykonywane za pomocą skryptów. Wartość nie powinna przekraczać 0.1.
Time to interactive
Okres czasu, jaki jest potrzebny od rozpoczęcia ładowania strony do momentu, w którym stanie się ona w pełni interaktywna. Uznaje się ją za taką kiedy:
- Strona wyświetla użyteczną treść
- Obsługa zdarzeń (takich jak np. kliknięcie czy najechanie myszą) jest aktywna dla widocznych elementów strony
- Strona jest responsywna (odpowiada na akcję podjętą przez użytkownika) poniżej 50ms
Speed index
Prędkość postępu procesu ładowania strony (wizualna). Narzędzie wykonuje zapis wizualny postępu ładowania, po czym porównuje postęp pomiędzy poszczególnymi 'klatkami’.
Total Blocking time
Czas, podczas którego długie procesy (powyżej 50ms) blokują główny wątek i zaburzają użyteczność strony. Mogą powodować go na przykład bardzo duże pliki arkuszy styli czy rozbudowany (lub niezoptymalizowany) kod javascript.
Waga poszczególnych elementów Core Web Vitals i ich wpływ na wynik
Każdy z poszczególnych elementów Core Web Vitals ma wpływ na wynik końcowy narzędzia Google PageSpeed Insights. Co jednak bardzo istotne – w różnym stopniu. Każdemu z elementów przypisana jest waga. W chwili obecnej wagi poszczególnych elementów prezentują się następująco:
- First Contentful Paint (FCP) – 10%
- Speed Index (SI) – 10%
- Largest Contentful Paint (LCP) – 25%
- Time to Interactive (TTI) – 10%
- Total Blocking Time (TBT) – 30%
- Cumulative Layout Shift – 15%
Jak i dlaczego warto zadbać o Core Web Vitals swojego serwisu?
Warto mieć na uwadze, że Core Web Vitals nie są jedynie laboratoryjnymi 'suchymi’ współczynnikami. Wynikają one bezpośrednio z UX (User Experience), a więc mają bezpośrednie odzwierciedlenie w odczuciach użytkowników korzystających z serwisu. Mają one na celu jak najlepszą optymalizację techniczną serwisu, aby był on w pełni intuicyjny i przyjemny w obsłudze.
Jak bardzo jest to istotne? Pomijając coraz większą wagę tego aspektu dla pozycjonowania, najlepiej odpowiedzieć sobie na to pytanie samemu, przypominając sobie ostatnio odwiedzoną stronę, która wywołała w nas irytację, bo ładowała się zbyt długo. Przyzwyczajenia użytkowników nieustannie ewoluują, natomiast na bazie ich obserwacji jednoznacznie widać, że użytkownicy stają się coraz bardziej wybredni. Aby nie tracić konwersji w swoim serwisie, należy robić wszystko, aby spełniać oczekiwania użytkowników.
W zależności od technologii wykorzystanej do budowy twojego serwisu, sposób postępowania przy optymalizacji pod kątem Core Web Vitals może być różny. Chcąc poprawić tylko poszczególne elementy Core Web Vitals często wystarczają doraźne działania – niekiedy jednak najlepszym i jedynym słusznym sposobem na wdrożenie największej możliwej ilości zmian jest ponowne wdrożenie szablonu. Jest to zwykle uzasadnione względami czysto ekonomicznymi – działania takie jak np. separacja arkuszy styli są po prostu mniej kosztowne we wdrożeniu od podstaw, niż w przypadku analizy i refactoringu dotychczasowego kodu. Nie ma zatem jednej uniwersalnej recepty dla każdego serwisu, a każdy przypadek należy rozpatrywać indywidualnie.
Jak możemy Ci pomóc?
Zajmujemy się wdrożeniami i modyfikacjami serwisów opartych o platformy IAI IdoSell (sklepy internetowe) oraz WordPress (Strony i sklepy internetowe). Chętnie pomożemy Ci w optymalizacji Twojego serwisu – posiadamy wiedzę i doświadczenie, które pozwalają nam z powodzeniem utrzymywać biznesy naszych klientów w dobrej kondycji.
Jeśli rozważasz optymalizację kodu swojego sklepu lub strony internetowej – zachęcamy do kontaktu. Postaramy się znaleźć rozwiązanie skrojone na miarę, które pozwoli Ci dotrzymać tempa dynamicznie rozwijającej się technologii i spełnić rosnące wymagania użytkowników, jednocześnie wpływając pozytywnie na pozycjonowanie.
Jeśli zaś planujesz redesign lub wdrożenie szablonu swojej witryny, jest to doskonały moment na wykonanie działań optymalizacyjnych – ich wprowadzenie na tym etapie jest znacznie efektywniejsze niż późniejsza optymalizacja zastanego kodu.
Źródła wiedzy
Zdecydowanie najlepiej poszukiwać informacji u samego źródła – Google publikuje informacje odnośnie swoich wymagań. Kluczowe informacje na temat Core Web Vitals można znaleźć np. pod adresem https://support.google.com/webmasters/answer/9205520?hl=pl