Wyjaśnienie największej zawartości treści: jak poprawić swój czas

Masz problem z ulepszeniem największej treści w swojej witrynie? A może nie wiesz, co oznacza „Największa zawartość treści” i dlaczego w ogóle musisz się tym przejmować?

Bez względu na to, skąd zaczynasz, ten post jest dla Ciebie, ponieważ dowiesz się wszystkiego, co musisz wiedzieć o największej zawartości treści.

Obejmuje to, co oznacza „Największa treść”, dlaczego ma to znaczenie, jak ją mierzyć i jak ją ulepszyć.

Możesz użyć poniższego spisu treści, aby przejść do określonej sekcji na podstawie aktualnego poziomu wiedzy. Lub czytaj dalej, aby zacząć od początku.

Co to jest największa farba zawierająca treści (LCP)? Wyjaśnienie największego treściwego znaczenia farby

Największe malowanie treści to wskaźnik wydajności, który mierzy, jak długo ładuje się główna zawartość strony internetowej.

Największa zawartość treści jest częścią wskaźników Google Core Web Vitals, wraz z skumulowanym przesunięciem układu (CLS) i opóźnieniem przy pierwszym wejściu (FID).

Na bardziej technicznym poziomie, największe malowanie zawartości mierzy czas, jaki upływa od zainicjowania ładowania strony przez użytkownika do wyrenderowania największego bloku tekstu, obrazu lub wideo w widocznym obszarze.

Co oznacza „główna treść” w kontekście LCP?

Cóż, główna treść będzie zależała od konkretnej strony, ale może to być dowolna z poniższych:

• Tekst — a dokładniej wszelkie elementy na poziomie bloku zawierające węzły tekstowe lub inne elementy tekstowe na poziomie wiersza.
• Obraz – elementy wewnątrz elementu <img> lub elementy <image> wewnątrz elementu <svg>.
• Video – dowolne elementy <video> (wykorzystuje obraz plakatu).
• Element z obrazem tła – tylko wtedy, gdy jest ładowany przez funkcję CSS url() (nie dotyczy gradientów CSS).

W dalszej części tego wpisu dowiesz się, jak znaleźć dokładnie największy element malowania treści dla dowolnej strony w Twojej witrynie.

Największa treść zawierająca treść vs pierwsza treść zawierająca treść

Jednym z częstych pytań, które możesz zadać, jest różnica między największą zawartością a pierwszą zawartością, innym powszechnym wskaźnikiem wydajności.

Chociaż te dwa terminy są podobne, kluczowa różnica polega na tym, że największa zawartość strony mierzy czas ładowania „głównej zawartości” strony, a pierwsza treść strony mierzy, jak długo trwa ładowanie „pierwszego obiektu” ( niezależnie od tego, czy to główna treść ).

Zasadniczo:

• LCP = tylko główna treść
• FCP = pierwsza część treści, niezależnie od tego, czym jest ta treść

W związku z tym czas LCP prawie zawsze będzie nieco wyższy niż czas FCP, ponieważ element „main content” zazwyczaj nie ładuje się jako pierwszy.

Dlaczego największy czas malowania zawartości witryny ma znaczenie?

Istnieją dwa główne powody, dla których czas największego malowania zawartości Twojej witryny ma znaczenie:

1. Doświadczenie użytkownika
2. Optymalizacja wyszukiwarki

Doświadczenie użytkownika

Najważniejszym powodem, dla którego powinieneś zwracać uwagę na czas największego wyświetlenia treści w witrynie, jest to, że ten wskaźnik jest dobrym wskaźnikiem pozwalającym zrozumieć wrażenia użytkowników, jeśli chodzi o wydajność witryny.

Większość użytkowników nie dba o to, ile czasu zajmuje Twojej witrynie pełne załadowanie każdego pojedynczego skryptu i elementu. Zamiast tego dbają o to, ile czasu zajmie im uzyskanie wartości z Twojej witryny.

Largest Contentful Paint wykonuje dobrą robotę, próbując zmierzyć ten moment „wartości”, sprawdzając, ile czasu zajmuje załadowanie głównej zawartości.

