Rozwiązanie ostrzeżenia „Unikaj nadmiernego rozmiaru DOM” w WordPress

Czy otrzymujesz ostrzeżenia z Google PageSpeed Insights lub Lighthouse o wydajności Twojej witryny WordPress?

To częsty problem wielu właścicieli witryn WordPress i ważne jest, aby zająć się nim szybko.

Możesz nie wiedzieć, ale duży rozmiar DOM może spowolnić wyświetlanie treści i obrazów na Twojej witrynie. Zużywa również więcej pamięci, sprawia, że interakcje wydają się ociężałe, oraz spowalnia skrypty, co szkodzi wydajności witryny i wrażeniom użytkownika.

Aby przyspieszyć Twoją witrynę WordPress i poprawić wrażenia użytkownika, musisz rozwiązać problem dużego rozmiaru DOM. Zobaczmy, jak naprawić ten problem.

Zrozumienie DOM

DOM, czyli Document Object Model, reprezentuje strukturę i zawartość witryny WordPress. Organizuje elementy takie jak nagłówki, treść, wizualizacje i przyciski w określonej kolejności, ułatwiając dostęp do nich i ich modyfikację za pomocą języków programowania takich jak HTML, CSS i JavaScript.

Pomyśl o DOM jak o drzewie genealogicznym. Podobnie jak drzewo genealogiczne z rodzicami, dziećmi i krewnymi, witryna WordPress ma różne elementy (węzły) na różnych poziomach (głębokość). Ta hierarchia jest kontynuowana aż do osiągnięcia ostatniego elementu (węzła dziecka). DOM ze zbyt dużą liczbą węzłów nazywany jest „Nadmiernym rozmiarem DOM".

Kluczowe pojęcia:

• Węzły: Znane również jako znaczniki HTML, są to podstawowe elementy DOM.
• Głębokość: Odnosi się do tego, jak głęboko sięga gałąź w drzewie DOM.
• Element dziecko: Element wymieniony pod innym elementem, znajdujący się między otwierającymi i zamykającymi znacznikami HTML. Na przykład:
  Hello World

Teraz, gdy rozumiesz DOM.

Skąd pochodzi nadmierny rozmiar DOM?

Duże rozmiary DOM występują, gdy Twoja strona internetowa ma zbyt wiele znaczników HTML lub gdy są one zagnieżdżone zbyt głęboko. Sprawia to, że przeglądarka użytkownika musi pracować ciężej, spowalniając czasy ładowania strony i obniżając Twoje wyniki szybkości strony.

Wolne wykonywanie JavaScript i CSS często wynika z tego, że przeglądarka musi przetworzyć więcej węzłów, co opóźnia renderowanie strony.

Rozległy DOM zwiększa wykorzystanie pamięci, opóźnia przetwarzanie stylów i powoduje kosztowne reflows układu. Modyfikując obiekty DOM, możesz kontrolować, które elementy strony są wyświetlane użytkownikowi. Możesz to znaleźć w DevTools przeglądarki lub ekranach Inspect Element:

Jednak jeśli używasz narzędzia takiego jak Google Lighthouse, możesz zobaczyć ostrzeżenie o wydajności na ten temat.

Wiadomość jest jasna: powinieneś stosować się do ’Avoid an excessive DOM size’. Google Lighthouse raportuje to ostrzeżenie w trzech obszarach:

1. Całkowita liczba elementów: Jeśli Twoja strona ma więcej niż 800 elementów w drzewie DOM, zobaczysz ostrzeżenie.
2. Maksymalna głębokość DOM: Ta wartość pokazuje sekcję kodu z najgłębiej zagnieżdżonymi elementami.
3. Węzeł rodzic z wieloma węzłami dziećmi: Lighthouse oznacza każdy węzeł rodzic z więcej niż 60 węzłami dziećmi.

Chociaż jest to „Diagnostyka" w Lighthouse, utrzymywanie małego rozmiaru DOM poprawia wydajność witryny i wrażenia użytkownika, podnosząc Twój wynik Core Web Vitals.

Przyczyny nadmiernego rozmiaru DOM

Duży rozmiar DOM może znacznie spowolnić Twoje strony internetowe. Oto kluczowe czynniki przyczyniające się do tego problemu:

1. Przeciążone strony: Strona internetowa zawierająca zbyt wiele elementów z powodu złożonych projektów lub zbędnego kodu prowadzi do przeciążonego drzewa DOM. To nie tylko spowalnia stronę, ale także pogarsza wrażenia użytkownika.
2. Nadmierne zagnieżdżanie: Głęboko zagnieżdżone struktury HTML tworzą złożone drzewo DOM, utrudniając przeglądarkom efektywne renderowanie strony. Prowadzi to do wolniejszego przetwarzania CSS i JavaScript.
3. Rozbudowane motywy i wtyczki: Motywy i wtyczki często dodają niepotrzebne elementy, takie jak JavaScript lub CSS. Wiele motywów ma domyślne funkcje, które rozdymają DOM, podczas gdy wtyczki mogą wprowadzać dodatkowe skrypty i style, zwiększając czasy ładowania nawet wtedy, gdy te funkcje nie są wykorzystywane.

