SEO-PODCAST.PL – Jak poprawić stronę pod Core Web Vitals?

Ten odcinek SEO Podcastu poświęcę na omówienie czynnika rankingowego, który został zapowiedziany w listopadzie 2020 roku przez firmę Google – Core Web Vitals. Opowiem Ci, czym są wskaźniki LCP, FID i CLS i jakie elementy serwisu są przez nie mierzone. Wymienię Ci listę narzędzi, którymi należy zmierzyć ich wartości i w jaki sposób je poprawić. Dowiesz się także, na jakie dodatkowe elementy powinieneś zwrócić uwagę w trakcie wykonywania technicznego audytu SEO, mające bardzo duży wpływ na wydajność Twojego serwisu.

Spis treści:

Podcast

Listen to „Jak poprawić stronę pod Core Web Vitals?” on Spreaker.

Wideo

Transkrypcja

Czym są wskaźniki Core Web Vitals i czego dotyczą?
Jakie wyróżniamy wskaźniki Core Web Vitals i jakimi narzędziami je przeanalizować?
Jak poprawić wartości wskaźników Core Web Vitals?

Na te pytania poznasz odpowiedzi w dzisiejszym odcinku SEO Podcastu!

W listopadzie 2020 firma Google zapowiedziała wprowadzenie nowego czynnika rankingowego, opartego o trzy podstawowe wskaźniki internetowe zwane „Core Web Vitals”. Od tej zapowiedzi minęło już sporo czasu, ale wciąż spotykam się z serwisami internetowymi, których właściciele albo przespali tę informację, albo ją zbagatelizowali i pozostawili swój serwis bez odpowiedniej optymalizacji technicznej. W dzisiejszym odcinku SEO Podcastu opowiem Ci, w jaki sposób przeanalizować swój serwis i sprawdzić, w jakim stopniu jest on zoptymalizowany pod wskaźniki, które są brane pod uwagę przez algorytmy wyszukiwarki Google do oceny Twojego serwisu, a także, w jaki sposób poprawić ich wartości do akceptowalnego poziomu przez Google. Startujemy!

Czym są wskaźniki Core Web Vitals i czego dotyczą?

Core Web Vitals (w skrócie „CWV”) to podstawowe wskaźniki internetowe, które zostały oficjalnie przedstawione przez Google jako jeden z czynników rankingowych w wyszukiwarce. Celem ich wprowadzenia było ujednolicenie w serwisów w internecie pod kątem doświadczenia użytkowników z ich korzystania (z ang. customer experience, a w skrócie „UX”), w oparciu o czas i prędkość ich wczytywania, interaktywności i tak zwanej stabilności wizualnej, czyli np. przesuwane elementy czy dodatkowe elementy, wyświetlane użytkownikom na ich ekranach. Jeśli nie zrozumiałeś, o co chodzi, to podsumuję to w kilku prostych słowach: Google dąży do tego, aby serwisy internetowe zapewniały użytkownikom bezproblemowe i płynne korzystanie z nich, stąd wymagane było wprowadzenie wskaźników mierzących prędkość wczytywania, a także analizę wczytywanych zasobów. I to zarówno dla wersji desktopowej, jak i mobilnej każdej witryny.

Standardy, które odgórnie wprowadza Google wymusza na nas dostosowanie naszych serwisów pod ich szybsze wczytywanie i optymalizację dla wczytujących się zasobów. Dzięki temu Google będzie mogło szybciej analizować strony i sklepy internetowe, a przeglądarki będą mogły szybciej renderować wszystkie elementy wizualne, które się w nich znajdują. Z tyłu głowy powinniśmy zawsze pamiętać o tym, że problemy firmy Google dotyczące indeksacji serwisów są widoczne od dłuższego czasu, a pozycjonerzy dwoją się i troją, aby witryny ich klientów oraz utworzone linki pozycjonujące w artykułach sponsorowanych i w innych źródłach zewnętrznych, zostały jak najszybciej zaindeksowane w wyszukiwarce. I tutaj koło się zamyka.

