Jak naprawić nadmierny rozmiar DOM w WordPress (11 wskazówek ekspertów)

Ostrzeżenie „Unikaj nadmiernego rozmiaru DOM” w WordPress oznacza, że Twoja strona ma zbyt wiele elementów HTML, co spowalnia jej działanie.

Najlepsze sposoby na naprawienie tego to użycie wtyczki wydajnościowej, takiej jak WP Rocket, optymalizacja sposobu ładowania obrazów i galerii oraz wybór lekkiego motywu lub kreatora stron.

To ostrzeżenie może pojawić się w Google Lighthouse lub innych narzędziach do testowania prędkości i brzmi technicznie. Ale koncepcja jest prosta: Twoja strona internetowa to zbiór części, a zbyt wiele z nich może przytłoczyć przeglądarkę.

Tutaj na WPBeginner nie tylko zoptymalizowaliśmy nasze własne strony o dużym natężeniu ruchu, aby rozwiązać ten konkretny problem, ale także pomogliśmy niezliczonym użytkownikom poprawić szybkość ich witryn.

W tym artykule szczegółowo opiszemy 11 naszych ekspertów metod rozwiązania problemu i poprawy wydajności Twojego WordPressa.

Co oznacza ostrzeżenie „Unikaj nadmiernego rozmiaru DOM”?

Ostrzeżenie „Unikaj nadmiernego rozmiaru DOM” pojawia się w narzędziach do testowania prędkości, takich jak Google PageSpeed Insights, gdy strona internetowa zawiera zbyt wiele elementów HTML, których przeglądarka nie może efektywnie przetworzyć.

DOM to skrót od Document Object Model (Model Obiektu Dokumentu). Jest to struktura przypominająca drzewo, która reprezentuje wszystkie obiekty na Twojej stronie internetowej. Każdy element, taki jak nagłówek, akapit, obraz lub przycisk, jest 'węzłem' na tym drzewie.

Całkowita liczba tych węzłów stanowi rozmiar DOM. Gdy liczba ta staje się zbyt duża, przeglądarka potrzebuje więcej czasu i zasobów do renderowania strony, co może spowolnić Twoją witrynę.

Jak nadmierny rozmiar DOM wpływa na wydajność witryny?

Duży rozmiar DOM negatywnie wpływa na wydajność Twojej witryny WordPress w kilku kluczowych obszarach. Każdy dodany element do strony, od tekstu i obrazów po formularze i menu, zwiększa liczbę węzłów DOM.

Ta złożoność ma następujące skutki:

• Wolniejsze renderowanie strony: Przeglądarka musi przeanalizować całe drzewo DOM, zanim będzie mogła wyświetlić stronę. Większe drzewo wymaga dłuższego przetwarzania, co opóźnia czas, w którym odwiedzający zobaczy Twoje treści.
• Zwiększone zużycie pamięci: Złożona struktura DOM wymaga więcej pamięci i mocy obliczeniowej od urządzenia użytkownika. Może to być szczególnie zauważalne na telefonach komórkowych.
• Słabe doświadczenie użytkownika: Te spadki wydajności prowadzą do wolniejszego ładowania. Może to frustrować odwiedzających i powodować, że opuścicie Twoją witrynę, zanim się ona w ogóle załaduje.
• Negatywny wpływ na SEO: Wyszukiwarki takie jak Google używają szybkości ładowania strony jako czynnika rankingowego. Wolno ładujące się strony mogą zaszkodzić Twojemu SEO WordPress i zmniejszyć konwersje w witrynie.

Ile elementów DOM to za dużo dla Google?

Narzędzia testujące, takie jak Google Lighthouse, nie używają tylko jednej liczby do oznaczania nadmiernego rozmiaru DOM. Zamiast tego analizują trzy konkretne kryteria:

• Całkowita liczba węzłów DOM: Ostrzeżenie jest wyzwalane, jeśli całkowita liczba elementów HTML (węzłów) na stronie przekracza 1500. Jest to najczęstsza przyczyna ostrzeżenia.
• Maksymalna głębokość DOM: Ostrzeżenie jest wyzwalane, jeśli elementy są zagnieżdżone zbyt głęboko w sobie. Lighthouse oznacza stronę, jeśli zagnieżdżenie przekracza 32 poziomy.
• Maksymalna liczba elementów podrzędnych: Ostrzeżenie jest wyzwalane, jeśli pojedynczy element nadrzędny ma więcej niż 60 elementów podrzędnych bezpośrednio wewnątrz niego. Często zdarza się to w przypadku źle zakodowanych mega menu lub galerii.

