Optymalizacja Core Web Vitals

W jaki sposób optymalizować wskaźniki Core Web Vitals na stronie? Czy wykorzystanie wtyczki NitroPack dla optymalizacji wydajności strony w PageSpeed Insights jest elementem Black Hat SEO? Jak sprawić, aby doświadczenie użytkownika ze stroną było jak najlepsze?

W tym wpisie przyjrzymy się bliżej skąd brać realne dane dotyczące oceny podstawowych wskaźników internetowych oraz szybkości witryny. Poznamy też sposoby poprawy prędkości i wydajności stron internetowych. Przyjrzymy się bliżej popularnej wtyczce Nitropack – jej zaletom oraz wadom. Pokażemy też alternatywne metody poprawy wydajności serwisów www.

PageSpeed Insights

Testy takie jak PageSpeed Insights są bardzo przydatne do identyfikacji obszarów wymagających poprawy. Jednak takie sprawdzanie strony na żywo nie uwzględnia tego, jak faktycznie zachowuje się ona u rzeczywistych użytkowników, korzystających z prawdziwych urządzeń.

Aby naprawdę zorientować się, jak działa Twoja strona, musisz użyć danych pochodzących od użytkowników (prawdziwi użytkownicy w prawdziwym środowisku). Co ciekawe takie dane można również zobaczyć bezpośrednio w narzędziu PageSpeed Insights. Są to natomiast informacje  pochodzące z CrUX. O nim za chwilę. To, czy dane realne są dostępne czy nie, zależy w uproszczeniu od tego, jak duży ruch wygenerowała twoja strona w ciągu ostatnich 28 dni.

Ważne jest, aby wiedzieć, że tzw. sprawdzanie na żywo w narzędziu PageSpeed Insights uwzględnia tylko samo załadowanie się Twojej strony bez interakcji z nią. Jeśli nie możesz powtórzyć tych wyników w teście na żywo z udziałem rzeczywistych użytkowników, nie zobaczysz żadnych korzyści z suchych liczb w PageSpeed Insights. Ani w rankingu Google (pozycji strony w wyszukiwarce), ani we wzroście konwersji.

Możesz po części przechytrzyć testy laboratoryjne używając wtyczek takich jak Nitropack, ale to nie ma znaczenia dla Google. Ostatecznie liczy się doświadczenie użytkownika.

CrUX

Chrome User Experience Report (CrUX) to publiczny zbiór danych, stworzony przez Google, dotyczący metryk obrazujących doświadczenia użytkowników. CrUX wykorzystuje dane z przeglądarki Chrome do pomiaru jakości interakcji użytkowników z witrynami.

Chrome User Experience Report opiera się na rzeczywistych danych od użytkowników, którzy zgodzili się na udostępnianie historii przeglądania, nie ustanowili hasła Sync i mają włączone raportowanie statystyk użytkowania.

Dane dotyczące wskaźników Core Web Vitals z narzędzia CrUX są najdokładniejszym sposobem pomiaru doświadczenia użytkownika witryny. W przeciwieństwie do testów laboratoryjnych, CrUX bierze pod uwagę to, jak strona faktycznie reaguje, gdy użytkownicy przewijają i poruszają się po niej. Uwzględnia również szybkość, z jaką użytkownik otrzymuje zawartość strony.

Wyniki bazujące na danych laboratoryjnych z wykorzystaniem Lighthouse, które zobaczy Twój klient, są na początku bardzo imponujące. Podobnie jest po konfiguracji Nitropacka. Natomiast 28 dni później wyniki “terenowe” zebrane w CrUX mogą się znacząco różnić.

Uzyskanie dobrych wyników w teście “terenowym” na realnych użytkownikach, jaki dostarcza CrUX, jest prawdziwym celem optymalizacji Core Web Vitals i uzyskania pozytywnego efektu w SEO.

Skąd wziąć raporty Core Web Vitals?

Aby uzyskać dostęp do raportu Chrome User Experience, możesz skorzystać z narzędzia PageSpeed Insights lub zalogować się do Google Search Console, uzyskując dostęp do raportu Core Web Vitals (Podstawowych wskaźników internetowych). W przypadku pierwszej opcji będziesz musiał sprawdzić pojedyncze adresy URL jeden po drugim lub przynajmniej każdy bazujący na podobnym układzie graficznym.