Jakie wyróżniamy wskaźniki Core Web Vitals?

Firma Google zwraca uwagę na trzy podstawowe wskaźniki, które powinniśmy mierzyć. Ale za nim do tego dojdziemy, skupmy się najpierw na tym, co powinniśmy przeanalizować.

A do podstawowych wskaźników Core Web Vitals należą:

LCP (akronim z ang. od słów „Largest Contentful Paint”) – wskaźnik ten dotyczy czasu renderowania największego fragmentu zawartości na stronie. Czyli na podstawie wszystkich renderowanych elementów w serwisie w trakcie jego wczytywania (jak np. treści, grafika lub film) Google wybierze ten zasób, którego czas wczytywania jest najdłuższy i wskaże Ci jego wynik. Aby wskaźnik ten wskazywał wynik jako akceptowalny, czas wczytywania największego elementu nie powinien być dłuższy niż 2,5 sekundy;
FID (akronim z ang. od słów „First Input Delay”) – ten wskaźnik natomiast jest oparty o czas wczytywania witryny i jej gotowości do interaktywności, czyli możliwego korzystania z niej przez użytkownika. Jego wartość jest natomiast oparta o pierwszy w kolejności wykryty element w trakcie wczytywania serwisu. Akceptowalny czas mierzony przez ten wskaźnik to maksymalnie 100 ms;
CLS (akronim z ang. od słów „Cumulative Layout Shift”) – to trzeci i ostatni wskaźnik wchodzący w skład „Core Web Vitals” i dotyczy on elementów, które przesuwają i układają się w trakcie wczytywania serwisu, jak np. treści, grafiki i filmy wideo, które w nim publikujemy, a dokładniej go opisując, wskaźnik CLS dotyczy sumy widocznych przesunięć podczas ładowania witryny. Jako przykład takiego zachowania można wskazać np. na popup informujący o wykorzystywaniu plików cookies w serwisie, który nakłada się na samą górę serwisu, zasłaniając przy tym jego główną treść, np. artykuł blogowy. W takiej sytuacji np. w trakcie wykorzystywania urządzenia mobilnego do przeglądania serwisu, w trakcie jego wczytywania użytkownik może przypadkowo kliknąć albo w przycisk znajdujący się w popupie, albo w natrętną reklamę. Według zaleceń Google wskaźnik CLS powinien zmieścić się w przedziale od wartości „0” do „0,1”.

Jakimi narzędziami przeanalizować wskaźniki Core Web Vitals?

Istnieją 4 bardzo podstawowe narzędzia do mierzenia podstawowych wskaźników internetowych „Core Web Vitals”, z czego trzy z nich (co nie powinno być dla nas zaskoczeniem) należą do firmy Google, a należą do nich:

Google PageSpeed Insights – podstawowe narzędzie wykorzystywane na co dzień przez pozycjonerów podczas analizy serwisu i wykonywania audytu SEO;
Google Lighthouse, czyli funkcja wbudowana w przeglądarkę Google Chrome, dostępna jako jeden z elementów narzędzi dla programistów, która pozwoli Ci wykonać analizę dowolnej witryny bezpośrednio za pomocą przeglądarki;
Google Search Console – czyli wszystkim znane narzędzie do analizy technicznej serwisów internetowych, które świetnie sprawdza się do wskazywania podstron wymagających optymalizacji technicznej;
GTmetrix – zewnętrzne narzędzie, które stanowi alternatywę dla Google PageSpeed Insights i jest często wykorzystywane w parze z tym programem dla porównania ze sobą wyników.

Jak poprawić wartości wskaźników Core Web Vitals?

