Jak zwiększyć szybkość działania Divi w WordPress?

Divi od wersji 4.10 oferuje zestaw wbudowanych narzędzi optymalizacyjnych, które wielu użytkowników pomija. W panelu Divi przejdź do Theme Options → Performance i włącz Dynamic CSS - zamiast jednego gigantycznego pliku CSS, Divi wygeneruje osobne arkusze dla każdej strony, ładując tylko potrzebne style. Critical CSS automatycznie wyodrębnia style above-the-fold i wstawia je inline, eliminując render-blocking CSS. Dynamic JavaScript Libraries ładuje skrypty modułów tylko wtedy, gdy dany moduł jest faktycznie użyty na stronie. Włącz Defer jQuery And jQuery Migrate, aby opóźnić ładowanie jQuery do momentu, gdy DOM będzie gotowy. Te ustawienia same w sobie potrafią poprawić wynik PageSpeed o 15-25 punktów.

Typowa strona na Divi zawiera dziesiątki zagnieżdżonych sekcji, wierszy i modułów, z których wiele generuje nadmiarowy kod HTML i CSS. Przejdź przez każdą stronę i usuń puste moduły, ukryte sekcje i nieużywane wiersze. Unikaj nadmiernego zagnieżdżania - każdy dodatkowy poziom wierszy i kolumn dodaje wrappery div zwiększające DOM size. Zamiast wielu modułów Text użyj jednego modułu Code z czystym HTML. Zredukuj liczbę animacji - efekty fade, slide i zoom wymagają dodatkowego JavaScript i spowalniają rendering. W sekcjach z tłem wideo zamień je na statyczne obrazy z lazy loading. Sprawdź łączny DOM size w Chrome DevTools - strony Divi powyżej 1500 elementów DOM będą miały problemy z wydajnością na urządzeniach mobilnych.

Divi zachęca do stosowania dużych, pełnoekranowych obrazów tła i sekcji hero, co bez optymalizacji prowadzi do stron ważących 5-10 MB. Zainstaluj ShortPixel lub Imagify, które automatycznie kompresują obrazy przy uploadzie i konwertują je do formatu WebP (o 25-30% lżejszego od JPEG). Dla obrazów tła w sekcjach Divi ustaw odpowiednie rozmiary - nie ładuj obrazu 4000px na sekcję wyświetlaną w 1920px. Wykorzystaj natywne lazy loading WordPress dla obrazów poniżej fold. Jeśli używasz modułów wideo, zamień osadzenia YouTube na fasady (YouTube facade) - zamiast ładować cały iframe YouTube (1-2 MB), wyświetl miniaturę i załaduj odtwarzacz dopiero po kliknięciu. TinyPNG jest przydatny do kompresji PNG z przezroczystością używanych w logo i ikonach.

WP Rocket i Divi współpracują doskonale, ale wymagają specyficznej konfiguracji. W ustawieniach WP Rocket włącz Page Caching i Mobile Caching (Divi generuje inny układ dla mobile). W sekcji File Optimization włącz Minify CSS i JavaScript, ale dodaj divi-builder do wykluczeń z Delay JavaScript - opóźnienie ładowania skryptów buildera może powodować błędy wizualne. Włącz Remove Unused CSS (RUCSS) - ta funkcja analizuje każdą stronę i usuwa nieużywane style, co jest szczególnie skuteczne dla Divi, które domyślnie ładuje style wszystkich modułów. Skonfiguruj Preload Cache, aby WP Rocket automatycznie generował cache po aktualizacjach. Włącz CDN w WP Rocket, jeśli korzystasz z Cloudflare, i skonfiguruj Heartbeat API control, aby zredukować obciążenie serwera w panelu admina.

Optymalizacja to proces ciągły, nie jednorazowe działanie. Skonfiguruj monitoring w GTmetrix z tygodniowymi raportami - narzędzie automatycznie przetestuje Twoją stronę i powiadomi o regresji wydajności. Google Search Console wyświetla raport Core Web Vitals z danymi od realnych użytkowników (Field Data), co jest cenniejsze niż wyniki laboratoryjne. Zainstaluj Query Monitor, aby identyfikować wolne zapytania do bazy danych i wtyczki obciążające serwer. Po każdej aktualizacji Divi lub wtyczek sprawdź, czy wydajność nie spadła. Regularnie przeglądaj listę zainstalowanych wtyczek i usuwaj nieużywane - każda wtyczka dodaje kod PHP, CSS i JavaScript, nawet jeśli nie jest aktywnie wykorzystywana na froncie strony.