Largest Contentful Paint [LCP] optymalizacja krok po kroku

Nasza strona ma wynik w Google PageSpeed Insight 99/100 i wszystkie czynniki rankingowe Google [First Contentful Paint, First Input Delay, Largest Contentful Paint i Cumulative Layout Shift] na zielono. Chcesz mieć podobny wynik, ale nie chcesz czytać do końca tego poradnika [choć gwarantujemy, że warto]? Kliknij tutaj i napisz do nas, a pomożemy Ci osiągnąć taki sam wynik na Twojej stronie.

Google Core Web Vitals

Na samym początku opowiemy Ci o tym, czym jest Google Core Web Vitals i dlaczego jest aktualnie tak ważne w SEO. W skrócie mówiąc Core Web Vitals to grupa czynników rankingowych, które wraz z innymi już znanymi elementami składają się na tzw Page Experience Signals. A to sformułowanie opisuje natomiast doświadczenia użytkowników w interakcji z Twoją witryną. Im lepszą ocenę pod tym kątem uzyska Twoja strona internetowa, tym lepiej wpłynie to na jej pozycje w Google. Przynajmniej w teorii ☺️

Aby Ci lepiej przybliżyć co oznaczają oba sformułowania  zacznijmy od screena, który pochodzi od samego Google, a doskonale obrazuje zakres oceny strony w ramach Google Page Experience Signals oraz Google Core Web Vitals:

Jak już widzisz w skład oceny Google Core Web Vitals wchodzą elementy takie jak:

1. Largest Contentful Paint – największe wyrenderowanie treści.
2. Cumulative Layout Shift – zbiorcze przesunięcie układu.
3. First Input Delay – opóźnienie przy pierwszym działaniu.

Ich wdrożenie Google zapowiedziało już jakiś czas temu na maj 2021 roku, dlatego tak ważna jest optymalizacja stron internetowych do tego czasu. Chociaż na dzień dzisiejszy nie wiemy jak wielki wpływ na pozycje w Google będzie miała aktualizacja algorytmu związana z tą kwestią to jednak pewne jest to, że strony internetowej, które nie będą spełniać wymogów Google w tych trzech aspektach odczują to w swoich pozycjach w wynikach wyszukiwania w mniejszym lub większym stopniu.

To czy Twoja strona internetowa spełnia wymogi Web Core Vitals możesz sprawdzić za pomocą narzędzia Google Search Console w zakładce Podstawowe wskaźniki internetowe.

Każda ze stron z zaindeksowanych przez robota Google oceniana jest według poniższych kryteriów:

• Dobrej jakości
• Wymagające poprawienia
• Słabej jakości

Oceny te odnoszą się tylko i wyłącznie do parametrów Google Core Web Vitals. Jednak należy pamiętać, iż oprócz nich istotne są także pozostałe czynniki rankingowe widoczne uwzględniane w ramach Page Experience Signals:

1. Mobile Friendly – dostosowanie strony pod kątem responsywności.
2. Safe Browsing – ochrona użytkowników przez złośliwymi treściami na stronie.
3. HTTPS – obsługa protokołu HTTPS na stronie internetowej.
4. No Intrusive Interstitials – ograniczanie natrętnych popupów i bannerów na stronie.

O tym jak zoptymalizować stronę internetową pod kątem zbiorczego przesunięcia układu przeczytasz w artykule o Cumulative Layout Shift. Przejdźmy teraz do opisu czym dokładnie jest Largest Contentful Paint oraz jak zoptymalizować stronę pod kątem tego czynnika rankingowego 🤓

Czym jest Largest Contentful Paint?

Largest Contentful Paint zwane także jako Największe wyrenderowanie treści opisuje doskonale na swoim blogu web.dev Google. I tutaj również posłużymy się ich screenem, które dobrze ukazuje na przykładzie strony CNN element określany jako Largest Contentful Paint.