Strony z wieloma suwakami, złożonymi układami z wieloma zagnieżdżonymi sekcjami lub licznymi osadzonymi elementami częściej przekraczają te limity. Jednak nie musisz rezygnować z projektu, aby rozwiązać ten problem.

Przygotowaliśmy dla Ciebie kompleksowy przewodnik, który pomoże Ci to rozwiązać. Oto 11 sprawdzonych sposobów na zmniejszenie rozmiaru DOM i poprawę wydajności WordPressa:

1. Użyj wtyczki do optymalizacji szybkości WordPress
2. Sprawdź swój motyw i wtyczki
3. Użyj zoptymalizowanego kreatora stron
4. Zoptymalizuj swoje obrazy i filmy
5. Wdrożenie leniwego ładowania
6. Paginacja komentarzy lub postów z dużą ilością treści
7. Minimalizuj pliki CSS i JavaScript
8. Zredukuj blokujący renderowanie kod JavaScript i CSS
9. Włącz buforowanie WordPress
10. Użyj sieci CDN WordPress
11. Optymalizacja bazy danych WordPress

Zachęcamy do skorzystania z powyższych szybkich linków, aby dowiedzieć się więcej o konkretnej metodzie optymalizacji.

1. Użyj wtyczki optymalizującej prędkość WordPressa

Naszą pierwszą rekomendacją jest zainstalowanie potężnego pluginu do optymalizacji prędkości WordPress. Te pluginy zajmują się technicznymi optymalizacjami potrzebnymi do przyspieszenia Twojej strony internetowej.

Pozwala to skupić się na zarządzaniu i tworzeniu treści, podczas gdy wtyczka działa w tle.

Tutaj na WPBeginner używamy i polecamy WP Rocket. Używaliśmy go na własnych stronach internetowych do zarządzania buforowaniem, optymalizacją plików i leniwym ładowaniem, o czym możesz dowiedzieć się więcej w naszym artykule na temat jak przyspieszamy ładowanie stron na WPBeginner.

Chociaż WP Rocket jest przede wszystkim znany jako wtyczka do cachowania, wiele jego funkcji pomaga rozwiązać problemy spowodowane przez duży DOM. Obejmują one optymalizację plików, leniwe ładowanie i odraczanie JavaScript.

Wyjaśnimy te funkcje później w artykule. Możesz również przeczytać naszą pełną recenzję WP Rocket, aby uzyskać więcej informacji, lub skorzystać z naszego przewodnika konfiguracji, aby zacząć.

2. Sprawdź swój motyw i wtyczki

Chociaż wtyczki i motywy WordPress dodają funkcjonalności i stylu Twojej witrynie WordPress, mogą również przyczyniać się do nadmiernego rozmiaru DOM.

Źle napisane motywy i wtyczki mogą dodawać niepotrzebne elementy HTML, zwiększając strukturę strony. Podobnie, wtyczki i motywy z dodatkowymi funkcjami, których nie używasz, mogą nadal ładować swój kod, zwiększając DOM.

Aby sprawdzić, czy winowajcą jest konkretna wtyczka lub motyw, możesz dezaktywować wtyczki pojedynczo lub tymczasowo przełączyć się na domyślny motyw WordPress. Po każdej zmianie uruchom test prędkości, aby sprawdzić, czy ostrzeżenie o rozmiarze DOM zniknęło.

Aby uniknąć tego problemu, zawsze wybieraj motywy i wtyczki z renomowanych źródeł, takich jak oficjalny katalog WordPress lub znani deweloperzy. Te zasoby zazwyczaj mają bardziej rygorystyczne standardy kodowania.

Aby uzyskać godne zaufania rekomendacje, sprawdź WPBeginner Solution Center, gdzie testujemy i recenzujemy oprogramowanie WordPress.

3. Użyj zoptymalizowanego kreatora stron

