Jak zoptymalizować stronę internetową pod konkretne wskaźniki Core Web Vitals? Praktyczny poradnik

LCP (Largest Contentful Paint) – optymalizacja

• Skompresuj grafiki i zastosuj inne formaty zdjęć

Zacznij od optymalizacji grafik na stronie, czyli zmniejsz ich wagę i dostosuj rozmiar obrazu umieszczonego na serwerze do jego rozmiaru wyświetlania na witrynie. Jeśli to możliwe wypróbuj dla zdjęć format WebP, który sprawia, że są lżejsze od innych formatów i nie tracą jakości podczas kompresji. Działania te będą szczególnie istotne przy serwisach, których znaczna część to zdjęcia i grafiki.

• Zastosuj technikę Lazy Loading

To technika, która umożliwia stopniowe ładowanie poszczególnych elementów strony internetowej (np. zdjęć i grafik) w miarę przewijania jej przez użytkownika w dół. Dzięki temu nie wszystkie ciężkie elementy muszą załadować się od razu, przyspieszając proces wczytania witryny. We wdrożeniu tego rozwiązania pomagają wtyczki, takie jak Autoptimize dla WordPress czy Lazy Load for Joomla!

• Skróć czas odpowiedzi serwera, czyli ulepsz wskaźnik TTFB

Odpowiednio zoptymalizowany wskaźnik Time to first byte zwiększa wydajność strony i poprawia jej szybkość. A to bezpośrednio wpływa na ulepszenie wskaźnika LCP. W tym celu można rozdzielić ruch na stronie na różne serwery, np. wykorzystując Content Delivery Network, wzmocnić serwer, przenieść witrynę na bardziej wydajny hosting, przeprowadzić aktualizację PHP czy przejść na statyczny HTML.

• Zadbaj o fonty

Zmniejsz do minimum liczbę fontów używanych na swojej witrynie. W miarę możliwości zrezygnuj też z wielu ozdobników, np. różnych grubości czcionek. Możesz zastosować też rozwiązania, które będą wspomagać pobieranie fontów, np. funkcję preload lub z niego rezygnować za pomocą font-display optional.

FID (First Input Delay) - optymalizacja

• Zminimalizuj pliki JavaScript i CSS

To popularny sposób „odchudzenia” wagi plików. Można jej dokonać np. dzięki usunięciu wszystkich zbędnych elementów kodu, takich jak tabulatory, spacje, niepotrzebne znaki.

• Ogranicz skrypty JavaScript i style CSS

Za pomocą ogólnodostępnych narzędzi, takich jak np. Google Dev Tools sprawdź, które skrypty na witrynie są nieaktywne i nieużywane i usuń je lub pozostaw tylko na tych podstronach, na których są wykorzystywane. To wpłynie na skrócenie czasu ładowania się strony.

• Podziel długie zadania

Jeśli jest taka możliwość spróbuj podzielić długie kody na krótsze, dzięki czemu zmniejszysz opóźnienie ładowania się danych na stronie.

CLS (Cumulative Layout Shift) - optymalizacja

• Wskaż konkretne rozmiary grafik i zdjęć

Określenie konkretnych wymiarów grafik i zdjęć pozwoli zminimalizować ryzyko przesunięć obrazu strony podczas jej ładowania. Pomocne będą tu atrybuty height i width, które muszą zostać określone w HTML. Pamiętaj o dostosowaniu rozmiarów do urządzenia, na jakim będzie wyświetlana witryna (mobile czy desktop) oraz o różnych ustawieniach rozdzielczości monitorów. Docelowo najlepiej określić 4 rozmiary grafik i zdjęć.

Core Web Vitals – optymalizacja strony

Przed przystąpieniem do realizacji konkretnych działań optymalizacyjnych warto zapoznać się z raportami wygenerowanymi dla danej strony internetowej, określającymi sugerowane rozwiązania naprawcze. Zarówno do sprawdzania witryn, jak i do wdrożenia poprawek można wykorzystać ogólnodostępne narzędzia, aplikacje czy programy. Celem przeprowadzanych działań, zgodnie z rekomendacją Google powinno być zadowolenie i komfort użytkowników, korzystających z naszych serwisów.