Identyfikowanie nadmiernego rozmiaru DOM: narzędzia i techniki

Zrozumienie i zarządzanie rozmiarem DOM Twojej witryny jest niezbędne dla optymalnej wydajności. Oto kilka narzędzi i technik, które pomogą Ci zidentyfikować i rozwiązać ten problem:

1. Google Lighthouse

Google Lighthouse to bezpłatne narzędzie open source, które pomaga zidentyfikować problemy z wydajnością witryny, w tym nadmierny rozmiar DOM. Oto jak go używać:

• Otwórz Chrome i przejdź do swojej strony internetowej.
• Kliknij prawym przyciskiem myszy na stronie i wybierz „Inspect", aby otworzyć Narzędzia dla deweloperów.
• Kliknij zakładkę „Lighthouse", a następnie „Analyze page load."

2. Chrome DevTools

Chrome DevTools daje szczegółowy widok DOM Twojej strony internetowej. Pomaga liczyć węzły DOM i wskazywać elementy przyczyniające się do dużego rozmiaru DOM. Wykonaj te kroki:

• Otwórz swoją stronę internetową w Chrome.
• Kliknij prawym przyciskiem myszy i wybierz „Inspect", aby otworzyć DevTools.
• Zobacz drzewo DOM w zakładce „Elements" i policz węzły.

3. WebPageTest

WebPageTest to internetowe narzędzie oferujące szczegółową analizę wydajności Twojej strony internetowej, w tym podział elementów DOM. Oto jak go używać:

• Odwiedź WebPageTest.org.
• Wprowadź URL swojej strony internetowej.
• Kliknij „Start Test".

4. GTmetrix

GTmetrix to kolejne wartościowe narzędzie, które analizuje wydajność Twojej strony internetowej, w tym rozmiar DOM. Oto jak go używać:

• Przejdź na GTmetrix.com.
• Wprowadź URL swojej strony internetowej.
• Kliknij „Test your site" i przejrzyj szczegółowy raport, skupiając się na metrykach związanych z DOM.

5. PageSpeed Insights

PageSpeed Insights od Google dostarcza informacji o wydajności Twojej strony internetowej, w tym problemach z rozmiarem DOM. Oto jak go używać:

• Odwiedź PageSpeed Insights.
• Wprowadź URL swojej strony internetowej.
• Kliknij „Analyze", aby uzyskać szczegółowy raport o wydajności Twojej strony internetowej, z konkretnymi rekomendacjami dotyczącymi optymalizacji rozmiaru DOM.

Korzystając z tych narzędzi, możesz skutecznie diagnozować i optymalizować rozmiar DOM swojej witryny dla lepszej wydajności.

Rozwiązanie problemu nadmiernego rozmiaru DOM: porady i wskazówki

Zanim będziesz mógł naprawić ostrzeżenie „avoid excessive-DOM size", musisz zidentyfikować jego przyczyny.

Najpierw użyj Google Lighthouse, aby znaleźć Maksymalną głębokość DOM i Maksymalne elementy dzieci. Następnie użyj inspektora DOM swojej przeglądarki, aby sprawdzić DOM.

Twoim celem jest zidentyfikowanie, co powoduje nadmierną liczbę węzłów DOM.

1. Unikaj słabo zakodowanych wtyczek i motywów

Używanie wtyczki takiej jak linia czasu, kalendarz lub slider, która tworzy zbyt wiele węzłów DOM, może spowolnić Twoją witrynę. Aby poprawić wydajność, zamień ją na bardziej wydajną wtyczkę.

Podobnie słabo zakodowane motywy i szablony mogą zaszkodzić szybkości Twojej witryny. Możesz ulepszyć swoją witrynę, eliminując niepotrzebny kod za pomocą uproszczonego edytora lub modyfikując swój szablon.

2. Zmniejsz węzły DOM JavaScript

JavaScript może czasami dodawać zbyt wiele węzłów DOM do strony, spowalniając witrynę. Na przykład widget czatu może utworzyć nadmierną liczbę węzłów.

Rozważ usunięcie problematycznego pliku JavaScript lub przejście na bardziej wydajny widget. Ta prosta zmiana może znacznie poprawić wydajność i szybkość Twojej witryny.

3. Unikaj kreatorów stron, które produkują nadmierne HTML

Kreatory stron takie jak WP Bakery, Elementor i Gutenberg mogą czasami generować zbyt wiele węzłów DOM, spowalniając Twoją witrynę. Te narzędzia są pomocne, ale mogą tworzyć obszerny i niewydajny kod.

Aby to naprawić, oczyść nadmiarowy kod i zoptymalizuj swój przepływ pracy. Niedawno deweloperzy Elementora wprowadzili ulepszenia, aby zmniejszyć rozdęcie i zwiększyć wydajność. Z kolei Gutenberg ma tendencję do produkowania czystszego HTML, co może pomóc w utrzymaniu szczuplejszej struktury.