Jeśli zoptymalizujesz swoją witrynę, aby uzyskać jak najkrótszy czas malowania największej zawartości, możesz być całkiem pewny, że zapewniasz użytkownikom solidne wrażenia z korzystania z Twojej witryny, przynajmniej jeśli chodzi o wydajność (będziesz także potrzebować projektu przyjaznego dla klienta i dobra użyteczność).

Oczywiście nie oznacza to, że należy ignorować inne wskaźniki wydajności. Zawsze zalecamy holistyczne spojrzenie na wydajność Twojej witryny i wąskie gardła, dlatego stworzyliśmy własne narzędzie do monitorowania wydajności aplikacji (APM), które jest dostępne bezpłatnie, jeśli korzystasz z hostingu Kinsta – Kinsta APM.

Optymalizacja wyszukiwarek (SEO)

Na froncie optymalizacji pod kątem wyszukiwarek, Largest Contentful Paint jest częścią trio wskaźników Google Core Web Vitals, które Google zaczęło wykorzystywać jako czynnik rankingu SEO w aktualizacji algorytmu Page Experience w 2022 roku.

Oznacza to, że słabe czasy malowania największej treści mogą obniżać wydajność Twojej witryny w wynikach wyszukiwania Google.

Podczas gdy inne czynniki, takie jak jakość/trafność treści i linki zwrotne, nadal odgrywają znacznie większą rolę w rankingu Twojej witryny, ważne jest, aby zoptymalizować czasy największego malowania zawartości witryny, aby zapewnić maksymalne wykorzystanie działań SEO.

Co może wpłynąć na największe wyniki malowania zawartości?

Dwa „główne” rodzaje problemów mogą mieć wpływ na czas największej zawartości strony:

1. Czas potrzebny serwerowi na odpowiedź z początkowym dokumentem HTML.
2. Czas ładowania rzeczywistego zasobu LCP.

Pierwszy typ problemu dotyczy czasu odpowiedzi serwera, czyli czasu do pierwszego bajtu (TTFB). Zanim przeglądarka użytkownika pomyśli o załadowaniu głównej zawartości, musi najpierw uzyskać odpowiedź z serwera.

Oto niektóre z typowych problemów, które mają na to wpływ:

• Nieużywanie buforowania stron – nieużywanie buforowania stron zmusza serwer do wykonania większej „pracy”, zanim będzie mógł odpowiedzieć za pomocą dokumentu HTML.
• Wolny hosting – wolny dostawca usług hostingowych zawsze będzie miał wolne TTFB, niezależnie od tego, co robisz.
• Brak CDN – sieć dostarczania treści (CDN) może przyspieszyć TTFB, udostępniając strony ze swojej globalnej sieci, zamiast wymagać od użytkowników pobierania ich z serwera źródłowego Twojej witryny.

Po dostarczeniu przez serwer witryny początkowego dokumentu HTML mogą pojawić się dalsze wąskie gardła, jeśli chodzi o ładowanie rzeczywistego głównego elementu treści.

Oto niektóre z typowych problemów, które mają na to wpływ:

• JavaScript lub CSS blokujący renderowanie (lub ogólnie niezoptymalizowany/niepotrzebny kod) – jeśli przeglądarka użytkownika musi pobrać i/lub przetworzyć niepotrzebny JavaScript lub CSS, zanim będzie mogła załadować główny element, spowolni to Twój LCP.
• Niezoptymalizowane obrazy — jeśli elementem LCP jest obraz, użycie niezoptymalizowanych obrazów spowolni Twój czas, ponieważ pobieranie większych obrazów zajmuje więcej czasu.
• Niezoptymalizowane ładowanie czcionek — jeśli elementem LCP jest tekst, ładowanie niestandardowych czcionek w niezoptymalizowany sposób może wydłużyć czas wyświetlania tego tekstu.
• Pliki nieskompresowane – jeśli nie używasz technologii kompresji, takich jak Gzip lub Brotli, wydłuży to czas pobierania plików z Twojej witryny przez przeglądarkę użytkownika.

W zależności od witryny mogą wystąpić wąskie gardła w obu obszarach lub tylko w jednym z nich. Dowiesz się, jak rozwiązać wszystkie te problemy nieco później w tym poście.