Drugie podejście jest o wiele lepsze. Wewnątrz Google Search Console możesz zobaczyć podsumowanie problematycznych adresów URL. Raport podstawowych wskaźników internetowych zawiera informacje o wskaźniku, który sprawia problem i powoduje, że cały test CWV nie jest zaliczony. W ten sposób oczywiście nie zbadasz stron, z którymi nie jesteś związany. Potrzebny jest dostęp do Google Search Console.

Wewnątrz GSC , narzędzia dla webmasterów, będziesz mógł zobaczyć listę podstron swojej problematycznej witryny z niskim wskaźnikiem LCP, FID lub CLS. W raporcie zobaczysz także zbiorcze dane dotyczące LCP, FID i CLS dla stron dobrej jakości.

Narzędzia laboratoryjne do pomiaru Core Web Vitals

Wykorzystanie narzędzi laboratoryjnych to najlepsze podejście do wykrywania błędów związanych z wydajnością, zanim te się pojawią. Chrome DevTools i Lighthouse to dwa narzędzia, które można wykorzystać do pomiaru i sprawdzenia Core Web Vitals w warunkach laboratoryjnych.

Jak mówi samo Google:

Chociaż pomiary laboratoryjne są istotną częścią dostarczania wspaniałych doświadczeń, nie zastępują one pomiarów w terenie.

Możliwości konkretnego urządzenia, rodzaj i jakość połączenia internetowego, inne procesy, które mogą być uruchomione na urządzeniu, oraz sposób interakcji ze stroną mają znaczący wpływ na wydajność witryny. W rzeczywistości każda z metryk Core Web Vitals jest podatna na interakcję z użytkownikiem.

W związku z tym pomiar CWV w terenie jest jedyną metodą, która może zapewnić dokładną reprezentację i obraz sytuacji.

Czym jest NitroPack?

NitroPack to narzędzie do optymalizacji szybkości stron internetowych, które początkowo zostało stworzone dla OpenCart. Obecnie obsługuje ono także platformy WordPress i Magento. W przypadku systemu WordPressa, Nitropack stworzył dedykowaną wtyczkę, która ułatwia i przyspiesza implementację.

NitroPack to usługa oparta na chmurze, która oszczędza zasoby serwera, na którym fizycznie znajduje się strona internetowa. Darmowa wtyczka NitroPack, którą pobierasz z WordPress.org, po prostu pomaga ci połączyć swoją witrynę z serwerami NitroPack.

Usługa oferuje wiele funkcji optymalizacyjnych, takich jak buforowanie, optymalizacja obrazków, inteligentne ładowanie zasobów, wbudowany CDN, optymalizacja kodu, leniwe ładowanie zasobów (lazy loading) czy szereg innych usprawnień.

NitroPack jest niezwykle łatwy w konfiguracji – nie potrzebujesz żadnej wiedzy technicznej ani zatrudnienia kosztownego programisty.

Minusy zastosowania NitroPacka

• Jest zwykle droższy niż WPRocket lub inne wtyczki
• Wynik Pagespeed Insights jest doskonały, ale nie zawsze to jest kluczowe; to jedynie dane laboratoryjne
• Kody innych dostawców mogą nie działać prawidłowo
• Twoja strona może zostać zepsuta przez zastosowanie Nitropacka (ze względu na jego optymalizacje kodów JavaScript), więc potrzebujesz jeszcze szeregu testów
• Nitropack nie naprawi słabego hostingu
• Średnia optymalizacja i kompresja obrazków
• SEO obrazów w Google może istotnie ucierpieć, jeśli użyjesz CDN (sieci dostarczania zawartości)

Plusy zastosowania NitroPacka

• Nie wymaga umiejętności programowania
• Szybki i dość łatwy do wdrożenia
• Obsługiwane są główne CMS-y jak WordPress, WooCommerce, OpenCart, Magento
• Nie jest optymalny i lepiej jest precyzyjnie naprawić źródło problemu
• Może nie wystarczyć do zaliczenia Core Web Vitals; to zależy od konstrukcji witryny