Kreatory stron to doskonałe narzędzia do projektowania niestandardowych układów bez kodu, ale niektóre mogą przyczyniać się do nadmiernego rozmiaru DOM. Często opakowują Twoją treść w dodatkowe elementy HTML, aby kontrolować stylizację i układ.

Na przykład, źle zoptymalizowany page builder może opakować pojedynczy przycisk w wiele zagnieżdżonych kontenerów <div> w celu wyrównania i stylizacji. Każdy z tych kontenerów dodaje kolejny węzeł do DOM, szybko zwiększając całkowitą liczbę.

Jeśli podejrzewasz, że problemem jest Twój page builder, możesz go przetestować, dezaktywując go na witrynie stagingowej i ponownie sprawdzając rozmiar DOM. Możesz użyć wbudowanych narzędzi, takich jak Edytor Całej Witryny, ale mogą one brakować elastyczności.

Aby uzyskać najlepszą równowagę między elastycznością a wydajnością, zalecamy użycie zoptymalizowanego pod kątem szybkości kreatora stron, takiego jak SeedProd. W naszych testach konsekwentnie przewyższa on inne popularne kreatory.

Możesz zobaczyć, jak wypada na tle innych w naszej analizie Elementor vs. Divi vs. SeedProd.

Wiele naszych marek partnerskich, w tym WPForms i Duplicator, używa SeedProd do tworzenia swoich stron internetowych.

4. Optymalizuj swoje obrazy i filmy

Ważne jest, aby wyjaśnić, jak obrazy odnoszą się do rozmiaru DOM. Rozmiar pliku obrazu (w KB lub MB) nie wpływa na liczbę węzłów DOM. Tag <img> jest pojedynczym węzłem, niezależnie od tego, jak duży jest plik obrazu.

Jednak sposób wyświetlania obrazów może zwiększyć rozmiar DOM. Niektóre motywy i wtyczki galerii opakowują każdy obraz w wiele kontenerów <div> w celu stylizacji, lightboxów lub podpisów. Te dodatkowe elementy opakowujące zwiększają liczbę elementów DOM, a nie sam obraz.

Chociaż optymalizacja obrazów poprzez ich kompresję jest kluczowa dla szybkości strony, powinieneś również wybierać wtyczki do galerii, które generują czysty kod. Wtyczka taka jak Optimole może pomóc w kompresji obrazów i leniwym ładowaniu.

W przypadku filmów zalecamy nigdy nie przesyłać ich bezpośrednio do WordPressa.

Zamiast tego hostuj je w usługach takich jak YouTube lub Vimeo i osadzaj je. Zmniejsza to obciążenie serwera i utrzymuje czystszy DOM.

5. Ustaw leniwe ładowanie

Lenistwo (lazy loading) to technika polegająca na opóźnianiu ładowania elementów niekrytycznych, takich jak obrazy i filmy, do momentu, gdy znajdą się one w zasięgu widoku użytkownika. Pozwala to przeglądarce znacznie szybciej renderować początkową, widoczną część strony.

Nie ładując wszystkiego naraz, ładowanie leniwe (lazy loading) zmniejsza początkową pracę przetwarzania dla przeglądarki i tworzy znacznie płynniejsze wrażenia użytkownika.

Konfiguracja leniwego ładowania jest łatwa dzięki wtyczce takiej jak WP Rocket. W panelu administracyjnym WordPress przejdź do Ustawienia » WP Rocket i otwórz zakładkę „Media”. Tutaj możesz jednym kliknięciem włączyć leniwe ładowanie obrazów, filmów i ramek iframe.

W przypadku galerii zalecamy użycie plugina galerii z wbudowanym leniwym ładowaniem, takim jak Envira Gallery.

Możesz nawet leniwym ładowaniem sekcji komentarzy za pomocą wtyczki takiej jak Thrive Comments, aby dalej poprawić wydajność.

6. Paginuj komentarze lub posty z dużą ilością treści

Bardzo długie posty lub sekcje komentarzy mogą znacznie zwiększyć rozmiar DOM i spowolnić czas ładowania. Paginacja rozwiązuje ten problem, dzieląc te treści na wiele mniejszych stron.