Doskonale widać tutaj zarówno FID [First Input Delay – czas do pierwszej interakcji] oraz LCP [Largest Contentful Paint], czyli największy wyrenderowany element na stronie internetowej w pierwszej widocznej części ekranu tzw. above the fold. Takim największym elementem może być np. obrazek, film, ale także tekst np. w formie dużego bloku.

Na przykładzie strony CNN największym elementem renderowanym na stronie jest ten oznaczony zielonym kolorem na ostatnim zrzucie przedstawiającym graficzny banner w pierwszej sekcji witryny. I od tego jak szybko ten banner zostanie załadowany zależy wynik LCP.

Brzmi prosto? Niestety w praktyce jest znacznie trudniej 🙃

W przypadku Largest Contentful Paint obowiązują poniższe zakresy ocen:

• Poniżej 2,5 sek.
• Pomiędzy 2,5 a 4 sek.
• Powyżej 4 sek.

Sprawdzić możesz je testując np. stronę w Google PageSpeed Insight. Wyniki powinny wyglądać tak jak po naszej optymalizacji:

Uprzedzamy jednak:

Bardzo często wyniki w Google PageSpeed Insight różnią się od tych prezentowanych w Google Search Console.

Oznacza to, że nawet jeżeli podczas sprawdzenia strona internetowa nie zaliczy pozytywnie tych testów to już w Google Search Console mogą one być oznaczone na zielono lub pomarańczowo. Wynika to z tego, że wpływ na faktyczną ocenę Twojej strony przez robota Google dla czynników FID, LCP i CLS mają realne testy wykonywane przez Google Chrome w momencie odwiedzania Twojej strony internetowej.

Z tego też powodu znacznie ważniejsze są tzw. Zgromadzone dane widoczne w narzędziu Google Search Console. Jeżeli jednak użytkowników strony oraz Google Chrome jest za mało to zobaczysz taki komunikat:

Zgromadzone daneRaport na temat użytkowania Chrome zawiera za mało danych o rzeczywistej szybkości tej strony.

oraz

Origin SummaryRaport na temat użytkowania Chrome zawiera za mało danych o rzeczywistej szybkości tego źródła.

Ok, przejdźmy teraz już do tzw. mięsa, czyli optymalizacji największej wyrenderowanej treści na stronie internetowej [LCP].

Największe wyrenderowanie treści krok po kroku

Poniższe porady pomogą Ci w identyfikacji oraz poprawie Largest Contentful Paint. Musisz jednak mieć na uwadze, iż wchodzimy tutaj na grunt technicznego SEO, które jet bardzo trudne i wymaga dużej wiedzy, często programistycznej. Jeżeli nie radzisz sobie w tych aspektach to skontaktuj się z nami, aby zoptymalizować z naszą pomocą LCP na stronie internetowej.

Poniższe porady dotyczące Largest Contentful Paint przedstawiamy na przykładzie naszej ulubionej platformy WordPress. No to start 🏁

Krok 1. Wykonaj kopię zapasową

Jak zawsze na początku jakichkolwiek prac na stronie zachęcamy do wykonania kopii zapasowej. Jeżeli Twoja strona internetowa pracuje na WordPress to możesz zrobić to korzystając z tego poradnika na naszym blogu: Kopie zapasowe WordPress.

Krok 2. Zaktualizuj WordPress

Gdy już Twoja strona posiada kopię zapasową pora na aktualizację systemu WordPress. Choć nie ma to wpływu bezpośrednio na LCP to jednak najnowsza wersja platformy zapewnia zawsze największą stabilność, wydajność oraz zgodność np. z PHP 8.

Z tego poradnika dowiesz się jak tego dokonać: Aktualizacja WordPress krok po kroku.

Krok 3. Zaktualizuj motyw

Kolejnym krokiem będzie aktualizacja motywu WP. Wynika to z faktu, iż wszystkie elementy Web Core Vitals odnoszą się głównie do kodu znajdujące się wewnątrz motywu, dlatego optymalizacja strony pod kątem wydajności w głównej mierze zależy od jakości stworzonego produktu.