Jaki jest dobry, największy czas malowania treści?

Google definiuje „dobry” czas największego malowania zawartości jako poniżej 2,5 sekundy.

Jeśli czas największego malowania zawartości Twojej strony wynosi od 2,5 do 4,0 sekund, Google klasyfikuje to jako „Wymaga poprawy”. A jeśli czas Twojej strony przekracza 4,0 sekundy, Google definiuje to jako „słaby”.

Oto grafika od Google, która pokazuje to wizualnie:

Jak zmierzyć największą zawartość farby: najlepsze narzędzia testowe LCP

Istnieje wiele narzędzi, których możesz użyć do przetestowania wydajności witryny pod kątem malowania największej treści — przejrzyjmy niektóre z najbardziej przydatnych…

Statystyki PageSpeed

PageSpeed ​​​​Insights to jedno z najlepszych narzędzi do oceny największej treści, ponieważ oferuje cztery przydatne informacje:

1. W raporcie dotyczącym interfejsu użytkownika przeglądarki Chrome możesz zobaczyć największe czasy malowania zawartości witryny przez rzeczywistych użytkowników ( jeśli witryna ma wystarczającą liczbę odwiedzin, aby można ją było uwzględnić w raporcie ).
2. Możesz przeprowadzić symulowane testy, aby zobaczyć, jak działa Twoja witryna.
3. Google poinformuje Cię, jakiego elementu LCP używa do testu, dzięki czemu dowiesz się, który element należy zoptymalizować.
4. Google poda sugestie, jak poprawić czas LCP.

Oto jak go używać:

1. Przejdź do witryny PageSpeed ​​Insights.
2. Wprowadź adres URL strony, którą chcesz przetestować.
3. Kliknij Analizuj .

Google wyświetli wtedy wyniki zarówno dla urządzeń mobilnych, jak i komputerów stacjonarnych – pamiętaj, aby zaznaczyć oba.

Aby znaleźć główny element używany przez Google do obliczania LCP, przewiń w dół do sekcji Diagnostyka i rozwiń sekcję Największy element zawierający treści :

Ponownie, upewnij się, że sprawdziłeś zarówno urządzenie mobilne, jak i komputer stacjonarny, ponieważ element LCP może być inny dla każdego z nich.

Narzędzia programistyczne Chrome

Możesz także przetestować największy czas malowania treści bezpośrednio z Chrome Developer Tools, korzystając z karty Wydajność lub funkcji audytu Lighthouse. Zalecamy korzystanie z karty Wydajność , ponieważ zawiera ona więcej informacji.

Oto jak zacząć:

1. Otwórz stronę, którą chcesz przetestować.
2. Otwórz Narzędzia dla programistów Chrome.
3. Przejdź do zakładki Wydajność .
4. Upewnij się, że pole Web Vitals jest zaznaczone.
5. Kliknij przycisk Załaduj ponownie ( wskazany poniżej ).

Powinieneś teraz zobaczyć pełną analizę swojej witryny.

Jeśli najedziesz kursorem na LCP na karcie Sieć , zobaczysz godzinę:

Jeśli najedziesz kursorem na LCP na karcie Timings , zobaczysz rzeczywisty element LCP:

Konsola wyszukiwania Google

Chociaż Google Search Console nie pozwala testować pojedynczej strony pod kątem największego czasu malowania treści, jest naprawdę przydatna do oceny wydajności całej witryny.

Każda strona w Twojej witrynie będzie miała inny czas LCP, więc nie możesz po prostu przetestować swojej strony głównej i powiedzieć, że to koniec.

Dzięki Google Search Console będziesz mógł zobaczyć, gdzie każda strona w Twojej witrynie mieści się w kategoriach Google „Dobra”, „Wymaga poprawy” i „Słaba”. Dane dotyczące wydajności pochodzą z raportu Chrome UX, więc opierają się na rzeczywistych danych użytkowników.

Jeśli jeszcze tego nie zrobiłeś, musisz najpierw zweryfikować swoją witrynę za pomocą Google Search Console.

Gdy już to zrobisz, oto jak uzyskać dostęp do raportu LCP:

1. Otwórz Google Search Console dla swojej witryny.
2. Przejdź do Core Web Vitals na karcie Doświadczenie .
3. Kliknij Otwórz raport obok wykresu Mobile lub Desktop.
4. Poszukaj problemów w sekcji Dlaczego adresy URL nie są uważane za dobre . Jeśli klikniesz problem, zobaczysz więcej informacji o tym, które adresy URL powodują problemy.

*Pamiętaj, aby sprawdzić zarówno wyniki na komputerze, jak i na urządzeniach mobilnych, ponieważ dane mogą się różnić w obu przypadkach.

Test strony internetowej

WebPageTest to kolejna przydatna opcja do przeprowadzania symulowanych testów wydajności.

W przeciwieństwie do PageSpeed ​​Insights, WebPageTest pozwala w pełni dostosować różne wskaźniki testowe, takie jak lokalizacja testu, prędkość połączenia, urządzenie i inne. To główna zaleta używania go w porównaniu z innymi narzędziami — daje więcej opcji konfiguracji testu.

Oto jak przeprowadzić test:

1. Przejdź do testu strony internetowej.
2. Dodaj adres URL strony, którą chcesz przetestować.
3. Rozwiń opcje konfiguracji zaawansowanej , aby w pełni skonfigurować test.

Na stronie wyników zobaczysz dane LCP wraz z mnóstwem innych wskaźników wydajności (w tym analizy kaskadowej).

Jak znaleźć największy treściwy element malarski

Jeśli chcesz ulepszyć największą zawartość, bardzo pomocne może być dokładne poznanie elementu, którego Google używa do obliczania czasu LCP.

Na przykład, jeśli wiesz, że Google używa Twojego obrazu bohatera jako elementu LCP na Twojej stronie głównej, wiesz, że jeśli chcesz poprawić czasy LCP swojej strony głównej, musisz jak najszybciej znaleźć sposób wyświetlania tego obrazu bohatera.

Jak wspomnieliśmy wcześniej, możesz znaleźć swój największy element graficzny, korzystając z PageSpeed ​​Insights lub Chrome Developer Tools.

Upewnij się, że sprawdzasz zarówno wyniki na urządzeniach mobilnych, jak i na komputerach, ponieważ Twój element LCP może być inny na różnych urządzeniach.

Jak ulepszyć największą zawartość w WordPressie (lub innych platformach)

Teraz, gdy wiesz już wszystko na temat największej treści, przejdźmy do kilku praktycznych wskazówek, jak ulepszyć największą treść w WordPress.

Chociaż w przypadku tych wskazówek skupimy się na WordPressie, wszystkie wskazówki są uniwersalne i mają zastosowanie do innych typów stron internetowych.

Skonfiguruj buforowanie, aby skrócić czas odpowiedzi serwera

Buforowanie może skrócić czas odpowiedzi serwera, zmniejszając ilość pracy, jaką musi wykonać serwer, zanim będzie mógł dostarczyć gotowy dokument HTML do przeglądarek odwiedzających.

Jeśli hostujesz swoją witrynę WordPress za pomocą Kinsta, nie musisz się martwić konfiguracją buforowania, ponieważ Kinsta automatycznie implementuje dla Ciebie zoptymalizowane buforowanie.

Jeśli hostujesz gdzie indziej, możesz włączyć buforowanie w swojej witrynie za pomocą bezpłatnej wtyczki, takiej jak WP Super Cache lub płatnej wtyczki, takiej jak WP Rocket.

Aby uzyskać więcej opcji, sprawdź nasz post z najlepszymi wtyczkami buforującymi WordPress.

Uaktualnij do szybszego hostingu WordPress

Chociaż wszystkie taktyki z tej listy mogą pomóc ci poprawić czas LCP, nie ma owijania w bawełnę:

Jeśli korzystasz z powolnego, niezoptymalizowanego hostingu WordPress, Twoje czasy LCP zawsze będą ograniczone przez jakość Twojego hosta.

Możesz być w stanie trochę poprawić sytuację, ale zawsze będziesz miał trudności z osiągnięciem czasów LCP poniżej 2,5 sekundy, jeśli twój host jest wolny.