Dzięki temu treść jest łatwiejsza do zarządzania zarówno dla przeglądarki, jak i dla czytelnika. Długie posty można łatwo podzielić, dodając blok „Podział strony” w edytorze WordPress. Szczegółowe instrukcje znajdziesz w naszym przewodniku jak podzielić posty WordPress na wiele stron.

Podobnie możesz podzielić komentarze na strony. Przejdź do Ustawienia » Dyskusja w obszarze administracyjnym WordPress, zaznacz pole wyboru obok opcji „Dziel komentarze na strony” i ustaw liczbę komentarzy na stronę.

Więcej informacji znajdziesz w naszym przewodniku na temat stronicowania komentarzy w WordPressie.

Sugerujemy unikanie nieskończonego przewijania, ponieważ stale dodaje ono nowe elementy do DOM, co może prowadzić do problemów z wydajnością.

7. Minifikacja plików CSS i JavaScript

Chociaż ta technika nie zmniejsza bezpośrednio liczby węzłów DOM, znacząco poprawia wydajność i łagodzi negatywny wpływ dużego DOM.

Minifikacja usuwa niepotrzebne znaki, takie jak komentarze, spacje i podziały wierszy z Twoich plików CSS i JavaScript. Zmniejsza to ich rozmiar, dzięki czemu przeglądarka szybciej je pobiera i przetwarza.

Wtyczka taka jak WP Rocket ułatwia to. Przejdź do Ustawienia » WP Rocket, przejdź do zakładki „Optymalizacja plików” i włącz funkcje minifikacji plików CSS i JavaScript. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem na temat minifikacji plików CSS i JavaScript.

Przed minifikacją zalecamy utworzenie kopii zapasowej witryny. W rzadkich przypadkach minifikacja może powodować problemy z niektórymi motywami lub wtyczkami.

8. Zredukuj JavaScript i CSS blokujące renderowanie

Jest to kolejna technika, która nie zmniejsza bezpośrednio liczby węzłów DOM, ale znacznie poprawia postrzeganą wydajność, zmieniając sposób ładowania plików.

Pomyśl o przeglądarce ładującej Twoją stronę jak o malowaniu obrazu. Zasoby blokujące renderowanie zmuszają przeglądarkę do zatrzymania malowania strony internetowej, dopóki nie zostaną w pełni załadowane. Odroczenie ich pozwala na najpierw namalowanie głównej treści, dzięki czemu użytkownik szybciej widzi Twoją witrynę.

WP Rocket posiada funkcje, które rozwiązują ten problem. Może łączyć pliki, aby zmniejszyć liczbę żądań HTTP i opóźnić ładowanie niekrytycznego JavaScript. Oznacza to, że użytkownicy widzą Twoją treść szybciej, nawet jeśli skrypty w tle nie zakończyły ładowania.

Więcej informacji znajdziesz w naszym artykule jak naprawić zasoby blokujące renderowanie w WordPress.

9. Włącz buforowanie WordPressa

Chociaż buforowanie nie zmniejsza bezpośrednio liczby węzłów DOM, dramatycznie przyspiesza czas ładowania stron, zwłaszcza dla powracających odwiedzających. Dzięki temu DOM ładuje się i wyświetla znacznie szybciej.

Cachowanie przechowuje statyczną wersję Twojej witryny. Kiedy użytkownik ponownie odwiedza stronę, jego przeglądarka może załadować tę zapisaną wersję zamiast odbudowywać stronę od zera, co jest znacznie szybsze. Zmniejsza to również obciążenie serwera, uwalniając go do szybszego przetwarzania DOM.

Konfiguracja buforowania jest prosta dzięki pluginowi takiemu jak WP Rocket, który automatycznie włącza optymalne ustawienia buforowania po aktywacji. Więcej o jego funkcjach buforowania dowiesz się z naszego przewodnika instalacji WP Rocket.

10. Użyj sieci CDN WordPress

CDN (Content Delivery Network) pomaga również łagodzić skutki dużego DOM bez bezpośredniego jego zmieniania. CDN to globalna sieć serwerów, która przechowuje kopie statycznych plików Twojej witryny (obrazów, CSS, JavaScript).

