Optymalizacja LCP obrazów hero w Divi 5

Zarządzanie wydajnością złożonych kreatorów stron to codzienna walka o milisekundy. W przypadku Divi 5 jednym z najbardziej problematycznych elementów dla wskaźników Core Web Vitals pozostają duże grafiki w sekcji above the fold. Prawidłowa optymalizacja LCP obrazów hero w Divi 5 to zadanie, które wymaga ręcznej interwencji, ponieważ domyślne automatyzmy potrafią wyrządzić więcej szkody niż pożytku.

Z moich analiz wynika, że w 90% przypadków to właśnie sekcja "hero" zostaje zidentyfikowana przez Google jako Largest Contentful Paint (LCP). Oczekiwany wynik LCP wynosi mniej niż 2,5 sekundy. Jeśli przeglądarka marnuje czas na renderowanie zbędnego kodu, lub co gorsza, sztucznie opóźnia załadowanie kluczowej grafiki, wskaźniki PageSpeed Insights natychmiast pikują, ciągnąc za sobą organiczne pozycje serwisu.

Aby obniżyć LCP na stronie budowanej w Divi, należy przede wszystkim wyłączyć zjawisko opóźnionego ładowania (lazy loading) dla obrazu "hero" i nadać mu wysoki priorytet ładowania (fetchpriority="high"). Dodatkowo, plik musi być w nowoczesnym formacie (WebP/AVIF) i zeskalowany do realnych wymiarów (maksymalnie 1920px szerokości dla komputerów).

Dlaczego "Lazy Loading" to cichy zabójca Twojego LCP?

Największym błędem podczas konfiguracji wtyczek optymalizacyjnych takich jak Litespeed Cache, Imagify czy natywnych opcji Divi jest włączenie globalnego leniwego ładowania dla wszystkich grafik. Z punktu widzenia działania silnika przeglądarki, obraz z atrybutem loading="lazy" nie pobierze się, dopóki cała struktura DOM nie zostanie przeanalizowana i wyrenderowana. To sztucznie opóźnia pojawienie się najważniejszego elementu wizualnego.

Jeżeli Twój baner na stronie głównej znajduje się na samym początku, musi załadować się natychmiast. Automatyzmy Divi 5 potrafią jednak nadpisywać te reguły. Rozwiązaniem jest edycja modułu obrazu lub tła sekcji hero w panelu Divi (Theme Options -> Builder -> Performance) i manualne wykluczenie atrybutu "lazy" za pomocą przypisania odpowiedniej klasy CSS (np. no-lazy), a następnie dodanie reguły wykluczającej we wtyczce cache.

Jak skutecznie wykorzystać Preload i Fetchpriority dla głównej grafiki?

Kolejnym etapem przyspieszenia wczytywania sekcji wizualnych jest nakazanie przeglądarce, aby pobierała obraz jeszcze zanim dotrze do odpowiedniego fragmentu kodu CSS. Obecne standardy W3C pozwalają na użycie nowego parametru fetchpriority="high", co z powodzeniem można dodać jako niestandardowy atrybut bezpośrednio w ustawieniach modułu Divi.

• Przejdź do Ustawień modułu obrazu Divi (lub tła sekcji), otwórz zakładkę Zaawansowane (Advanced), a następnie w polu "Attributes" dopisz parametr priorytetu fetchpriority.
• Możesz również zaimplementować to bezpośrednio w sekcji <head> motywu (np. używając modułu Divi Code), wklejając tag: <link rel="preload" as="image" href="twoj-hero.webp">.

Zasady formatowania i kompresji dla sekcji w Divi

Zawsze skaluj obrazy w tle. Nie ma żadnego biznesowego ani technicznego uzasadnienia do ładowania pliku o rozdzielczości 4000x3000 pikseli, jeśli szerokość kontenera Divi blokuje się na 1920 pikselach (dla wersji desktop). Użycie bezstratnej kompresji to fundament. Plik "hero" nie powinien ważyć więcej niż 150-250 kilobajtów. Wymiary fizyczne muszą być jasno zdefiniowane w atrybutach width i height, co dodatkowo zlikwiduje problem nieoczekiwanych przesunięć układu strony (CLS).

Co więcej, Divi obsługuje technologię srcset, która pozwala serwować mniejsze pliki dla urządzeń mobilnych. Zadbaj o to, aby dla widoku smartfona ładowana była całkowicie inna grafika (np. o szerokości 800px), przypięta w edytorze RWD Divi. W przeciwnym razie telefon użytkownika zmarnuje cenne zasoby procesora na wczytywanie ciężkiego pliku przygotowanego z myślą o komputerach stacjonarnych.

Co zrobić w przypadku LCP zdominowanego przez wideo z YouTube?

Sytuacja komplikuje się, gdy głównym elementem przykuwającym wzrok nie jest plik JPG czy WebP, lecz animacja lub odtwarzacz wideo. Zewnętrzne skrypty potężnie obciążają proces wczytywania (TTFB). W takiej konfiguracji wynik poniżej 2,5 sekundy jest niemal niemożliwy do osiągnięcia bez zastosowania pewnego fortelu technologicznego.

Jedynym wyjściem, które uchroni Twój wynik przed drastycznym spadkiem, jest użycie "atrap". Zamiast renderować aktywny moduł wideo od razu, osadzasz wysoko zoptymalizowaną miniaturę (WebP), na którą nałożona jest ikona odtwarzania. Dopiero fizyczne kliknięcie przez użytkownika uruchamia asynchroniczny kod skryptu dostawcy wideo. Takie podejście oszukuje skanery Google i daje natychmiastowe ładowanie najważniejszej zawartości.