Każdy, kto prowadzi witrynę WordPress, nie może uniknąć spojrzenia na Core Web Vitals Google. Szczególnie jeden z trzech wskaźników jest wart bliższego przyjrzenia się: Largest Contentful Paint odgrywa ważną rolę nie tylko dla czasu ładowania, ale także dla Twojego rankingu Google. Jeśli chcesz wiedzieć, co kryje się za tym wskaźnikiem i jak możesz poprawić swój Largest Contentful Paint, to trafiłeś we właściwe miejsce. W tym artykule wyjaśniamy wszystkie ważne pytania i ujawniamy środki, które operatorzy witryn mogą podjąć, aby osiągnąć dobre wartości.

Jaka jest największa farba Contentful Paint? 

Gdy strona internetowa jest wywoływana, zwykle zajmuje tylko kilka sekund, aby została całkowicie skonfigurowana w przeglądarce. Niewidoczne dla odwiedzającego, liczne procesy mają miejsce w tym czasie. Largest Contentful Paint (LCP) odnosi się do jednego z ostatnich zdarzeń przed całkowitym załadowaniem strony: opisuje czas potrzebny do całkowitego załadowania i uwidocznienia największego elementu na stronie . Zazwyczaj jest to blok tekstu, obraz lub wideo.

Sprawia to, że Largest Contentful Paint jest jednym z najważniejszych wskaźników czasu ładowania strony. Wraz z First Input Delay (FID) i Cumulative Layout Shift (CLS), jest to również jeden z najważniejszych wskaźników czasu ładowania strony. Core Web Vitalsktórych Google używa do oceny doświadczenia użytkownika (doświadczenia strony).

Farba o największej zawartości vs. farba o pierwszej zawartości

Termin, który jest również często używany w związku z czasami ładowania i wydajnością strony internetowej i może być łatwo mylony, to First Contentful Paint (FCP). Dlatego też ponownie wyraźnie rozróżniamy te dwa wskaźniki dla lepszego zrozumienia:

• Largest Contentful Paint mierzy czas potrzebny na całkowite załadowanie największego elementu, tj. głównej zawartości strony.
• First Contentful Paint odnosi się do czasu, jaki upływa do wyświetlenia pierwszego elementu na stronie - niezależnie od jego zawartości.

Twój LCP prawie zawsze będzie nieco wyższy niż twój FCP, ponieważ główna zawartość zwykle nie jest pierwszym elementem do załadowania.

Dlaczego największa farba Contentful Paint jest ważna?

Pewnie zadajesz sobie pytanie, dlaczego powinieneś przyjrzeć się bliżej Largest Contentful Paint? Mamy dla Ciebie dwa dobre powody. Oba pomogą Twojej witrynie (i Twojej firmie) zyskać widoczność i zwiększyć współczynnik konwersji.

1. lepsze doświadczenie użytkownika

Largest Contentful Paint jest ważnym wskaźnikiem tego, jak inni korzystają z Twojej witryny. Podczas gdy odwiedzający zwykle nie dbają o to, ile czasu zajmuje pełne załadowanie każdego skryptu i elementu na stronie, dbają o to, ile czasu zajmuje im korzystanie z witryny i przeglądanie najważniejszych treści. Zależy im jednak na czasie potrzebnym do zrozumienia witryny i wyświetlenia najważniejszych treści.

Jeśli zoptymalizujesz swoją witrynę tak, aby LCP był jak najlepszy (więcej na ten temat później), zapewnisz odwiedzającym solidne wrażenia użytkownika. Jeśli zmusisz ich do czekania pięć sekund lub dłużej na główną treść witryny, odbiją się i poszukają gdzie indziej. Są więc dalecy od pobierania treści, subskrybowania, subskrybowania Twoich kanałów, kontaktowania się z Tobą lub kupowania Twoich produktów.

2. zoptymalizowane rankingi Google

Treść jest i pozostanie najważniejszym czynnikiem rankingowym dla Google. Jeśli jednak dwie strony internetowe osiągają równie dobre wyniki pod względem treści, ta z lepszymi podstawowymi parametrami sieciowymi przesuwa się w górę w rankingu. Dzieje się tak, ponieważ wskaźniki te są uważane przez Google za oficjalne czynniki rankingowe. Największy wpływ na wynik ma LCP: W rankingu wydajności Google Lighthouse wartość ta stanowi około 25 procent.

