Napraw ostrzeżenie Lighthouse dotyczące nadmiernego rozmiaru DOM

Czym jest ostrzeżenie Lighthouse 'excessive-DOM size'?

Czym jest ostrzeżenie avoid excessive-DOM size w Lighthouse? Lighthouse oznacza strony, które mają:

• więcej niż 1500 węzłów DOM łącznie.
  Oznacza to, że na naszej stronie jest więcej niż 1500 elementów HTML.
• maksymalną głębokość zagnieżdżenia węzłów większą niż 32.
  Dzieje się tak, gdy element jest zagnieżdżony w co najmniej 32 elementach nadrzędnych.
• węzeł nadrzędny z więcej niż 60 węzłami podrzędnymi.
  Może się tak zdarzyć, gdy element nadrzędny (np. tabela lub lista) ma więcej niż 60 elementów podrzędnych (wiersze tabeli lub elementy listy)

Ostrzeżenie 'avoid excessive DOM size' nie wpływa bezpośrednio na żadne metryki Lighthouse. Teoretycznie strony z dużym rozmiarem DOM mogłyby ładować się dość szybko. W praktyce często tak nie jest. Nadmierny rozmiar DOM najprawdopodobniej pośrednio wpłynie na ważne metryki Lighthouse, takie jak Largest Contentful Paint (LCP) i Cumulative Layout Shift (CLS).

Krótkie przypomnienie — czym jest DOM?

DOM to skrót od Document Object Model. DOM jest drzewiastą reprezentacją obiektową Twojego HTML, gdzie każdy element HTML (na przykład: body lub h1) jest reprezentowany przez własny węzeł.

Co powoduje nadmierny rozmiar DOM?

Nadmierny rozmiar DOM może mieć wiele przyczyn. Nadmierny rozmiar DOM jest zwykle spowodowany przez:

• Źle napisane wtyczki w Twoim CMS.
• Węzły DOM tworzone przez JavaScript.
• Kreatory stron generujące rozdęty HTML (na przykład: Elementor lub WP Bakery).
• Tekst kopiowany i wklejany do edytora WYSIWYG (np. TinyMCE).
• Źle napisany kod szablonu.

Jak 'excessive-DOM size' wpływa na szybkość strony

Duży DOM nie wpływa bezpośrednio na metryki Lighthouse. Sprawia jednak, że renderowanie strony internetowej jest niepotrzebnie skomplikowane, co prawie uniemożliwia uzyskanie wysokiego wyniku Lighthouse. Twoja przeglądarka będzie musiała wykonać więcej pracy, zanim strona będzie mogła zostać wyświetlona na ekranie. Istnieją 3 problemy związane z dużym DOM.

• Rozmiar Twojego HTML jest większy, ponieważ kod jest rozdęty. Zwiększy to czas potrzebny na pobranie strony.
• Duży rozmiar DOM spowolni wydajność renderowania. Twoja przeglądarka musi wykonać więcej obliczeń (DOM) przy pierwszym ładowaniu i za każdym razem, gdy użytkownik lub skrypt wchodzi w interakcję z Twoją stroną.
• Twoja przeglądarka może zużywać znacznie więcej pamięci podczas interakcji z DOM za pomocą JavaScript.

Jak naprawić 'avoid excessive-DOM size'

Aby naprawić ostrzeżenie 'avoid excessive-DOM size', musisz najpierw prześledzić jego źródło. Lighthouse wskaże Ci, gdzie znajdują się Maximum DOM Depth i Maximum Child Elements. Stamtąd musisz przeprowadzić trochę poszukiwań. Użyj inspektora DOM w swojej przeglądarce internetowej i sprawdź DOM. Spróbuj ustalić, co tworzy dużą liczbę węzłów DOM. Jest 5 typowych przyczyn:

