SparkCore
Poprawa Core Web Vitals dzięki lżejszym mediom
LCP i CLS zależą często od ciężkich obrazów. Mniejsze pliki i stałe wymiary pomagają od razu.
W skrócie
- Dobry wynik to: LCP 2,5 sekundy lub szybciej, INP 200 milisekund lub szybciej, CLS 0,1 lub niższy.
- Obrazy wpływają głównie na LCP i CLS, INP zależy bardziej od JavaScriptu.
- Nigdy nie ładuj leniwie pierwszego dużego obrazu i podaj dla każdego obrazu width i height.
Szybkie usprawnienia
- Skompresuj obrazy hero i zdjęcia produktów
- Używaj nowoczesnych formatów
- Unikaj przesyłania zbyt dużych plików
Czym są Core Web Vitals i jakie wyniki są dobre?
Core Web Vitals mierzą, jak strona działa dla odwiedzających. LCP mierzy, jak szybko pojawia się największy widoczny element. INP mierzy, jak szybko strona reaguje na kliknięcia i dotknięcia. CLS mierzy, jak bardzo układ przesuwa się podczas ładowania. Dobry wynik to LCP do 2,5 sekundy, INP do 200 milisekund i CLS do 0,1. Mierz najlepiej na rzeczywistych danych odwiedzających, nie tylko w teście laboratoryjnym.
- LCP: 2,5 sekundy lub mniej
- INP: 200 milisekund lub mniej
- CLS: 0,1 lub niższy
Jak poprawić LCP w WordPressie?
Na wielu stronach elementem LCP jest duży obraz, na przykład hero lub zdjęcie produktu. Zrób więc ten plik możliwie najmniejszy i serwuj go w nowoczesnym formacie. Nie ładuj go leniwie: jest od razu widoczny i musi zacząć się ładować natychmiast. Szybki serwer i cache strony skracają czas oczekiwania na pierwszy bajt, a to też wlicza się do LCP. Nie przesyłaj ponadto obrazu znacznie większego niż miejsce, w którym stoi.
- Skompresuj hero i zdjęcia produktów
- Używaj WebP lub AVIF z rozwiązaniem zapasowym
- Nie włączaj lazy loadingu dla pierwszego obrazu
Jak zapobiegać przesunięciom układu (CLS) przy obrazach?
Przesunięcie układu powstaje, gdy przeglądarka nie zna rozmiaru obrazu. Tekst skacze wtedy w dół, gdy tylko obraz się załaduje. Podaj więc dla każdego obrazu width i height. Przeglądarka zarezerwuje wtedy odpowiednie miejsce przed załadowaniem. WordPress zwykle sam dodaje te atrybuty do obrazów z biblioteki mediów. Sprawdź jednak własne bloki, elementy motywu i kod. Rezerwuj miejsce także dla banerów, reklam i czcionek, które ładują się później.
Co można zrobić z INP i w czym pomaga cache?
INP zależy głównie od JavaScriptu. Ciężkie skrypty motywów, wtyczek i trackerów zajmują główny wątek. Usuń to, czego nie używasz, a ładowanie reszty opóźnij. Obrazy odgrywają tu niewielką rolę. Cache pomaga głównie przy LCP. Strona z cache jest gotowa szybciej, a CDN przybliża pliki do odwiedzającego. Po każdej zmianie mierz ponownie i zmieniaj jedną rzecz naraz, inaczej nie dowiesz się, co zadziałało.
Najczęściej zadawane pytania
Zazwyczaj LCP, ponieważ największym elementem jest często obraz. Skompresuj ten plik, wybierz nowoczesny format i nie ładuj go leniwie. Potem kolej na CLS: podaj dla każdego obrazu width i height.
Nie. Lazy loading jest przeznaczony dla obrazów poniżej linii zgięcia. WordPress automatycznie ustawia loading lazy na obrazach. Pierwszy duży obraz, często element LCP, ładuj od razu, inaczej Twój LCP będzie wolniejszy.
Obrazy to tylko część historii. Znaczenie mają też wolny hosting, ciężkie skrypty, strony bez cache i przesuwający się układ. Sprawdź w raporcie dla każdej metryki, który element lub skrypt jest przyczyną.