W maju 2020 roku firma Google oficjalnie ogłosiła, że podstawowe wskaźniki internetowe są częścią aktualizacji algorytmów rankingowych. Podstawowe wskaźniki sieciowe obejmują czynniki bezpośrednio związane z doświadczeniem użytkownika i odgrywają ważną rolę w rankingu naszej witryny. Jednym z tych ważnych czynników jest lcp. Czy wiesz, czym jest lcp i jak może wpłynąć na wydajność UX i SEO naszej witryny?
lcp lub Largest Contentful Paint mierzy prędkość wyświetlania największego elementu obrazu w witrynie. Oprócz tego, że jest jednym z trzech czynników kluczowych dla sieci, lcp, po opublikowaniu aktualizacji Page Experience w 2021 r., odegrał bardziej znaczącą rolę w poprawie komfortu użytkowania i SEO witryny w wersjach mobilnych i stacjonarnych. Z tego powodu postanowiliśmy w poniższym artykule szczegółowo przyjrzeć się lcp, przedstawić jego narzędzia pomiarowe oraz rolę lcp w SEO witryn. Na końcu tego artykułu poznasz 10 praktycznych i łatwych sposobów na ulepszenie witryny lcp na urządzeniach mobilnych i komputerach stacjonarnych.
Co to jest LCP lub największa farba treściowa?
LCP oznacza Largest Contentful Paint i mierzy czas ładowania największego elementu wizualnego strony. Dopóki zawartość lcp nie zostanie załadowana, na ekranie nie zobaczysz prawie nic. Ponieważ element LCP znajduje się zawsze na górze ekranu i jest pierwszym elementem do załadowania. LCP to zwykle obraz lub blok tekstowy, ale może to być również film lub nawet animacja. Warto wiedzieć, że w większości przypadków ilość lcp różni się w zależności od wersji mobilnej i wersji komputerowej witryny.
Ale dlaczego LCP jest tak ważny? Wyobraź sobie, że największy obraz lub element tekstowy strony nie ładuje się szybko, w takim przypadku widz pozostanie z prawie pustą stroną. W najlepszym przypadku strona ładuje się kilka sekund. Ale czy wszyscy nasi użytkownicy są tak cierpliwi? Zdecydowanie nie. Opuszczają witrynę!
Widzisz, jak niesamowite kilka sekund może zrobić ogromną różnicę i jaką katastrofę może sprowadzić na doświadczenie użytkownika!
Podejście Google do LCP, czyli największej treściowej farby
Pierwszym i najważniejszym powodem, dla którego Google uczynił LCP jednym z najważniejszych kryteriów Core Web Vitals, jest jego bezpośredni związek z doświadczeniem użytkowników odwiedzających witrynę. W czerwcu 2021 roku wprowadzono LCP w ramach nowych czynników rankingowych oraz jako jeden z sygnałów Page Experience. Z tego powodu Largest Contentful Paint jest ważny nie tylko ze względu na zapewnienie doskonałej obsługi użytkownika, ale także na poprawę wydajności SEO naszej witryny.
lcp stanowi około 25% całkowitego wyniku Page Speed Insights. Obrazy, filmy, arkusze kalkulacyjne, tagi obrazów, obrazy przesłane za pomocą CSS i dowolne elementy tekstowe to elementy używane przez Google do oceny LCP. Google mówi: Jeśli co najmniej 75% odwiedzin witryny będzie miało „dobrą” ocenę lcp, wydajność witryny będzie akceptowalna w tym kryterium. W dalszej części zapoznasz się bliżej z wartościami i klasyfikacją punktów lcp zdefiniowanych przez Google.
Jaki jest najlepszy wynik lcp według Google?
Google zaleca, aby lcp witryny wynosił maksymalnie 2,5 sekundy. Oznacza to, że jeśli wynik lcp naszej witryny wyniósł więcej niż 2,5 sekundy, powinniśmy spróbować ją zoptymalizować. Jeśli lcp witryny wynosi od 2,5 do 4,0 sekund, Google musi go poprawić. Jeśli jednak wynik ten wynosi więcej niż 4 sekundy, należy go jak najszybciej zoptymalizować.
Dlaczego rola LCP w SEO i doświadczeniu użytkownika jest tak ważna?
Pierwszym i najprostszym powodem znaczenia LCP w SEO jest to, że Google uznaje największą treść za ważne kryterium rankingu. Mówiąc najprościej, jeśli nasza witryna ładuje się powoli, tracimy jeden z najważniejszych punktów rankingowych, a mianowicie szybkość działania witryny. W związku z tym sugerujemy przeczytanie artykułu ” Optymalizacja szybkości witryny „ . Ale na razie spójrzmy na główne powody poprawy LCP i SEO.
1. Google sam stworzył i zaleca to kryterium
Fakt, że Google zarekomendował lcp jako jedno z najważniejszych kryteriów oceny szybkości działania witryny, pokazuje jego znaczenie. Ponadto od maja 2020 r. lcp stał się domyślnym czynnikiem oceny wydajności witryny.
2. Szybkość ładowania witryny wpływa na jej ranking
Google chce, aby różne strony naszej witryny ładowały się szybko w wersji na komputery stacjonarne i urządzenia mobilne. Gdy Google zaczęło aktywnie korzystać z LCP, wpłynęło to również na pozycję witryn w wynikach SERP i stwierdzono, że witryny z dobrym LCP i optymalną szybkością osiągały lepszą pozycję na pierwszej stronie Google.
3. Największa zawartość treściowa wpływa również na wygodę użytkownika
Lcp wpływa również na wygodę użytkownika. Jeśli wartość lcp witryny będzie optymalna, współczynnik odrzuceń witryny zmniejszy się, a witryna uzyska lepszy ranking. Oczywiście na współczynnik odrzuceń wpływają również inne czynniki, ale gdy inne czynniki są optymalne, a lcp witryny powoduje pogorszenie doświadczenia użytkownika, współczynnik odrzuceń wzrośnie, czy nam się to podoba, czy nie.
Jakie czynniki zmniejszają pozytywny wpływ LCP na SEO?
W sekcji „Co to jest LCP” powiedzieliśmy, że „Największe malowanie treści” to miara czasu, jaki użytkownik czeka na wyświetlenie największego elementu wizualnego lub tekstowego w witrynie. Na to kryterium wpływają 3 czynniki, które wyjaśnimy poniżej:
1. Czas reakcji serwera
Czas odpowiedzi serwera to czas, przez który serwer musi odpowiedzieć na żądanie przeglądarki. Gdy przeglądarka wysyła żądanie do serwera, a odpowiedź z serwera jest zbyt długa, będzie to miało wpływ na wynik lcp. Ponieważ przeglądarka odbiera zawartość bardzo wolno i wyświetlenie użytkownikowi największej zawartości treściowej zajmuje trochę czasu. W rezultacie czas ładowania ulega skróceniu, a lcp ma negatywny wpływ na SEO witryny.
2. Blokuj i renderuj CSS i JavaScript
Wyobraź sobie, że przeglądarka wysłała Twoje żądanie i odebrała treść z serwera. W tym momencie przeglądarka renderuje i wyświetla treść; Dlaczego! Aby dostarczyć jakąkolwiek treść, przeglądarka musi przeanalizować kod HTML strony i przekonwertować go na czytelną treść. Jeśli jednak niektóre skrypty i procedury analizujące HTML zostaną zablokowane, analiza i konwersja zostaną opóźnione, a treść żądana przez użytkownika będzie nadal wyświetlana z opóźnieniem. W rezultacie ponownie ma to wpływ na działanie lcp.
3. Czasy ładowania zasobów
Jak wiadomo, ilość LCP zależy od obrazów, filmów i elementów wizualnych strony. Jeśli te pliki są renderowane na górze strony, a ładowanie trwa zbyt długo, czas ładowania i lcp witryny nadal zostaną utracone. W rzeczywistości szybkość odbierania i dostarczania żądanej treści przez przeglądarkę określa wynik i szybkość lcp i musi być zoptymalizowana.
Zanim przejdziemy do rozwiązywania problemów powodowanych przez te 3 czynniki i nauczania metod optymalizacji lcp, w następnej sekcji chcemy zobaczyć, za pomocą jakich narzędzi i jak możemy zmierzyć element LCP.
Zapoznaj się z narzędziami pomiarowymi lcp dostępnymi na naszej stronie
Istnieje kilka sposobów pomiaru elementu LCP. Niektóre z tych narzędzi mierzą największą zawartość treściową na podstawie danych terenowych, a inne na podstawie rzeczywistych danych witryny. Oto najpopularniejsze narzędzia, których możemy użyć do sprawdzenia LCP.
Darmowe narzędzia, które oszacować lp wartość oparta na rzeczywistości dane witryny :
- Latarnia morska
- Statystyki PageSpeed
- Narzędzia deweloperskie Chrome
- Test strony internetowej
- GTmetrix
Narzędzia, które Oblicz lcp z pole dane :
- Statystyki PageSpeed
- Raport o doświadczeniach użytkowników Chrome
- Search Console – raport dotyczący podstawowych wskaźników internetowych
Dla osób, które są nowe SEO , zalecamy korzystanie z PageSpeed Insights i Search Console. Poniżej, wraz z przykładami i obrazami, nauczymy Cię, jak korzystać z tych narzędzi.
1. Zmierz wartość lcp za pomocą narzędzia PageSpeed Insights
PageSpeed Insights to najprostszy sposób pomiaru lcp. Narzędzie to mierzy wartość lcp na podstawie rzeczywistych danych o lokalizacji. Zawiera także wskazówki dotyczące poprawy wydajności lcp w SEO i optymalizacji jego wartości.
Aby skorzystać z tego narzędzia, musimy najpierw przejść do sekcji Diagnostyka i poszukać sekcji „Największy element zawartości treści”. Na tej stronie możesz mierzyć i analizować wartość lcp dla każdego wybranego adresu URL. Zapewnia doskonałą wygodę użytkowania strony, o ile lcp ładuje się szybko i trwa krócej niż 2,5 sekundy.
2. Zmierz wartość lcp za pomocą narzędzia Google Search Console
Badając raport Core Web Vitals w Google Search Console, możemy ocenić wydajność naszej witryny i zidentyfikować ewentualne problemy. Za pomocą tego narzędzia możemy sprawdzić wydajność lcp oddzielnie na urządzeniach mobilnych i komputerach stacjonarnych.
Po otwarciu raportu Core Web Vitals zobaczymy, jak strony naszej witryny zachowują się zgodnie ze standardowymi wartościami lcp; Cóż, trzeba poprawić lub osłabić.
Ten raport grupuje wydajność lcp według stanu, typu problemu i adresów URL. Na przykład niektóre adresy URL mogą nie działać dobrze w LCP. Kliknięcie wiersza tego adresu URL przeniesie Cię do strony zawierającej listę adresów URL, które należy zmodyfikować.
Za pomocą dowolnego z tych narzędzi możesz określić liczbę lcp i stron wymagających optymalizacji największej treści, z którą łatwiej Ci się pracuje. W następnej sekcji zapoznamy się z metodami ulepszania witryny lcp.
Poznaj 10 sposobów na skrócenie lcp do mniej niż 2,5 sekundy na urządzeniach mobilnych i komputerach stacjonarnych
Jeśli po ocenie wartości lcp stwierdzimy, że stan naszej witryny wymaga poprawy (tj. mieścimy się w przedziale od 2,5 do 4 sekund lub więcej), powinniśmy podjąć działania mające na celu poprawę lcp witryny. Oto 10 sposobów na znaczną poprawę wydajności programu Largest Contentful Paint i zmniejszenie jego ilości.
1. Popraw wartości czasu odpowiedzi ttfb i serwera
Wpływ na wydajność: Wysoki 🚀🚀🚀
Jedną z głównych przyczyn złego LCP jest długi czas odpowiedzi serwera. Ponieważ jednak czas reakcji serwera jest zoptymalizowany poprzez poprawę ttfb, musimy poprawić wartość obu czynników. Dobry Ttfb powinien być mniejszy niż 200 milisekund.
Istnieją dwa sposoby skrócenia czasu odpowiedzi ttfb i serwera:
Włącz pamięć podręczną strony
Aktywując pamięć podręczną stron, strony witryny są zapisywane jako plik HTML na serwerze po pierwszym załadowaniu strony. Dzięki temu treść wyświetla się szybciej. To bardzo łatwy sposób na ulepszenie ttfb. Możemy do tego wykorzystać wtyczkę WP Rocket.
Polecany artykuł: Co to jest ttfb? 7 praktycznych technik skrócenia czasu dotarcia do witryny pierwszego bajtu
Wybierz szybką usługę hostingu serwerów
Korzystanie z usługi szybkiego hosta może mieć duży wpływ na szybkość działania witryny. Musimy korzystać z usług firm, których serwery znajdują się blisko naszych użytkowników i mogą szybko przesyłać dane. W tym przypadku dedykowany serwer hosta zapewnia najszybszą wydajność.
Aktywując pamięć podręczną i wybierając szybki host, będziemy postępować zgodnie z zaleceniami PageSpeed Insights dotyczącymi skrócenia czasu odpowiedzi serwera (TTFB).
2. Opóźnij ładowanie plików JavaScript
Wpływ na wydajność: Wysoki 🚀🚀🚀
Wykonywanie plików JavaScript jest jedną z głównych przyczyn awarii lcp. Opóźnienie ładowania plików JavaScript jest rozwiązaniem tego problemu. Jeśli pamiętasz, we wstępie do czynników powodujących spadek LCP, powiedzieliśmy, że przeglądarka przetwarza i ładuje pliki JS dopiero po przeanalizowaniu plików HTML i utworzeniu drzewa DOM.
Opóźnienie ładowania plików JavaScript spowoduje znacznie szybsze renderowanie, ponieważ nie ma już nic, co mogłoby zablokować proces.
3. Pamiętaj, aby skorzystać z CDN
Wpływ na wydajność: Średni 🚀🚀
Content Delivery Network (CDN) dystrybuuje zawartość na wielu serwerach, aby pomóc użytkownikom połączyć się z najbliższym serwerem i odbierać zawartość witryny. Korzystanie z CDN skraca odstęp czasu między żądaniem użytkownika a odpowiedzią serwera.
Bez względu na to, gdzie znajdują się nasi użytkownicy, CDN wysyła do nich informacje o witrynie w możliwie najkrótszym czasie i poprawia komfort użytkowania.
4. Zoptymalizuj rozmiar i wymiary obrazów
Wpływ na wydajność: Wysoki 🚀🚀🚀
W większości przypadków są to obrazy, które spowalniają naszą witrynę, ponieważ ładują się zbyt długo. Aby ulepszyć LCP witryny, poważnie potraktuj optymalizację obrazów. Możemy zastosować odpowiednie formaty obrazów, takie jak JPEG i WebP oraz zmniejszyć rozmiar obrazów do mniej niż 100 KB.
Do optymalnego grupowania obrazów możemy użyć narzędzia takiego jak ImageOptim. Ponadto, jeśli chcemy zoptymalizować znacznie więcej obrazów, wtyczka Imagify jest świetnym rozwiązaniem, które jednocześnie zmniejsza rozmiar i wymiary obrazów.
Kreatory stron, takie jak Elementor, umożliwiają także webmasterom przesyłanie obrazów o różnych rozmiarach w zależności od urządzenia użytkownika (komputer stacjonarny lub telefon komórkowy). Jak wiadomo, optymalizacja obrazu mobilnego jest bardzo ważna, a wynik mobilny jest najważniejszy. Dlatego nie lekceważ jego wpływu na wynik LCP!
5. Kompresuj pliki tekstowe
Wpływ na wydajność: Wysoki 🚀🚀🚀
Kompresowanie plików tekstowych oznacza spakowanie plików do mniejszego, lżejszego formatu, aby szybciej się ładowały. Kiedy zmniejszymy rozmiar plików, transfer danych pomiędzy przeglądarką a serwerem będzie szybszy, poprawi się czas ładowania i lcp.
Do kompresji plików tekstowych możemy używać różnych technik, takich jak Gzip. Metoda ta zwiększa szybkość przesyłania tekstu do użytkowników. Gzip jest obsługiwany przez większość usług hostingowych.
6. Odłóż niepotrzebne CSS i usuń nieużywane CSS
Wpływ na wydajność: Średni 🚀🚀
Niepotrzebny CSS należy załadować po załadowaniu najbardziej odpowiedniej treści. Z tego powodu musimy zidentyfikować krytyczny CSS (lub CSS ścieżki krytycznej) i umieścić go w strukturze HTML, opóźnić ładowanie niepotrzebnych plików CSS i usunąć nieużywany CSS. Unikaj umieszczania dużego, niepotrzebnego kodu CSS w kodzie
. Również w tym przypadku wtyczka WP Rocket jest pomocna dla witryn WordPress.7. Usuń nieużywane pliki JavaScript
Wpływ na wydajność: Średni 🚀🚀
Innym zalecanym sposobem ulepszenia lcp witryny jest usunięcie nieużywanych zasobów JavaScript. Niewykorzystane zasoby JavaScript to pliki, które nie są używane w naszej witrynie lub znajdują się nadal w kodzie, ale są całkowicie bezużyteczne. Nie ma więc powodu, aby przechowywać te pliki, powodując spadek wyniku cls. Istnieją dwa sposoby rozwiązania tego problemu:
- Przesyłaj pliki JavaScript tylko wtedy, gdy jest to konieczne
- Opóźnij przesyłanie pliku JavaScript.
8. Korzystaj z połączeń innych firm
Wpływ na wydajność: Średni 🚀🚀
Wysłanie żądania serwera na adres URL strony trzeciej lub strony trzeciej może również mieć pozytywny wpływ na LCP witryny. Zwłaszcza jeśli prośba dotyczy istotnych treści. Aby to zrobić, możemy użyć kodu rel = „preconnect” i powiedzieć przeglądarce, że ta strona powinna utworzyć połączenie w możliwie najkrótszym czasie.
9. Wstępnie załaduj ważne i niezbędne zasoby
Wpływ na wydajność: niski 🚀
Możemy wstępnie załadować wiele ważnych elementów witryny; Zasoby takie jak czcionki, obrazy u góry witryny, niezbędne filmy lub poprawki CSS lub JavaScript. Używając linku do kodu rel = „preload”, możemy pomóc w szybkim załataniu tych zasobów.
10. Nie zapomnij użyć Server Workera!
Wpływ na wydajność: Średni 🚀🚀
Server Worker może dostarczać mniejsze odpowiedzi HTML i może być używany do buforowania dowolnego źródła statycznego. Możemy udostępnić te zasoby przeglądarce w przypadku zduplikowanych żądań. Ponieważ przedpłata niezbędnych zasobów za pomocą Server Worker może zmniejszyć obciążenie witryny.
Ta metoda jest szczególnie przydatna, gdy użytkownik ładuje witrynę za pomocą słabego połączenia i znacznie obniża wynik cls witryny.
Często Zadawane Pytania
Jeśli przyczyną wzrostu lcp jest powolne ttfb, jak powinniśmy to naprawić?
Ten problem rozwiązano, poprawiając szybkość odpowiedzi serwera, korzystając z CDN i tworząc stronę trzecią.
Czy wartości oszacowane przez gtmetrix dla lcp są wiarygodne?
Sugerujemy skorzystanie z narzędzi PageSpeed Insights i Search Console, aby osiągnąć rzetelny wynik. Jeśli jednak nie masz dostępu do tych dwóch narzędzi, możesz uzyskać pomoc także z raportu GT Metrics.
Jakie rozwiązania sugerujecie, aby poprawić szybkość odpowiedzi serwera?
- Optymalizacja serwera pod kątem sprzętowym
- Optymalizacja zapytań i baz danych
- Ulepszony kod po stronie serwera, aby przyspieszyć ładowanie strony
- Nawiąż wczesne połączenie z osobą trzecią
Czy witryny WordPress mają rozwiązanie pozwalające uniknąć niepotrzebnego CSS?
Obecnie nie ma profesjonalnej wtyczki do wyodrębniania nieużywanego CSS, ale możesz użyć wtyczek takich jak Fastest Cache, aby najpierw załadować krytyczny CSS.
Zacznij optymalizować swoją witrynę lcp już dziś!
Teraz już wiesz na pewno, czym jest LCP i dlaczego należy go ulepszyć pod kątem SEO witryny i komfortu użytkownika. Od teraz możesz korzystać z jednego z wprowadzonych przez nas narzędzi, aby oszacować wynik lcp witryny i zwiększyć wynik największego contentful paint w swojej witrynie, korzystając ze wszystkich technik optymalizacji, których nauczyliśmy.
Pobierz zerowe motywy WordPressPobierz zerowe motywy WordPressPobierz najlepsze motywy WordPress do pobrania za darmoBezpłatne pobieranie motywów WordPresspobierz płatny kurs Udemy za darmopobierz oprogramowanie micromaxPobierz motywy WordPress za darmodarmowy płatny kurs udemy do pobrania