Jeśli chcesz w najprostszy sposób poprawić czasy największej zawartości treści, możesz przenieść swoją witrynę do Kinsta. Kinsta nie tylko oferuje infrastrukturę hostingową zoptymalizowaną pod kątem wydajności, ale mamy również wbudowane funkcje do obsługi wielu innych optymalizacji z tej listy.

Oznacza to, że możesz skupić się na rozwijaniu witryny, zamiast bawić się optymalizacją czasu największego malowania treści.

Jeśli jesteś zainteresowany, Kinsta przeprowadzi migrację nieograniczonej liczby stron internetowych z dowolnego hosta za darmo – dowiedz się więcej o bezpłatnej migracji tutaj.

Jeśli nadal się wahasz – najpierw wypróbuj pozostałe wskazówki z tej listy. Ale jeśli nadal masz problemy po zrobieniu wszystkiego z tej listy, być może potrzebujesz lepszego hostingu.

Użyj sieci dostarczania treści (CDN)

Bez sieci CDN wszyscy odwiedzający witrynę muszą pobrać kod HTML i zasoby statyczne strony z serwera hostingowego.

Jeśli Twoi goście znajdują się blisko Twojego serwera, zwykle nie stanowi to problemu. Ale jeśli Twoi goście są rozproszeni po całym świecie, może to spowolnić Twoją witrynę ze względu na fizyczną odległość między odwiedzającym a serwerem Twojej witryny.

Dzięki CDN możesz dystrybuować statyczne zasoby swojej witryny (a nawet gotowe strony HTML) do globalnej sieci CDN. W ten sposób odwiedzający mogą pobierać pliki z najbliższej lokalizacji CDN, co jest znacznie szybsze.

Jeśli hostujesz z Kinsta, zalecamy korzystanie z funkcji Edge Caching Kinsta, aby uzyskać najlepsze wyniki.

Funkcja buforowania brzegowego Kinsta działa poprzez buforowanie pełnych stron HTML Twojej witryny i zasobów statycznych w globalnej sieci Cloudflare ( zamiast tylko buforowania zasobów statycznych, jak większość rozwiązań CDN ).

Oznacza to, że odwiedzający Twoją witrynę mogą pobrać całą stronę z najbliższej lokalizacji brzegowej, co przyspiesza zarówno czas odpowiedzi serwera , jak i czas ładowania zasobu LCP.

Aby włączyć Kinsta's Edge Caching, przejdź do zakładki Edge Caching na desce rozdzielczej swojej witryny w MyKinsta.

Jeśli hostujesz gdzie indziej, możesz skonfigurować CDN dla statycznych zasobów swojej witryny, korzystając z popularnych usług CDN, takich jak KeyCDN, Bunny, StackPath i innych.

Unikaj kodu JavaScript blokującego renderowanie (odłóż lub usuń)

JavaScript blokujący renderowanie to JavaScript, który ładuje się przed głównym elementem LCP, mimo że nie jest w tym momencie potrzebny.

Opóźniając ładowanie elementu LCP, spowolni to czas ładowania LCP.

Aby temu zaradzić, możesz zastosować kilka strategii:

• Usuń niepotrzebny JavaScript, jeśli to możliwe.
• Odłóż JavaScript, aby nie blokował ładowania głównego elementu Twojej witryny.
• Opóźnij JavaScript, dopóki użytkownik nie wejdzie w interakcję z Twoją witryną.

Dla większości ludzi najłatwiejszym sposobem wdrożenia tej funkcji jest użycie wtyczek, takich jak Autoptimize lub WP Rocket.

Aby uzyskać pełny przewodnik, jak to zrobić, mamy dwa bardzo szczegółowe posty:

• Jak wyeliminować zasoby blokujące renderowanie w WordPress
• Jak odroczyć parsowanie JavaScript

Unikaj CSS blokujących renderowanie i optymalizuj dostarczanie CSS

Tak jak niezoptymalizowany JavaScript może spowolnić Twoją witrynę, tak samo może zrobić niezoptymalizowany CSS.

Zasadniczo chcesz załadować jak najmniej CSS. A dla kodu CSS, który musisz załadować, chcesz go załadować w optymalny sposób. Zwykle oznacza to, że chcesz wcześnie załadować ważny CSS, a niekrytyczne CSS odłożyć na późniejszy etap ładowania.