Regularnie przeglądaj i upraszczaj swój HTML, aby Twoja witryna była szybka i przyjazna dla użytkownika. Zapewni to szybsze czasy ładowania i lepsze wrażenia dla odwiedzających.

4. Zoptymalizuj HTML swojej witryny WordPress

Aby zoptymalizować, jak HTML Twojej witryny WordPress jest zorganizowany, oto co możesz zrobić:

Wybierz prosty motyw, taki jak Hello Elementor lub Elementor, który utrzymuje Twoje strony czyste bez niepotrzebnych elementów.

Przejrzyj swoje strony i posty w edytorze WordPress. Usuń wszelkie nieużywane shortcode, dodatkowe znaczniki div lub puste elementy.

Kliknij prawym przyciskiem myszy na swojej witrynie WordPress i wybierz „View Page Source" lub naciśnij „CTRL + U". Poszukaj powtarzających się sekcji kodu, takich jak wiele znaczników div z tą samą klasą lub atrybutami stylu.

Przejdź do panelu WordPress → „Wygląd" → „Edytor motywu." Tutaj możesz edytować pliki PHP swojego motywu.

Wyeliminuj wszelki niepotrzebnie zagnieżdżony kod.

Po wprowadzeniu zmian zapisz plik i przetestuj swoją witrynę, aby upewnić się, że wszystko działa poprawnie.

Kliknij prawym przyciskiem myszy na swojej witrynie i wybierz „Inspect". Przejdź do zakładki Lighthouse i kliknij „Analyze page load", aby wygenerować raport. To sprawdzi ostrzeżenia o „Avoid an Excessive DOM Size".

5. Zmniejsz obciążenie witryny, zarządzając skryptami

Aby skutecznie zmniejszyć rozmiar DOM swojej witryny, konieczne jest staranne zarządzanie używanymi skryptami i wtyczkami. Oto podejście krok po kroku:

Audytuj swoje wtyczki: Przejrzyj wszystkie wtyczki zainstalowane na Twojej witrynie. Zidentyfikuj, które są niezbędne, a które nie są używane. Wtyczki, które nie są używane lub znacząco spowalniają Twoją witrynę, powinny zostać dezaktywowane lub całkowicie usunięte, aby usprawnić wydajność witryny.

Optymalizuj skrypty: Rozważ użycie wtyczek takich jak WP Rocket lub Asset CleanUp. Te narzędzia pomagają poprzez minifikację i łączenie skryptów. Minifikacja usuwa niepotrzebne znaki z kodu bez zmiany jego funkcjonalności.

Z kolei łączenie skryptów zmniejsza całkowitą liczbę plików, które przeglądarka użytkownika musi pobrać, redukując w ten sposób żądania i minimalizując rozmiar DOM.

Wskazówki, jak zmniejszyć rozmiar DOM dla lepszej wydajności

Jesteś ciekaw, jak zmniejszyć rozmiar DOM swojej witryny? Oto kilka praktycznych wskazówek:

• Używaj Lazy Loading i Nieskończonego Przewijania – Lazy loading opóźnia ładowanie niektórych części Twojej witryny, takich jak obrazy na stronach kategorii, dopóki nie są potrzebne. Ograniczenie liczby postów na blogu lub pozycji na stronach produktów do około dziesięciu również może przyspieszyć czasy ładowania.
• Podziel długie strony na wiele stron – Zamiast mieć jedną długą stronę z dużą ilością treści (np. blogi, formularze kontaktowe i produkty), utwórz osobne strony dla każdej z nich. Użyj paska nawigacji, aby je połączyć.
• Popraw renderowanie strony za pomocą CSS – Wypróbuj właściwość CSS 'content-visibility’. Sprawia ona, że przeglądarka pomija renderowanie elementów, dopóki nie są potrzebne, co może poprawić wydajność.
• Uprość CSS i JavaScript – Unikaj złożonych stylów CSS i ciężkiego kodu JavaScript. Mogą one zwiększyć rozmiar DOM i spowolnić Twoją witrynę. Uproszczenie ich może zrobić dużą różnicę.

Podsumowanie

Tak właśnie radzisz sobie z ostrzeżeniem „Avoid Excessive DOM Size" w WordPress! Dowiedziałeś się o problemie i poznałeś sposoby jego rozwiązania, czyniąc swoją witrynę bardziej usprawnioną i responsywną.

Każda optymalizacja sprawia, że Twoja witryna jest szybsza, bardziej wydajna i łatwiejsza w użyciu. Pamiętaj o tych wskazówkach, rozwijając swoje umiejętności webowe.

Powiązane artykuły

• Jak naprawić błąd WordPress „Sidebar nie pojawia się"
• Dlaczego WordPress jest wolny + Jak to naprawić
• Dlaczego kopia zapasowa danych i odzyskiwanie po awarii są niezbędne dla WordPress?
• Jak naprawić i zoptymalizować bazę danych WordPress
• Jak cofnąć zmiany w WordPress (Rewizje, Automatyczne zapisy, Snapshoty)