Jeżeli jednak posiadasz płatny motyw premium dla WordPress to istnieje duże prawdopodobieństwo, iż jego twórca podjął już pewne działa, które mają na celu jego optymalizację pod kątem Largest Contentful Paint, First Input Delay oraz Cumulative Layout Shift. Warto więc dokonać jego aktualizacji, aby mieć pewność, że korzystasz z najnowszej i najlepsze wersji motywu.

W przypadku, gdy Twój motyw WordPress jest stworzony od podstaw to musisz skorzystać z pomocy naszych programistów, aby odpowiednio go poprawić i zoptymalizować. Skontaktuj się z nami, aby dowiedzieć się co możemy dla Ciebie zrobić w tej kwestii.

Krok 4. Sprawdź Google Search Console

Na sam początek sprawdź, czy jest w ogóle co poprawiać na Twojej stronie, bo czasami zdarza się, że strona z „automatu” spełnia wymagania Web Core Vitals. Przejdź do narzędzia Google Search Console i sprawdź, czy w zakładce Podstawowe wskaźniki internetowe są podstrony, które posiadają niską ocenę Largest Contetful Paint.

W tym celu wybierz np. Urządzenia mobilne [przycisk Pobierz raport], a następnie kliknij na dole w adresy URL dobrej, średniej lub złej jakości. U nas po optymalizacji wygląda to tak 💁‍♂️

Krok 5. Sprawdź szybkość URL

Jeżeli w Google Search Console znajdują się adresy URL złej lub średniej jakości to skopiuj je wszystkie np. do programu tekstowego, a następnie przetestuj je za pomocą narzędzia Google PagepSpeed Insight, które powie Ci więcej na temat ich optymalizacji.

Wskazówki, które tam znajdziesz mogą się okazać bardzo przydatne o czym przeczytasz więcej w poradniku Przyspieszanie WordPress krok po kroku.

Krok 6. Otwórz konsolę przeglądarki

Bardzo dużo informacji o elementach Google Web Core Vitals możesz odczytać korzystając z konsoli przeglądarki internetowej np. Google Chrome. W tym celu otwórz adres URL, który sprawia problemy, a następnie konsolę. Przejdź do zakładki Performance i przeładuj stronę za pomocą przycisk w lewym górnym rogu konsoli.

Gdy to zrobisz, po chwili na linii czasu ujrzysz podobny widok.

Możesz znaleźć tam m.in. elementy takie jak First Paint, First Contentful Paint, Cumulative Layout Shift oraz oczywiście Largest Contentful Paint. Gdy najedziesz myszką na jeden z nich na stronie podświetli się element, który został nim oznaczony. W ten sposób dosyć łatwy i szybki sposób możesz zidentyfikować content, który obniża wynik LCP w Google.

Niestety, do optymalizacji jeszcze długa droga, a wydłużyć ją może fakt, że każda ze stron może posiadać inny element LCP.

Krok 7. Zmień hosting na lepszy

Z naszej wieloletniej praktyki z WordPress i stronami www wiemy, że hosting ma największy wpływ na wydajność strony internetowej. Z tego powodu zanim wykonasz żmudną pracę na stronie warto sprawdzić najlepszy hosting WordPress i zmienić usługodawcę.

Pozwoli Ci to zyskać dodatkowe pkt. w Google PageSpeed Insight, a bardzo często także poprawić wynik LCP, CLS i FID. Warto? Warto ☺️

Krok 8. Przyspiesz stronę www

Istnieje wiele sposób na to jak możesz przyspieszyć swoją stronę internetową. Możesz zrobić to wdrażając na swojej stronie internetowej CloudFlare lub też eliminując zasoby blokujące renderowanie np. za pomocą wtyczki Autoptimize, która dodatkowo pozwoli Ci na minifikację kodu HTML, CSS i JS. Pamiętaj także, aby koniecznie skorzystać z wtyczki do cache, które znakomicie może uzupełniać działanie CloudFlare. A jeżeli skorzystasz już z usługi CF to koniecznie włącz na niej CDN dla wszystkich elementów statycznych na stronie www.