Jeśli nie jesteś programistą, najłatwiejszym sposobem na osiągnięcie tego jest użycie wtyczek optymalizujących wydajność, takich jak Perfmatters, WP Rocket lub FlyingPress.

Na przykład WP Rocket oferuje wbudowane funkcje usuwania nieużywanego CSS na zasadzie strona po stronie i optymalnego obsługi CSS.

Jeśli chcesz dokładniej przyjrzeć się, jak to wszystko zrobić, zapoznaj się z naszym kompletnym przewodnikiem na temat optymalizacji CSS.

Zminimalizuj swój kod HTML, CSS i JavaScript

Oprócz powyższych technik optymalizacji kodu będziesz także chciał zminimalizować HTML, CSS i JavaScript swojej witryny.

Zasadniczo usuwa to niepotrzebne znaki i spacje z kodu witryny, aby zmniejszyć jej rozmiar.

Jeśli hostujesz z Kinsta, Kinsta może automatycznie obsłużyć minifikację poprzez naszą integrację z Cloudflare. Oto jak sterować tą funkcją:

1. Otwórz pulpit nawigacyjny swojej witryny w MyKinsta.
2. Przejdź do zakładki CDN .
3. Kliknij Ustawienia obok opcji Optymalizacja obrazu.
4. Zaznacz pola CSS i JS i zapisz ustawienia.

Jeśli hostujesz swoją witrynę w innym miejscu, możesz użyć bezpłatnej wtyczki, takiej jak Autoptimize, aby zminimalizować swój kod lub jednej z kompleksowych wtyczek premium, takich jak Perfmatters, WP Rocket lub FlyingPress.

Możesz też zapoznać się z naszym pełnym samouczkiem dotyczącym minimalizacji kodu, aby dowiedzieć się więcej. Podczas gdy samouczek koncentruje się na JavaScript, możesz użyć tych samych metod i wtyczek, aby zminimalizować również inny kod.

Użyj kompresji na poziomie serwera (Gzip lub Brotli)

Kompresja na poziomie serwera pozwala zmniejszyć rozmiar plików witryny za pomocą technologii takich jak Gzip lub Brotli.

Na przykład kompresja, której używamy w witrynie Kinsta, zmniejszyła rozmiar pliku strony głównej Kinsta o 85,82%.

Jeśli hostujesz swoją witrynę WordPress za pomocą Kinsta, nie musisz się tym martwić, ponieważ Kinsta automatycznie włącza kompresję Brotli dla wszystkich witryn.

Jeśli hostujesz swoją witrynę w innym miejscu, możesz użyć tego bezpłatnego narzędzia z GiftOfSpeed, aby sprawdzić, czy Twoja witryna obsługuje Gzip lub Brotli.

Jeśli Twoja witryna nie korzysta z kompresji, możesz skorzystać z naszego przewodnika, jak włączyć kompresję Gzip, aby ją skonfigurować.

Jeśli używasz Cloudflare do wyświetlania zawartości swojej witryny, Cloudflare ma również wbudowane ustawienie umożliwiające kompresję Brotli:

1. Otwórz swoją witrynę w panelu Cloudflare.
2. Przejdź do opcji Prędkość → Optymalizacja w menu paska bocznego.
3. Włącz przełącznik Brotli .

Kompresuj i zmieniaj rozmiar obrazów

Jeśli elementem LCP jest obraz, znalezienie sposobów na zmniejszenie rozmiaru tego pliku obrazu skróci czas pobierania obrazu przez przeglądarkę użytkownika (a tym samym przyspieszy czas LCP).

Aby zmniejszyć rozmiar obrazu, należy zmienić rozmiar obrazu do wymiarów, w jakich go faktycznie używasz, skompresować go przy użyciu kompresji stratnej lub bezstratnej i udostępnić w zoptymalizowanym formacie, takim jak WebP.

Takie podejście jest ogólnie najlepszą praktyką optymalizacji wydajności — nie jest specyficzne dla największego malowania zawartości.