1. Źle napisane wtyczki w Twoim CMS.
   Gdy wtyczka, na przykład slider lub wtyczka kalendarza, tworzy dużą liczbę węzłów DOM, możesz rozważyć zastąpienie tej wtyczki bardziej zoptymalizowaną wtyczką.
2. Węzły DOM tworzone przez JavaScript.
   JavaScript, na przykład widget czatu, może wstrzykiwać dużą liczbę węzłów DOM do DOM. W takim przypadku usuń plik JavaScript lub znajdź zamiennik o tej samej funkcjonalności
3. Kreatory stron generujące rozdęty HTML
   Kreatory stron, takie jak Elementor lub WP Bakery, często tworzą rozdęty kod z dużą liczbą węzłów DOM. Nie ma na to łatwego rozwiązania. Kreatory stron są często częścią przepływu pracy. Rozwiązanie obejmuje oczyszczenie rozdętego kodu i zmianę przepływu pracy.
4. Tekst kopiowany i wklejany do edytora WYSIWYG
   Większość edytorów WYSIWYG, takich jak TinyMCE, słabo radzi sobie z czyszczeniem wklejanego kodu, szczególnie gdy jest wklejany z innego źródła tekstu sformatowanego, takiego jak Microsoft Word. Skopiowany zostaje nie tylko tekst, ale także style. Te style mogą być osadzone w dużej liczbie węzłów DOM. Rozwiązanie tego problemu jest proste. Przestań wklejać treści do edytora i oczyść strony, które już zawierają wklejony, rozdęty tekst.
5. Źle napisany kod (szablonu).
   Gdy duży rozmiar DOM jest tworzony przez edytor lub spowodowany przez szablon, sprawy mogą się skomplikować. Oznacza to, że rozdęty kod jest częścią rdzenia Twojej strony. Będziesz musiał zmienić edytor, przepisać części szablonu lub nawet zacząć od zera.

Obejścia dla 'avoid excessive-DOM size'

Czasami nie jest możliwe usunięcie nadmiernego rozmiaru DOM bez przepisania dużych części strony i zmiany całego przepływu pracy. Istnieje kilka obejść, które mogą zmniejszyć wpływ nadmiernego rozmiaru DOM. Te obejścia są dalekie od ideału i mogą wprowadzić zupełnie nowy zestaw wyzwań, które w niektórych przypadkach mogą wpłynąć na SEO lub indeksowanie.

• Leniwe ładowanie części strony internetowej.
  Aby przyspieszyć początkowe renderowanie, możesz rozważyć leniwe ładowanie części strony. Na przykład stopki.
• Popraw renderowanie strony za pomocą content-visibility.
  Właściwość CSS content-visibility informuje przeglądarkę, aby pominęła stylowanie, układ i malowanie, dopóki nie będą potrzebne, co może zmniejszyć wpływ nadmiernej liczby węzłów.
• Podziel duże strony na wiele podstron.
  Podział dużych stron na wiele podstron może zmniejszyć liczbę węzłów DOM, gdy sama treść tworzy wiele węzłów DOM.
• Zaimplementuj nieskończone przewijanie.
  Nieskończone przewijanie to w zasadzie leniwe ładowanie — podczas przewijania powtarzających się elementów, takich jak obrazy (Pinterest) czy duże tabele danych, nieskończone przewijanie może znacznie przyspieszyć Twoją stronę.
• Unikaj JavaScript intensywnie wykorzystującego pamięć.
  Mając do czynienia z dużą liczbą węzłów DOM na stronie, bądź szczególnie ostrożny z JavaScript. document.getElementsByTagName('div'); może załadować dużą liczbę węzłów DOM, co zwiększa zużycie pamięci.
• Unikaj skomplikowanych deklaracji CSS.
  Mając do czynienia z dużą liczbą węzłów DOM na stronie, bądź szczególnie ostrożny ze skomplikowanymi deklaracjami CSS. div:last-child; musi sprawdzić status last-child dla każdego div na Twojej stronie.