Core Web Vitals na stronie Divi — kompletny przewodnik
Core Web Vitals (LCP, FID, CLS) to kluczowe metryki Google wpływające na ranking. Strona Divi może osiągać „all green” — wymaga jednak konkretnych działań. W tym przewodniku — pełna optymalizacja.
LCP (Largest Contentful Paint) — cel < 2.5s
To czas, w jakim ładuje się największy element widoczny w viewporcie (zwykle hero image lub nagłówek). Optymalizacja:
- Hero image jako WebP, max 200KB
- Preload hero image (link rel=”preload”)
- Inline Critical CSS (WP Rocket / Divi Rocket)
- Defer JavaScript
- Hosting LiteSpeed/Nginx
- CDN (Cloudflare)
FID (First Input Delay) → INP (Interaction to Next Paint) — cel < 200ms
Od marca 2024 INP zastąpił FID. To czas reakcji strony na pierwszą interakcję użytkownika. Optymalizacja:
- Minimalizuj JavaScript
- Defer non-critical JS
- Web Workers dla ciężkich obliczeń
- Code splitting (Webpack)
- Wyłącz nieużywane wtyczki
CLS (Cumulative Layout Shift) — cel < 0.1
To miara „skakania” elementów strony podczas ładowania. Optymalizacja:
- Każdy obraz musi mieć width i height (rezerwuje miejsce)
- Web fonts: font-display: swap
- Reklamy w stałych kontenerach
- Lazy load iframe
- Unikaj animacji pushujących content
Test Core Web Vitals
Narzędzia: PageSpeed Insights, Google Search Console → Core Web Vitals, Chrome DevTools → Lighthouse, WebPageTest.org.
Divi-specific optymalizacje
Divi → Theme Options → General → Performance: włącz Static CSS File Generation, Defer jQuery, Defer Gutenberg Block CSS, Critical CSS, Dynamic CSS, Dynamic Module Framework, Dynamic Icons.
Pobierz Divi -10% →
Powiązane
Jak zmierzyć Core Web Vitals strony Divi?
Użyj PageSpeed Insights (dane z realnych użytkowników z pola CrUX) oraz Google Search Console — raport „Podstawowe wskaźniki internetowe” pokazuje, które adresy URL są oznaczone jako słabe, wymagające poprawy lub dobre. Dane laboratoryjne z Lighthouse są pomocne przy diagnozie, ale to dane polowe decydują o rankingu.
Jak poprawić LCP w Divi?
LCP (Largest Contentful Paint) najczęściej psuje duży obraz hero lub wolny serwer. Rozwiązania: kompresja i format WebP/AVIF, atrybut fetchpriority=”high” dla głównego obrazu, preload kluczowych zasobów oraz dobry hosting z niskim TTFB. W Divi wyłącz też lazy-load dla obrazu nad linią załamania (above the fold).
Jak poprawić CLS i INP?
CLS (przesunięcia układu) eliminujesz, ustawiając stałe wymiary obrazów i rezerwując miejsce na elementy ładowane dynamicznie (banery, reklamy). INP (responsywność na interakcje) poprawisz, ograniczając ciężki JavaScript — w Divi pomaga wyłączenie nieużywanych modułów i odroczenie skryptów przez WP Rocket.
Narzędzia, które pomagają
WP Rocket (cache + optymalizacja JS/CSS), Perfmatters (wyłączanie zbędnych skryptów per strona), oraz wtyczki do konwersji obrazów (ShortPixel, Imagify). Połączenie dobrego hostingu LiteSpeed i tych narzędzi pozwala większości stron Divi osiągnąć zielone wskaźniki Core Web Vitals.
Realne dane vs dane laboratoryjne
Core Web Vitals oceniane są na podstawie danych polowych (CrUX) z realnych użytkowników z ostatnich 28 dni, nie z jednorazowego testu Lighthouse. Dlatego po wdrożeniu poprawek efekt w Search Console pojawia się z opóźnieniem. Lighthouse służy do diagnozy, ale o rankingu decyduje to, czego doświadczają prawdziwi odwiedzający.
Priorytety optymalizacji Core Web Vitals
- Najpierw LCP — zwykle największy i najłatwiejszy do poprawy wskaźnik.
- Potem CLS — stabilność układu, szybka do naprawienia.
- Na końcu INP — wymaga ograniczenia ciężkiego JavaScriptu.
Core Web Vitals a Divi — podsumowanie
Divi może osiągać zielone wskaźniki, o ile zadbasz o hosting, cache i optymalizację mediów. Mit o „ciężkim Divi” dotyczy stron zaniedbanych, nie samego motywu. Regularnie monitoruj raport w Search Console i poprawiaj adresy oznaczone jako wymagające poprawy — to bezpośrednio wspiera pozycje w Google.