Tak więc solidny Core Web Vitals - a zwłaszcza solidny LCP - może pomóc Ci osiągnąć lepsze pozycje w wyszukiwarkach.

Jak zmierzyć największą farbę Contentful Paint?

Możesz mierzyć swój LCP na różne sposoby. Dobrym punktem wyjścia są narzędzia Google: Google Search Console, Google PageSpeed Insights i Lighthouse. Ponadto WebPageTest oferuje dobre zaawansowane opcje analizy.

Google Search Console

Google Search Console zapewnia przegląd wydajności całej Twojej witryny. Możesz znaleźć informacje na temat Core Web Vitals na lewym pasku nawigacyjnym. Jeśli otworzysz kartę, otrzymasz graficzny przegląd swoich adresów URL i stosunkowo szybko zobaczysz, które adresy URL są problematyczne. Możesz przyjrzeć się im bliżej w następnym kroku.

Jeśli nie masz skonfigurowanego Google Search Console dla swojej witryny, możesz również uzyskać wszystkie informacje za pośrednictwem Lighthouse lub PageSpeed Insights.

Google PageSpeed Insights

Oprócz czystych wartości LCP, Google PageSpeed Insights dostarcza Ci również przydatnych wskazówek i porad, jak poprawić Largest Contentful Paint. Google informuje również, który konkretny element został użyty do testu. Możesz więc od razu zobaczyć, gdzie możesz rozpocząć optymalizację.

Możesz użyć tego narzędzia w trzech prostych krokach:

1. Zadzwoń PageSpeed Insights na.
2. Wprowadź adres URL strony, którą chcesz sprawdzić.
3. Rozpocznij test, klikając przycisk Analizuj.

Następnie Google pokaże Ci wszystkie Core Web Vitals na pierwszy rzut oka, zarówno dla komputerów stacjonarnych, jak i urządzeń mobilnych. Zdecydowanie powinieneś przyjrzeć się obu wersjom.

Aby znaleźć największy element Contentful Paint, przewiń stronę wyników do sekcji Diagnostyka. Tam, w sekcji Largest Contentful Paint element, wymieniony jest największy element w rzutni.

Uwaga: Element może być inny dla urządzeń mobilnych i komputerów stacjonarnych. Powinieneś więc zawsze sprawdzać oba te elementy.

Latarnia morska

Dzięki Lighthouse możesz testować i analizować LCP we własnej przeglądarce. Narzędzie jest już zintegrowane z narzędziami deweloperskimi Google Chrome.

W ten sposób postępujesz w przeglądarce:

1. Otwórz adres URL, który chcesz sprawdzić (najlepiej w oknie incognito).
2. Otwórz Narzędzia dla programistów Chrome (DevTools). Najszybszym sposobem na to jest kliknięcie prawym przyciskiem myszy w dowolnym miejscu na stronie, a następnie kliknięcie opcji Eksploruj w otwartym menu.
3. Następnie przejdź do Narzędzi dla programistów i wybierz zakładkę Latarnia morska.
4. Wybierz, czy LCP ma być testowany dla widoku stacjonarnego czy mobilnego. W sekcji Kategorie wystarczy zaznaczyć opcję Wydajność.
5. Rozpocznij analizę, klikając przycisk Wygeneruj raport.

Test trwa od 15 do 20 sekund, w zależności od witryny. Następnie możesz wyświetlić i ocenić wszystkie wartości, a także, na przykład, porównać je z wynikami z Search Console (jeśli ją skonfigurowałeś).

WebPageTest

WebPageTest jest szczególnie przydatny, jeśli chcesz skonfigurować test indywidualnie i zagłębić się w analizę wydajności. Tutaj możesz również zdefiniować metryki, takie jak lokalizacja testu, prędkość połączenia lub samo urządzenie w opcjach zaawansowanych.

Wyniki są również nieco bardziej wszechstronne dzięki WebPageTest: narzędzie pokazuje dokładnie, jak ładuje się Twoja witryna, które elementy są ładowane i jak szybko wszystko się dzieje. Oprócz wartości LCP, raport zawiera również wiele innych wskaźników - w tym wykres wodospadowy. Możesz dowiedzieć się dokładnie, co to jest i jak prawidłowo to przeanalizować w naszym artykule Optymalizacja WordPress: Jak przeanalizować swoją witrynę w 7 sekund.