Podstawowe wskaźniki internetowe, które jednym z wielu czynników rankingowych powinny zostać poprawione w trakcie optymalizacji serwisu pod przyszłe pozycjonowanie, jak i w trakcie prowadzenia kampanii SEO. Elementy, które na należy zwrócić uwagę w trakcie optymalizacji, to przede wszystkim szablon naszego serwisu i wczytywane w nim elementy w trakcje jego ładowania, a także wtyczki i moduły, z których funkcjonalności korzystamy. Warto więc sprawdzić, czy do działania naszego serwisu wymagane jest wczytywanie wszystkich tych elementów dla każdej z jego podstron, czy może tylko dla wybranych. Tę zasadę zawsze należy mieć z tyłu głowy w trakcie optymalizacji serwisu pod pozycjonowanie i wczytywanie na urządzeniach typu desktop i mobile.

Poza tym istnieją także inne elementy, na które powinniśmy zwrócić uwagę w trakcie optymalizacji naszego serwisu i mające bardzo duży wpływ na prędkość jego wczytywania.

Należą do nich:

odpowiednio zoptymalizowany hosting pod platformę, z której korzystamy, jak np. CMS WordPress lub sklep internetowy postawiony na popularnej platformie ecommerce, jak np. Prestashop (osobiście korzystam z serwerów firmy CyberFolks.pl, które są zoptymalizowane pod obydwa silniki);
obsługa cache na serwerze, która umożliwi wczytywanie w dużo szybszy sposób zasobów serwisu, które zostaną wcześniej wyrenderowane przez serwer i odciążą przy tym przeglądarkę internetową, która wczyta gotowe zasoby;
kompresja zdjęć i wykorzystywanie formatu .webp – im mniejsza waga grafik będzie dostępna w naszym serwisie, tym lepiej. Wykorzystywanie kompresji plików graficznych do formatu .webp umożliwi przyspieszenie wczytywania naszego serwisu, bez utraty jakości. Ten format dla grafiki jest obsługiwany przez wszystkie najnowsze przeglądarki internetowe, a także jest oczywiście łatwy w indeksacji przez roboty indeksujące i polecany przez firmę Google;
kompresja bibliotek JS i arkuszy styli CSS – odpowiednio zminifikowane pliki, czyli skompresowane na serwerze umożliwią ich szybsze wczytywanie, a następnie renderowanie zasobów serwisu i przy tym wyświetlanie wszelkiej dostępnej funkcjonalności w serwisie, jak np. modułów i wtyczek czy grafik;
odpowiednie rozmiary grafik – zadbajmy o tym, aby zdjęcia i grafiki dostępne w treści naszej strony lub sklepu internetowego nie osiągały bardzo dużych rozmiarów, jak np. kilka tysięcy pikseli na wysokość lub szerokość;
korzystanie z serwerów typu CDN (z ang. Content Delivery Network), które warto wziąć pod uwagę w serwisach, w których korzystamy z dużej ilości grafik i zdjęć czy materiałów wideo – taki serwer zdecydowanie szybciej będzie je wyświetlał użytkownikom, a także odciąży nasz główny serwer, na którym postawimy naszą stronę lub sklep internetowy;
funkcja „Lazy load”, czyli wczytywanie dodatkowych elementów w serwisie z opóźnieniem, w trakcie dalszego scrollowania przeglądarki przez użytkowników. Taka funkcjonalność odciąża serwer w trakcie wczytywania strony lub sklepu internetowego i pozwala wczytywać tylko najważniejsze zasoby, które są wymagane do wyświetlenia najważniejszych elementów w serwisie. W trakcie dalszego scrollowania serwisu przez użytkowników wtyczka będzie płynnie pobierać dodatkowe elementy w tle. Jej działanie nie jest odczuwalne przez użytkownika, a przede wszystkim pozwala skrócić czas wczytywania witryny. Taką wtyczkę warto pobrać dla wykorzystywanego systemu CMS lub platformy ecommerce, którą wykorzystujesz na co dzień. Po instalacji nie będzie wymagana jej konfiguracja, dlatego możesz korzystać z jej domyślnych ustawień;
dynamiczne ładowanie elementów – w trakcie analizy serwisu należy sprawdzić, czy wszystkie elementy wczytywane dynamicznie na naszej stronie lub w sklepie internetowym mogą zaburzyć wartość wskaźnika „CLS” wchodzącego w zakres „Core Web Vitals”. W tym wypadku należy zadbać o to, aby wszystkie wczytywane elementy miały ustawioną stałą wysokość końcową i były wyświetlane zawsze w tym samym miejscu w serwisie, co zablokuje ich przesunięcie w trakcie wczytywania pozostałych elementów serwisu. Dlatego, jeśli posiadamy jakiekolwiek elementy, które ładują się dynamicznie, musimy się upewnić, czy przypadkiem nie wpływają one na przesunięcie innych elementów w trakcie wczytywania.