Bardzo pomocne w przypadku Largest Contentful Paint okazuje się wdrożenie Critical CSS, które pozwala na wczesne załadowanie widocznych elementów above the fold. Niestety, jest to proces trudny i wymaga zaawansowanej wiedzy programistycznej.

W przypadku wyniku Largest Contentful Paint bardzo ważna jest także optymalizacja czasu ładowania fontów np. za pomocą poniższego atrybutu rel=”preload”. Wszystkie te kroki pozwolą Ci poprawić czas wczytywania strony internetowej, zmniejszyć jej rozmiar oraz poprawić ocenę strony przez robota Google i Twoich klientów.

Krok 9. Dodaj preload treści

O tym czym jest rel=”preload” pisaliśmy w poradniku Atrybut rel=”preload” – kiedy, jak i dlaczego go stosować jeszcze przed prezentacją Web Core Vitals. To bardzo prosta sztuczka, która pozwala znacząco przyspieszyć całą stronę internetową, a w przypadku Largest Contentful Paint poprawić nieznacznie jego wynik.

Atrybut rel=”preload” sprawdzi się głównie w sytuacji, gdy elementem LCP jest obrazek lub film. Jego wczesne załadowanie doda Twojej stronie kilka pkt. ☺️

Krok 10. Stosuj atrybut fetchPriority

Jedną z najskuteczniejszych metod walki ze słabym wynikiem dla Largest Contentful Paint jest poprawne stosowanie atrybutu fetchPriority. To stosunkowo nowy atrybut w specyfikacji HTML, jednak pozwala przynieść spektakularne efekty w optymalizacji strony internetowej. O tym jak i kiedy z niego korzystać przeczytasz w naszym poradniku, który szerzej opisuje Atrybut fetchPriority.

Krok 10. Zoptymalizuj obrazki

W większości przypadków za słaby wynik Largest Contentful Paint [Największe wyrenderowanie treści] będzie odpowiadać obrazek znajdujący się w pierwszej części ekranu. Takie elementy z rozciągniętymi na całą szerokość zdjęciami nazywamy bannerami lub też sekcjami hero. Wiele współczesnych stron internetowych w taki właśnie sposób prezentuje informacje na temat marki lub oferty.

Niestety, duże i niezoptymalizowane zdjęcia wpływają negatywnie na czas ładowania strony internetowej, dlatego konieczne jest skorzystanie z naszego poradnika Optymalizacja zdjęć WordPress. Znajdziesz w nim informacje jak zoptymalizować obrazki na przykładzie strony WordPress tak, aby nie ważyły więcej niż 150 KB.

Pamiętaj, aby zoptymalizowane były wszystkie grafiki znajdujące się na stronie internetowej, a nie tylko te w pierwszej sekcji strony. Faktem jednak jest, iż to właśnie elementy above the fold mają największy wpływ na wynik LCP. Jeżeli zależy Ci na jeszcze mocniejszym zoptymalizowaniu obrazków na stronie to pomyśl nad wdrożeniem nowoczesnych formatów zdjęć oraz predefiniowanych rozmiarach grafik dla różnych rozdzielczości ekranu.

Krok 11. Unikaj zbędnych skryptów

Które mają wpływ na ładowanie treści dla elementów LCP. Skrypty oprócz tego, że muszą być załadowane to także potrzebują pewien czas na ich wykonanie. Dlatego też warto skorzystać ze statycznego kodu HTML5 oraz CSS3, które pozwala w większości przypadków osiągnąć zadowalające efekty bez korzystania z JavaScript.

To tyle ☺️

Popraw razem z nami Largest Contentful Paint

Daj znać, czy udało się Cię samodzielnie poprawić wynik Largest Contentful Paint. Jeżeli Twoja strona internetowa wciąż świeci się na czerwono lub pomarańczowo w Google Search Console i PageSpeed Insight to konieczna jest nasza pomoc 🤝 Skontaktuj się z nami i opisz swoje potrzeby, a my przygotujemy dla Ciebie plan działania 🤓

Do usłyszenia niebawem ✋ i niech prędkość 🚀 będzie z Tobą.