Aby uzyskać pełniejszy obraz, zapoznaj się z naszym szczegółowym przewodnikiem po optymalizacji obrazu na stronach internetowych.

I o tak – jeśli hostujesz swoją witrynę WordPress za pomocą Kinsta, nie musisz się tym martwić, ponieważ Kinsta oferuje wbudowaną funkcję automatycznej optymalizacji obrazów witryny bez potrzeby korzystania z narzędzi innych firm.

Oto jak włączyć tę funkcję:

1. Otwórz pulpit nawigacyjny swojej witryny w MyKinsta.
2. Przejdź do zakładki CDN .
3. Kliknij Ustawienia obok opcji Optymalizacja obrazu.
4. Wybierz preferowany poziom optymalizacji obrazu i zapisz ustawienia – użycie Lossy zapewni największą poprawę szybkości, choć może mieć niewielki wpływ na jakość obrazu.

Wstępnie załaduj największy obraz z zawartością Paint

Jeśli elementem LCP jest obraz, inną strategią ulepszenia LCP jest wstępne załadowanie obrazu o największej treści. Dlatego w PageSpeed ​​Insights możesz zobaczyć rekomendację typu „Wstępnie załaduj największy obraz graficzny z zawartością”.

Dzięki wstępnemu ładowaniu możesz nakazać przeglądarce użytkownika priorytetowe pobieranie określonych zasobów, takich jak konkretny obraz, który jest elementem LCP Twojej witryny.

Najbardziej nietechnicznym sposobem wstępnego ładowania obrazów LCP jest użycie wtyczki, takiej jak Perfmatters, która oferuje dedykowaną funkcję wstępnego ładowania krytycznych obrazów . Wszystko, co musisz zrobić, to określić liczbę obrazów do wstępnego załadowania – zalecamy rozpoczęcie od jednego, ponieważ wstępne ładowanie zbyt wielu zasobów może mieć negatywny wpływ.

Istnieje również kilka bezpłatnych wtyczek na WordPress.org, aby to osiągnąć, takich jak wtyczka WPZOOM Preload Featured Images, a także inne wtyczki premium, takie jak FlyingPress.

Sprawdź, czy nie występują problemy z leniwym ładowaniem

Innym problemem, który może wywołać komunikat „Wstępnie załaduj największy obraz treści” w PageSpeed ​​Insights, są problemy z leniwym ładowaniem obrazów przez witrynę WordPress.

Może to również spowodować wyświetlenie ostrzeżenia „Największy obraz z zawartością został leniwie załadowany” w PageSpeed ​​Insights.

Leniwe ładowanie pozwala przyspieszyć początkowe czasy wczytywania witryny, czekając na załadowanie określonych zasobów (takich jak obrazy), aż użytkownik rozpocznie interakcję z witryną.

Chociaż zwykle jest to dobre, może spowolnić czas LCP, jeśli witryna próbuje leniwie załadować obraz, który jest elementem LCP. Z tego powodu warto się upewnić, że witryna nie ładuje z opóźnieniem żadnych obrazów widocznych w początkowym widocznym obszarze.

Jeśli korzystasz z natywnej funkcji leniwego ładowania przeglądarki, którą WordPress wprowadził w WordPress 5.5, nie powinieneś doświadczać tego problemu, ponieważ WordPress już automatycznie wyklucza pierwszy obraz w treści od WordPress 5.9.

Jeśli chcesz wykluczyć więcej niż pierwszy obraz, możesz użyć funkcji wp_omit_loading_attr_threshold (ale większość ludzi nie będzie musiała tutaj nic robić).

Jeśli jednak używasz wtyczki ładującej z opóźnieniem opartej na JavaScript, może być konieczne ręczne skonfigurowanie tego wykluczenia w ustawieniach wtyczki. Na przykład wtyczka Perfmatters zawiera opcję pozwalającą wykluczyć pierwsze obrazy „X” z leniwego ładowania.

Jeśli Twoja wtyczka do leniwego ładowania nie pozwala na skonfigurowanie tego typu wykluczeń, możesz przełączyć się na inną wtyczkę, która to umożliwia.

Optymalizuj ładowanie czcionek za pomocą wyświetlania czcionek: opcjonalne