Przejdźmy do podsumowania naszego odcinka SEO Podcastu:

Wyjaśniłem Ci, czym są podstawowe wskaźniki internetowe określane jako „Core Web Vitals” i czego dotyczą;
Wymieniłem Ci trzy czynniki, które wchodzą w zakres wskaźników „Core Web Vitals” i opowiedziałem Ci o tym, w jaki sposób Google mierzy ich wartości;
Wymieniłem Ci także listę czterech narzędzi, które warto wykorzystać do analizy serwisu i sprawdzenia wartości wskaźników Core Web Vitals;
Opowiedziałem o sposobach na poprawę wskaźników Core Web Vitals i wskazałem Ci elementy, na które należy zwrócić szczególną uwagę w trakcie optymalizacji technicznej;
Otrzymałeś listę wskazówek, które warto wykorzystać w trakcie optymalizacji technicznej swojego serwisu pod SEO oraz pod poprawę wydajności serwisu dla urządzeń desktopowych i mobilnych.

Zbyt długi czas wczytywania naszego serwisu internetowego i znajdujących się w nim zasobów w postaci treści, grafik, filmów, bibliotek JS czy arkuszy styli CSS niestety wpływa negatywnie nie tylko na podstawowe wskaźniki internetowe, które stanowią jeden z bardzo ważnych czynników rankingowych w Google, ale i przede wszystkim na negatywne odczucia naszych użytkowników w trakcie korzystania z naszego serwisu, a przez to na mniejszą liczbę konwersji i wyższy współczynnik odrzuceń.

Ze względu na różnorodność serwisów w internecie, nie istnieje jedna, wspólna lista elementów, na które należy zwrócić uwagę podczas wykonywania audytu. Wartość badanych wskaźników może także być różna w zależności od danego typu serwisu, dlatego warto je zweryfikować i niezwłocznie wdrożyć działania optymalizacyjne z pomocą odpowiedniego programisty.

Mam nadzieję, że dzięki temu odcinkowi SEO Podcastu podejmiesz odpowiednie kroki mające na celu poprawę Twojego serwisu dla wymienionych wskaźników i poprawisz witrynę pod ich kątem.

Jeśli masz doświadczenie w optymalizacji stron i sklepów internetowych pod Core Web Vitals, to daj proszę znać, na co użytkownicy powinni zwrócić szczególną uwagę w trakcie ich poprawy. Podziel się z nami swoim doświadczeniem w komentarzu pod tym filmem.

Kliknij też łapkę w górę i zasubskrybuj ten kanał, abyś otrzymywał od serwisu YouTube powiadomienia o kolejnych odcinkach, a jeśli słuchasz mnie na platformie podcastowej, to zasubskrybuj ten kanał.

Zapraszam Cię również do moich autorskich książek o SEO oraz do autorskiego kursu SEO, w którym w praktyczny sposób uczę pozycjonowania z wykorzystaniem specjalistycznych i popularnych aplikacji SEO, w tym narzędzi, które wymieniłem w tym odcinku SEO Podcastu. W opisie pod tym filmem znajdziesz linki do wymienionych materiałów.

Dziękuję Ci za wysłuchanie tego odcinka w formie podcastu lub obejrzenie go w formie wideo w serwisie YouTube i oczywiście zapraszam Cię do pozostałych odcinków SEO Podcastu.

Do zobaczenia lub usłyszenia w kolejnym odcinku, cześć!