Jak zoptymalizować stronę internetową pod konkretne wskaźniki Core Web Vitals? Praktyczny poradnik
Google wciąż zmienia swoje algorytmy, ostatnio skupiając się na aspekcie związanym z user experience, czyli doświadczeniami użytkowników stron internetowych. Już w połowie 2021 roku rozpocznie się jedna z największych aktualizacji algorytmu ostatnich lat, wprowadzająca wskaźniki Core Web Vitals, dokładnie oceniające zadowolenie i komfort odbiorców konkretnych witryn. Więcej o tym, czym są Core Web Vitals pisaliśmy TUTAJ. Zmiana ta z pewnością pokazuje nam, w jakim kierunku zmierzają kolejne kroki Google i jak istotne będzie skupienie się na użytkowniku i zapewnieniu mu pełnego komfortu użytkowania serwisów. Jak zoptymalizować stronę internetową pod wskaźniki Core Web Vitals? Co zrobić, aby już teraz przygotować witrynę do zbliżającej się aktualizacji? Podpowiadamy kilka sprawdzonych sposobów.

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.
Najlepsze historie
-
5 gigantów Doliny Krzemowej.
11.11.2020Udaj się z nami w wirtualną podróż i dowiedz się, co najbardziej zaskoczyło nas w siedzibie Google, Apple, Facebook, Intel i Netflix!
Ponieważ w obecnych czasach podróżowanie zostało mocno ograniczone, postanowiliśmy zabrać Was w wirtualną podróż po siedzibach słynnych firm z Doliny Krzemowej. Z artykułu dowiecie się też, co najbardziej nas zdziwiło, zaskoczyło i zachwyciło w odwiedzanych miejscach. Jesteście gotowi? Ruszajmy!
-
Jak wstawić standardową mapę Google na stronę www?
13.07.2020Mapy Google to jedna z najbardziej popularnych i rozpoznawalnych usług nie tylko w skali tej marki, ale generalnie pośród wszystkich dostępnych w przeglądarkach internetowych lub smartfonach.
-
Co warto wiedzieć, zanim zdecydujesz się na otworzenie sklepu internetowego?
16.04.2020Czy na pewno jesteś gotowy na założenie własnego sklepu internetowego? W końcu potrzeba do tego naprawdę sporo wiedzy i to nie tylko tej związanej ze sprzedawanymi produktami. Przygotowaliśmy dla Ciebie kilka porad na temat tego, co warto wiedzieć, zanim zdecydujesz się na otworzenie sklepu internetowego. Zatem przestań się obawiać, tylko rozpocznij swoją przygodę z e-commerce.