Jaka jest dobra wartość LCP?

Google w dużej mierze dyktuje sposób oceny LCP:

• Lakier o największej zawartości poniżej 2,5 sekundy jest uważany za dobry i pożądany.
• Wartości od 2,5 do 4 sekund są nadal zadowalające, ale można je zoptymalizować.
• Jeśli wartość LCP przekracza 4 sekundy, jest ona klasyfikowana jako słaba i zdecydowanie powinna zostać poprawiona.

Skąd się bierze słaby LCP? 

Largest Contentful Paint każdej strony internetowej można podzielić na cztery podelementy, które razem dają pełny czas LCP:

• Czas do pierwszego bajtu (TTFB): Jest to czas od żądania użytkownika do pierwszej odpowiedzi serwera, tj. do pierwszego załadowanego bajtu danych. Idealnie, TTFB powinien stanowić około 40 procent czasu LCP.
• Resource Load Delay: Hiermit ist die Verzögerung beim Laden der Ressourcen gemeint – also die Zeitspanne zwischen dem ersten Byte und dem Moment, in dem der Browser beginnt, das LCP-Element zu laden. Diese sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.
• Resource Load Time : Ta wartość opisuje czas potrzebny do załadowania samego elementu LCP. Ponieważ, podobnie jak w przypadku TTFB, jest to żądanie sieciowe, proces ten może również zająć około 40 procent całkowitego czasu LCP.
• Element Render Delay: Damit wird ausgedrückt, wie viel Zeit zwischen dem Ende des Ladevorgangs und dem vollständigen Rendern des LCP-Elements noch vergeht. Auch diese Verzögerung sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.

Na każdy z tych podelementów wpływają inne czynniki - lista możliwych przyczyn słabego LCP jest więc praktycznie nieskończona. W większości przypadków jest to jednak jedna (lub więcej) z czterech poniższych przyczyn:

• Twój serwer odpowiada zbyt wolno (TTFB).
• JavaScript i CSS blokują ładowanie strony (opóźnienie ładowania zasobów).
• Na Twojej stronie znajduje się wiele dużych zasobów lub wymagających wizualnie treści, których ładowanie zajmuje dużo czasu (czas ładowania zasobów).
• Renderowanie po stronie klienta sprawia, że pełne wyświetlenie elementu LCP trwa dłużej (Element Render Delay).

Jak ulepszyć największą farbę Contentful Paint?

Wiesz już, z czego składa się Largest Contentful Paint i co może powodować jego słabą jakość. Przyjrzyjmy się teraz, co możesz zrobić, jeśli chcesz poprawić Largest Content ful Paint dla swojej witryny WordPress. Oto najważniejsze wskazówki i środki:

Polegaj na szybkim hostingu WordPress

Podstawą dobrego LCP jest krótki czas ładowania, a dokładniej krótki TTFB. Wysokowydajny hosting może zrobić różnicę. Dlatego też sprawdź, czy Twój obecny hosting niepotrzebnie Cię nie spowalnia. Jeśli tak, powinieneś rozważyć przejście na wyspecjalizowany zarządzany hosting WordPress, który jest dostosowany do Twoich potrzeb.

Gdy hostujesz swoją witrynę pod adresem Raidboxes , możesz oczekiwać wszechstronnej infrastruktury dostosowanej do WordPressa, która się opłaca: Po przeniesieniu na nasze serwery, strony WordPress ładują się zwykle do czterech razy szybciej - bez żadnej dodatkowej optymalizacji.

Włącz buforowanie

Jeśli chcesz, aby Twoja witryna WordPress miała dobry LCP i ładowała się szybko, prawie nie ma możliwości obejścia porządnego buforowania WordPress. Poprawia on czas odpowiedzi serwera poprzez buforowanie często używanych plików i szybsze ich pobieranie następnym razem. Możesz użyć do tego wtyczki lub wybrać hosting z buforowaniem po stronie serwera, taki jak oferuje Raidboxes .

Wyeliminuj JavaScript i CSS blokujące renderowanie.