Kiedy użytkownik odwiedza Twoją witrynę, CDN dostarcza te pliki z serwera najbliższego jego fizycznej lokalizacji. Znacząco skraca to czas pobierania i pozwala przeglądarce znacznie szybciej rozpocząć przetwarzanie DOM.

Używamy CDN Cloudflare na WPBeginner. Możesz dowiedzieć się, dlaczego go wybraliśmy, w naszym wpisie o przejściu z Sucuri na Cloudflare.

Aby uzyskać inne opcje, sprawdź naszą listę najlepszych usług CDN WordPress.

11. Zoptymalizuj swoją bazę danych WordPress

Jest to kolejna pośrednia optymalizacja. Chociaż Twoja baza danych nie jest częścią DOM, przeładowana baza danych może spowolnić czas odpowiedzi serwera. To opóźnienie sprawia, że ładowanie Twojej witryny trwa dłużej, co może sprawić, że duży DOM będzie wydawał się jeszcze wolniejszy.

Z czasem Twoja baza danych może zapełnić się niepotrzebnymi danymi, takimi jak rewizje postów, spamujące komentarze i stare dane wtyczek. Oczyszczenie tego pomaga Twojej witrynie działać wydajniej.

Nasz poradnik na temat optymalizacji bazy danych WordPress pokazuje, jak używać wtyczki do bezpiecznego i szybkiego czyszczenia bazy danych.

Skup się na ogólnej wydajności WordPress, a nie tylko na rozmiarze DOM

Chociaż rozwiązanie ostrzeżenia „Unikaj nadmiernego rozmiaru DOM” w WordPress jest ważne dla szybkości witryny, nie jest to jedyny czynnik, który należy wziąć pod uwagę.

Witryna z dużą ilością funkcjonalności lub unikalnym formatowaniem może naturalnie mieć większy DOM, i to jest w porządku. Kluczem jest znalezienie odpowiedniej równowagi między wydajnością witryny a funkcjami.

Dlatego, oprócz rozmiaru DOM, warto zwrócić uwagę na inne metryki, takie jak Core Web Vitals. Są to specyficzne metryki, których Google używa do pomiaru doświadczenia użytkownika na stronie internetowej.

Najczęściej zadawane pytania dotyczące nadmiernego rozmiaru DOM

Oto odpowiedzi na niektóre z najczęściej zadawanych pytań dotyczących rozwiązywania problemów z rozmiarem DOM w WordPress.

Jaki jest dobry rozmiar DOM dla strony internetowej?

Zgodnie z wytycznymi Google, dobrym celem jest utrzymanie rozmiaru DOM poniżej 1500 całkowitych węzłów, z maksymalną głębokością zagnieżdżenia 32 poziomów i żadnym pojedynczym elementem nieposiadającym więcej niż 60 dzieci.

Czy używanie page buildera zawsze zwiększy rozmiar DOM?

Niekoniecznie. Nowoczesne, zorientowane na wydajność kreatory stron, takie jak SeedProd, są zaprojektowane do generowania czystego i wydajnego kodu. Jednak niektóre starsze lub źle napisane kreatory stron mogą dodawać wiele niepotrzebnych elementów opakowujących, które zwiększają rozmiar DOM.

Jak mogę bezpłatnie sprawdzić rozmiar DOM mojej witryny?

Możesz użyć darmowych narzędzi online, takich jak Google PageSpeed Insights lub GTmetrix. Możesz również sprawdzić to bezpośrednio w swojej przeglądarce. W Google Chrome kliknij prawym przyciskiem myszy na swojej stronie, wybierz „Zbadaj”, przejdź do zakładki „Konsola” i wpisz polecenie document.querySelectorAll('*').length, a następnie naciśnij Enter.

Dodatkowe zasoby dotyczące wydajności WordPress

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak naprawić nadmierny rozmiar DOM w WordPress.

Możesz również zapoznać się z tymi powiązanymi przewodnikami na temat poprawy wydajności Twojej witryny:

• Kompleksowy przewodnik po zwiększaniu szybkości i wydajności WordPress
• Jak przyspieszyć wydajność WooCommerce
• Sprawdzone sposoby na zmniejszenie współczynnika odrzuceń i zwiększenie konwersji

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.