Jeśli elementem LCP jest tekst, proces ładowania czcionek w Twojej witrynie może opóźnić pojawienie się tekstu, co spowolni czas LCP.

Zwykle dzieje się tak w przypadku korzystania z niestandardowych czcionek. Jeśli Twoja witryna jest skonfigurowana tak, aby czekać na renderowanie dowolnego tekstu do czasu załadowania niestandardowej czcionki, spowolni to działanie, jeśli ładowanie pliku niestandardowej czcionki zajmie dużo czasu.

Aby to naprawić, możesz użyć deskryptora Font-Display: Opcjonalny CSS.

To mówi przeglądarce, aby użyła czcionki zastępczej, jeśli niestandardowa czcionka nie ładuje się w małym oknie (zwykle około 100 ms lub mniej).

W prostym języku oznacza to zasadniczo, że przeglądarka powinna dać szansę załadowania niestandardowej czcionki. Ale jeśli niestandardowa czcionka nie ładuje się wystarczająco szybko, przeglądarka powinna po prostu użyć zastępczej czcionki systemowej, aby uniknąć dalszego opóźnienia treści.

Alternatywnie możesz także użyć Font-Display: Swap, który od razu ładuje czcionkę zastępczą, a następnie „zamienia” czcionkę niestandardową po załadowaniu niestandardowej czcionki. Jednak takie podejście może powodować problemy z skumulowanym przesunięciem układu, jeśli czcionki mają różne rozmiary, więc należy zachować ostrożność.

O ile Twoja niestandardowa czcionka nie jest absolutnie niezbędna do zaprojektowania Twojej witryny, użycie Font-Display: Opcjonalne jest zwykle najlepszą opcją z punktu widzenia Core Web Vitals.

Jeśli nie masz problemów z bezpośrednim używaniem CSS, możesz ręcznie edytować właściwość Font-Display w arkuszu stylów motywu potomnego.

Jeśli nie chcesz używać CSS, możesz również znaleźć wtyczki, które Ci w tym pomogą, chociaż większość z nich koncentruje się na optymalizacji pod kątem czcionek Google:

• Asset CleanUp – obsługuje bezpłatne czcionki Google i niestandardowe czcionki lokalne w wersji Pro.
• Perfmatters – oferuje funkcję czcionek Google.

Jeśli używasz Elementora do zaprojektowania swojej witryny, Elementor zawiera również wbudowaną opcję, która pozwala ci używać go do stron tworzonych za pomocą Elementora:

1. Przejdź do Elementora → Ustawienia .
2. Otwórz kartę Zaawansowane .
3. Ustaw listę rozwijaną Ładowanie czcionek Google na wartość Opcjonalne .

Streszczenie

Nauczenie się, jak udoskonalić największą zawartość, jest ważne dla poprawy komfortu korzystania z witryny i maksymalizacji pozycji w wyszukiwarkach.

Ogólnie rzecz biorąc, ulepszenie funkcji największej zawartości zawiera dwie części — przyspieszenie czasu odpowiedzi serwera, a następnie optymalizacja kodu witryny w celu jak najszybszego renderowania elementu LCP.

Jeśli nie chcesz się martwić wolnym czasem odpowiedzi serwera, możesz przenieść swoją witrynę WordPress do Kinsta. Zoptymalizowana pod kątem wydajności architektura Kinsta została zaprojektowana specjalnie w celu jak najszybszego dostarczenia witryny.

Dodatkowo, dzięki funkcji Edge Caching Kinsta, możesz buforować strony swojej witryny w globalnej sieci Cloudflare, co oznacza, że ​​odwiedzający z całego świata będą cieszyć się błyskawicznym czasem odpowiedzi serwera (a co za tym idzie, błyskawicznym czasem LCP).

Jeśli chcesz dowiedzieć się więcej, możesz sprawdzić te strony, aby uzyskać więcej informacji na temat zarządzanego hostingu WordPress firmy Kinsta lub zarządzanego hostingu WooCommerce firmy Kinsta.

Jeśli chcesz, aby profesjonalista pomógł Ci w niektórych niestandardowych optymalizacjach wydajności LCP, możesz również znaleźć dostawcę w katalogu agencji Kinsta.