Każda strona internetowa składa się z elementów HTML, JavaScript i CSS. Ten ostatni reguluje prezentację strony, JavaScript jest odpowiedzialny za elementy dynamiczne (np. animacje lub formularze). Jeśli JavaScript i/lub CSS są ładowane przed elementem LCP, mimo że nie są jeszcze potrzebne, komplikują i spowalniają renderowanie.

Powinieneś zatem usunąć niepotrzebne skrypty JavaScript i CSS i zachować jak najmniejszą objętość plików. Możesz również przesunąć skrypty w dół strony lub opóźnić je, aby nie blokowały głównej treści. Najłatwiej to zrobić za pomocą wtyczek takich jak Autoptimize lub WP Rocket.

Możesz dowiedzieć się więcej o JavaScript i CSS w naszym artykule na temat redukcji CSS, HTML i JavaScript.

Optymalizacja obrazów

Im większe obrazy na twojej stronie, tym większe prawdopodobieństwo, że będą miały zły LCP. Dlatego zawsze powinieneś kompresować swoje obrazy tak dobrze, jak to możliwe. Upewnij się jednak, że utrata jakości nie jest zbyt duża. Jeśli możesz określić, czym jest twój element LCP i jest to obraz, możesz specjalnie zmniejszyć jego rozmiar. W ten sposób przeglądarka potrzebuje mniej czasu na jego pobranie, a twoja wartość LCP zostanie zmniejszona.

Możesz dowiedzieć się, jaki jest idealny rozmiar i w jakim formacie należy przesyłać obrazy w artykule Rozmiary obrazów WordPress: Jak działają obrazy w WordPress i najlepsze praktyki dla Twojej witryny. Ponadto w naszym magazynie znajdziesz również przegląd 6 popularnych wtyczek do kompresji obrazu.

Nadaj priorytet największemu elementowi

Największy element na stronie powinien być łatwy do znalezienia i załadowania tak wcześnie, jak to możliwe. Domyślnie jednak zazwyczaj tak nie jest, na przykład w przypadku obrazów. Możesz jednak użyć atrybutu fetchpriority, aby wskazać przeglądarce, że niektóre elementy powinny być pobierane z wyższym priorytetem.

Mogłoby to wyglądać następująco:

<img fetchpriority=“high“ src=“/path/to/hero-image.webp“>

(Uwaga: wstaw to polecenie w WordPress jako blok "Kod" i wybierz HTML w opcjach bloku dla "Długie oko"), a następnie zostanie odpowiednio sformatowane

Ale uważaj: nie powinieneś nadawać priorytetu więcej niż jednemu lub dwóm obrazom do przodu, w przeciwnym razie sygnał straci swój efekt. I odwrotnie, możesz także obniżyć priorytet obrazów. Jest to przydatne na przykład w przypadku obrazów w suwakach karuzelowych, które znajdują się na początku strony, ale nie są bezpośrednio widoczne na początku. Nadając im niższy priorytet, zwalniasz przepustowość dla niezbędnych zasobów.

Wniosek: Popraw czas reakcji i zoptymalizuj kod

Najważniejsze jest to, że Largest Contentful Paint może być kluczowym czynnikiem, jeśli chodzi o Twój ranking Google i wrażenia użytkownika. Warto więc przyjrzeć się bliżej i zrozumieć ten wskaźnik.

Im bardziej szczegółowo zagłębiasz się w Largest Contentful Paint, tym bardziej oczywiste staje się, że istnieje niemal nieskończona liczba mniejszych i większych śrubek, które możesz przekręcić, aby zoptymalizować LCP. Niektóre z nich można znaleźć szybciej, inne wymagają głębszej wiedzy technicznej. Dlatego też niniejszy artykuł zawiera tylko pierwszy przegląd i na początek możesz skoncentrować się na dwóch rzeczach:

1. Przyspiesz czas reakcji swojego serwera.
2. Zoptymalizuj kod swojej witryny, aby element LCP był wyświetlany tak szybko, jak to możliwe.

Najważniejszym czynnikiem wpływającym na czas odpowiedzi jest Twój hosting. Dzięki wysokowydajnemu hostingowi WordPress, takiemu jak ten, który oferujemy pod adresem Raidboxes , nie musisz martwić się długim czasem oczekiwania na odpowiedź serwera. Warto więc zmienić hosting.