Napraw błąd „Więcej niż” LCP w Core Web Vitals w GSC

Google opublikował nowy raport w wyszukiwarcekonsola o nazwie Core Web Vitals. Te zastąpiły raporty dotyczące szybkości i będą brane pod uwagę jako czynnik rankingowy w 2021 r. Core Web Vitals będą brane pod uwagę jako czynnik rankingowy wraz z Page Speed, HTTPS. Przystosowanie do urządzeń mobilnych i inne czynniki na stronie.

Core Web Vital bierze pod uwagę elementy UX i UI na stronie, aby poznać średnią ze strony dla trzech podstawowych wskaźników,

1. LCP: Farba o największej zawartości
2. FID: Opóźnienie pierwszego wejścia
3. CLS: Skumulowane przesunięcie układu

Nie ma konkretnej, pojedynczej, zakodowanej poprawki do rozwiązaniaproblemy, ale możesz zoptymalizować witrynę, aby rozwiązać błędy. Tutaj wymienię niektóre praktyki, które mogą pomóc w rozwiązaniu problemu z największą zawartością farby (LCP)Więcej niż' dla Twoich stron internetowych.

↑ Co to jest LCP?

Raporty metryczne o największej zawartości farby (LCP)czas renderowania największego elementu treści widocznego w rzutni. Mówiąc najprościej, jest to czas potrzebny na załadowanie głównego elementu na widocznym ekranie po rozpoczęciu ładowania strony.

↑ Jakie elementy należy uwzględnić w LCP?

Rodzaje elementów branych pod uwagę w przypadku farby o największej zawartości to;

• <img> elementy
• <image> elementy wewnątrz pliku <svg> element
• <video> elementy
• Element z obrazem tła załadowanym za pośrednictwem url () funkcjonować
• Elementy blokowe zawierające węzły tekstowe lub inne elementy podrzędne w tekście na poziomie liniowym.

↑ Jakie są przyczyny wysokiego LCP?

• Długie czasy odpowiedzi serwera
• JavaScript i CSS blokujące renderowanie
• Długie czasy ładowania zasobów
• Renderowanie po stronie klienta

↑ Jak zoptymalizować witrynę, aby naprawić wysoki LCP?

Użyj dobrego hostingu z dobrym czasem odpowiedzi iniska latencja. Upewnij się, że optymalizujesz serwery, korzystaj z bezpłatnych sieci CDN innych firm, takich jak Cloudflare, jsDelivr, Statically, aby szybko dostarczać statyczne zasoby. Jeśli pracujesz na WordPress, istnieje wiele wtyczek, które mogą pomóc Ci wykonać tę pracę.

Używaj obrazów skompresowanych z formatami obrazów nowej generacjijak JPEG XR, JPEG 2000 lub WebP. Te nowoczesne formaty pomagają przyspieszyć ładowanie obrazu o 50%. Istnieje kilka wtyczek do WordPressa, które automatycznie pomagają kompresować i konwertować obrazy w locie. Użyj również obrazu CDN, takiego jak WP-Photon, aby zmniejszyć przepustowość serwera i zwiększyć prędkość witryny.

Możesz użyć usług pamięci podręcznej, aby załadować statyczny kod HTMLstrona, która nie zmienia się przy każdym żądaniu, buforowanie może zapobiec niepotrzebnemu jej odtworzeniu. Wtyczki pamięci podręcznej przechowują kopię wygenerowanego kodu HTML na serwerze, a gdy strona jest żądana, serwer zwalnia obciążenie pamięci podręcznej, co może skrócić czas do pierwszego bajtu (TTFB) i zminimalizować wykorzystanie zasobów.

Możesz także skorzystać z usług takich jak Cloudflare, któreuruchamia pracowników usług w tle przeglądarki i może przechwytywać żądania z serwera. Pobierają całą pamięć podręczną HTML strony i najpierw obsługują pamięć podręczną HTML, co może znacznie skrócić czas ładowania.

Innymi ważnymi kwestiami do rozważenia jest optymalizacja strony internetowej pod kątem dobrego LCP

• Wyeliminuj blokujące renderowanie JavaScript i CSS
• Odłóż niekrytyczne CSS
• Zmniejsz zasoby
• Wczytaj wstępnie ważne zasoby

Możesz znaleźć bardziej szczegółowy przewodnik, jak zoptymalizować stronę internetową, aby zmniejszyć LCP i przyspieszyć ładowanie stron, aby uzyskać lepszy UX w oficjalna witryna Web.Dev.

Wniosek: Wraz z wprowadzeniem podstawowych funkcji internetowych w GSCi jest uważany za czynnik rankingowy. LCP to bardzo ważna miara do naprawienia, ponieważ uwzględnia czas potrzebny do załadowania największego elementu do obszaru roboczego urządzenia. Przedstawiłem kilka wstępnych poprawek i rozwiązań, aby zoptymalizować witrynę pod kątem niskiego LCP.