Optymalizacja wskaźników Core Web Vitals na przykładzie

W Google Search Console, w sekcji Core Web Vitals po sprawdzeniu widzę, że CWV nie jest zaliczone. Dotyczy to wyłącznie urządzeń stacjonarnych (komputerów/desktop). Mam także informację, że jest to spowodowane zbyt wysoką wartością CLS, która wynosi 0.14 dla badanej witryny.

Metryka CLS (cumulative layout shift) służy do oceny stabilności wizualnej układu strony. Strony powinny mieć wartość CLS równą lub mniejszą od 0.1, aby według Google’a zapewnić użytkownikowi wysokiej jakości wrażenia.

Do oceny wskaźników CWV analizowany jest percentyl 75 (inaczej kwartyl trzeci albo górny). Jest to wartość, przy której 25% wyników jest powyżej tej wartości a 75% znajduje się poniżej tej wartości.

Ok, teraz czas na identyfikację tego, co powoduje tak wysoką wartość CLS. Możemy do tego celu wykorzystać Lighthouse w przeglądarce Chrome.

Aby użyć Lighthouse’a przejdź na swoją stronę i kliknij Ctrl+Shift+C. W efekcie uzyskasz dostęp do narzędzi deweloperskich. Następnie przełącz zakładkę na Lighthouse i uruchom test. Jeśli brakuje Ci wiedzy technicznej i nie chcesz się w nią zagłębiać, możesz zacząć od wspomnianego PageSpeed Insights.

W Lighthouse widzę dla analizowanego przypadku, że dynamicznie ładowany widget strony na Facebooku poważnie wpływa na CLS. Możemy ustawić dla tego elementu div stałą szerokość i wysokość, aby uniknąć przesunięć. Zarezerwujemy w ten sposób miejsce na widget, który się doładuje po kilku sekundach. Jest jeszcze kilka innych rzeczy do poprawienia, ale możemy naprawić najważniejszą i poczekać, obserwując czy to wystarczy.

Niestety czasami potrzebujemy aż 28 dni, aby zobaczyć poprawki w raporcie CrUX, a więc w danych od realnych użytkowników.

Czy Nitropack jest zły?

Nie, Nitropack nie jest zły. Ma swoje plusy i minusy, jak każdy inny plugin czy narzędzie. To użytkownik decyduje, czy jest on odpowiedni dla jego strony.

Jeśli szukasz szybkiego i łatwego sposobu na poprawę wydajności witryny, NitroPack może być wart rozważenia. Jeśli potrzebujesz szybkiego rozwiązania bez zagłębiania się w techniczne aspekty, „go for it” i obserwuj wyniki.

Jednak Nitropack zazwyczaj nie wystarcza, aby przejść Core Web Vitals. Jeśli więc szukasz bardziej kompleksowego podejścia i chcesz naprawić źródła problemów, powinieneś wybrać inne rozwiązania.

Sposoby optymalizacji Core Web Vitals

Zacznij od podstaw, czyli:

1. Zadbaj o szybki, niezawodny hosting. Vultr jest jednym z rekomendowanych hostingów m.in. dla CMS-a WordPress, ale także przy innych skryptach. High Frequency jest naprawdę potężną opcją. Jeśli nie masz w zespole osoby technicznej do zarządzania serwerem, możesz wybrać gotowe rozwiązanie Cloudways z Vultr, który zajmuje się zarządzaniem i uprości ten proces.

2. Wykorzystaj szybki DNS. Możesz łatwo porównać działanie Cloudflare z OVH na przykład tutaj.

3. Skompresuj i zoptymalizuj obrazy – lokalnie albo z wykorzystaniem wtyczki. O formatach obrazków w SEO pisałem już w jednym z ostatnich artykułów.

4. Jeśli zdecydujesz się na CDN, użyj jednego.

5. Zatrudnij Technical SEO i programistę, jeśli nie chcesz zagłębiać się w techniczne aspekty optymalizacji strony internetowej.