Jak poprawić wskaźniki Core Web Vitals?

Jak poprawić CLS (skumulowane przesunięcie układu)

CLS (Cumulative Layout Shift) mierzy nieoczekiwane zmiany w układzie Twojej strony, które mogą między innymi prowadzić do generowania niechcianych przypadkowych kliknięć. Oto jak możesz tego uniknąć:

• Przeznacz wystarczająco dużo miejsca na treści dynamiczne, takie jak reklamy (poprzez użycie kontenerów). W przeciwnym razie z pewnością mogą wystąpić nieoczekiwane zmiany w układzie strony. Co więcej, w przypadku reklam, grafik i elementów wideo – nie zapomnij uwzględnić atrybutów rozmiaru szerokości i wysokości, lub użyć współczynnika proporcji CSS (ang. CSS aspect ratio). Dzięki temu zyskasz pewność, że zostawiłeś wystarczająco dużą przestrzeń;
• Upewnij się, że działa u Ciebie back/forward cache (bfcache). Jest to raczej półśrodek, ponieważ zmiany układu podczas ładowania pierwszej strony mogą nadal występować. Użytkownicy jednak, po powrocie na daną stronę nie zobaczą już tych przesunięć;
• Czasami, gdy przeglądarka pobrała już kod HTML, ale nie pobrała jeszcze zasobów, może dojść do dwóch sytuacji: FOUT (Flash of Unstyled Text), tłumaczone jako mignięcie nieostylowanego tekstu lub FOIT (Flash of Invisible Text), czyli mignięcie niewidocznego tekstu. W pierwszym przypadku tekst wyświetlany jest przy użyciu domyślnej czcionki; w drugim natomiast tekst jest ukryty. Aby uniknąć obu scenariuszy, użyj specjalnych narzędzi, takich jak CSS font-display property lub Font Loading API, dzięki którym możliwe jest ustalanie pierwszeństwa wczytywania czcionek.

Jak poprawić INP (interakcję do kolejnego wyrenderowania)

INP (Interaction to Next Paint) to stosunkowo nowy wskaźnik, który wkrótce (w marcu 2024 roku) zastąpi opóźnienie przy pierwszym działaniu (FID). Obydwa pomagają ocenić responsywność strony internetowej, jednak INP ukazuje to w szerszej perspektywie, ponieważ ukazuje średni czas trwania każdego kliknięcia, dotknięcia i naciśnięcia klawisza, które prowadzą do kolejnego odświeżenia ekranu. Przygotowaliśmy kilka wskazówek, dzięki którym osiągany przez Ciebie wynik INP będzie zadowalający:

• Zlokalizuj problem, wykorzystując dane laboratoryjne (lab data) dzięki opcji Console Logging (dostępnej w rozszerzeniu Web Vitals na przeglądarkę Chrome) lub dodaj fragment JavaScript INP do kodu swojej strony, aby zobaczyć wydajność każdej interakcji w czasie rzeczywistym. Tym sposobem będziesz w stanie rozpoznać źródło problemu – czy leży on w opóźnieniu sygnału wejściowego (input delay), czasu przetwarzania czy prezentacji/wyświetlenia;
• Postaraj się zminimalizować opóźnienie sygnału wejściowego, na przykład dzieląc długie zdania na krótsze oraz unikając stosowania powtarzających się timerów, które inicjują nadmierną pracę nad głównym wątkiem;
• Jeśli chodzi o wywołania zwrotne zdarzeń, staraj się nie tworzyć rozbudowanych i skomplikowanych układów stron ani nie powodować niszczenia układu;
• Zmniejsz opóźnienie prezentacji – może się to różnić w zależności od poziomu skomplikowania strony. Istotne jest tu, że priorytetyzując treści wyświetlane jako pierwsze, bez konieczności przewijania (above-the-fold), kluczowe elementy strony znacznie szybciej się wyrenderują.

Jak poprawić LCP (największe wyrenderowanie treści) i FID (opóźnienie przy pierwszym działaniu)

Aby ocenić szybkość ładowania witryny, rozważ wykorzystanie wskaźnika LCP (Largest Contentful Paint). Z kolei, FID (First Input Delay) może być pomocne w zmierzeniu responsywności witryny. W odróżnieniu od INP, FID podaje jedynie czas opóźnienia w przeprocesowaniu pierwszej interakcji użytkownika z daną stroną. Nie uwzględnia więc całego czasu trwania zdarzenia, od interakcji po aktualizację ekranu. Aby zoptymalizować wskaźniki LCP i FID, możesz wdrożyć następujące działania:

• Najważniejsze to skrócić czas odpowiedzi serwera. Możesz to zrobić, korzystając z poniższych metod:
  • Upewnij się, że Twój serwer nie jest przeciążony,
  • Kieruj żądania użytkowników dotyczące treści internetowych do serwerów w sieci CDN (Content Delivery Networks) zamiast do serwera początkowego,
  • Przechowuj kopie statycznych plików HTML w cache, który jest tymczasowym obszarem przechowywania,
  • W celu utworzenia cache stron internetowych użyj kodu service workers,
  • Inicjuj połączenia sieciowe z wyprzedzeniem;

• Ponadto zminimalizuj czas blokowania JavaScript:
  • Usuń niepotrzebne znaki z kodu JavaScript i zmniejsz rozmiar pliku,
  • Zredukuj nieużywany JaveScript,
  • Stosuj kody polyfill tylko w razie potrzeby. Są to kody, umożliwiające dodawanie lub modyfikowanie nowych funkcji w środowiskach, które oryginalnie ich nie obsługują,
  • Usuń nieużywany kod,
  • Zastosuj natychmiastowe ładowanie przy użyciu wzorca PRPL;

• Powinieneś także rozważyć skrócenie czasu bloku CSS:
  • Usuń niepotrzebne znaki,
  • Używaj kodu polyfill jedynie w razie potrzeby,
  • Usuń niepotrzebne arkusze stylów,
  • Nie stosuj zbyt dużych grafik tła;

• Ponadto, aby poprawić wynik LCP swojej witryny, skróć czas ładowania elementów. Oto kilka przydatnych wskazówek, jak to zrobić:
  • Optymalizuj i kompresuj grafiki i pliki tekstowe,
  • Zoptymalizuj prędkość ładowania, wstępnie ładując najważniejsze assety,
  • Nadaj priorytet zasobom, aby przeglądarka wiedziała, które ma załadować jako pierwsze. Możesz to zrobić, używając <link rel=”preload”>, <link rel=”preconnect”> oraz <link rel=”prefetch”>,
  • Korzystaj z sieci Content Delivery Networks – zazwyczaj najlepiej, by większość Twoich treści była dystrybuowana za pośrednictwem sieci CDN, ponieważ pozwala to użytkownikowi ściągać pliki z najbliższego mu serwera, co skraca czas ładowania strony,
  • Używaj Network Information API, by Twoja witryna mogła dostosowywać się do różnych jakości połączeń internetowych,
  • Przechowuj i zapisuj strony internetowe w cache, korzystając przy tym z kodu service workers,
  • Użyj renderowania po stronie serwera zamiast standardowego modelu żądania i odpowiedzi,
  • Wstępnie załaduj elementy strony internetowej dla robotów indeksujących;

• Aby uzyskać lepsze wyniki FID, należy skrócić czas przeprowadzania procesów JavaScript. Oto jak możesz tego dokonać:
  • Dziel długie zdania na krótsze,
  • Lepiej przygotuj stronę na interakcje, np. minimalizując wpływ kodu z zewnętrznych źródeł,
  • Przechowuj i zapisuj strony internetowe w cache – korzystaj z kodu service workers.

Zadbaj o wydajność

Wskaźniki Core Web Vitals należy bez zwątpienia uwzględnić w procesach dbania o swoje treści internetowe. Jednak CWV są istotne również z punktu widzenia reklamy i monetyzacji. W końcu im lepsze doświadczenia użytkowników, tym wyższe generowane przychody z reklam! Jako Premier GCPP partner w ramach programu Google, możemy pomóc Ci bezproblemowo wdrożyć sprawdzone taktyki przyjazne użytkownikowi, co zapewni powodzenie Twoich monetyzacyjnych wysiłków. Nasza technologia optAd360 AI Engine uwzględnia Core Web Vitals, zatem tworząc lub uzupełniając siatkę reklamową Twojej witryny, spełni dwa kluczowe założenia: Twoja strona zapewni doskonały UX, jednocześnie generując dla Ciebie imponujące zarobki!