7 sprawdzonych strategii naprawy Ostrzeżenie „Unikaj nadmiernego rozmiaru DOM”.

Opublikowany: 2022-11-23
TL;DR: Poprawienie ostrzeżenia „Unikaj nadmiernego rozmiaru DOM” nie poprawi wyników Lighthouse, ale ma bezpośredni wpływ na rzeczywistą wydajność Twojej witryny. Duży rozmiar DOM spowalnia witrynę, wydłuża czas renderowania i zwiększa koszty danych dla użytkowników oraz przeciąża pamięć ich urządzeń. Istnieje wiele rozwiązań problemu nadmiernego rozmiaru DOM, takich jak unikanie źle zakodowanych motywów i wtyczek, dzielenie witryny z jedną stroną na wiele stron i ostrożne korzystanie z kreatorów stron.

Większość sugestii ulepszeń Google PageSpeed ​​Insights jest dość prosta.

Niezależnie od tego, czy chodzi o „odroczenie obrazów poza ekranem”, „eliminację zasobów blokujących renderowanie” czy „zmniejszenie liczby nieużywanych CSS”, możesz zrozumieć, jakie kolejne kroki należy podjąć, aby rozwiązać problemy.

Jednak gdy przewiniesz trochę głębiej, nagle pojawi się ostrzeżenie „Unikaj nadmiernego rozmiaru DOM”:

Pierwsza reakcja:

Co to do cholery jest rozmiar DOM i jak to naprawić?!

Jesteś we właściwym miejscu.

Z poniższych akapitów dowiesz się wszystkiego, co musisz wiedzieć o rozmiarze DOM i jak radzić sobie z tym ostrzeżeniem:

  • Co to jest DOM (obiektowy model dokumentu)?
  • Jaki wpływ ma rozmiar DOM na wydajność strony?
  • Dlaczego widzisz ostrzeżenie „Unikaj nadmiernego rozmiaru DOM”.
  • Jak naprawić ostrzeżenie „Unikaj nadmiernego rozmiaru DOM”.

Osiągnij wynik 90+ PSI jednym kliknięciem. Zobacz swoją stronę z NitroPack!

Co to jest DOM?

Twoja witryna zawiera zasoby, takie jak dokument HTML, pliki CSS i JavaScript.

Za każdym razem, gdy użytkownik ładuje Twoją witrynę, jego przeglądarka nawiązuje połączenie i otrzymuje zasoby. Po otrzymaniu pierwszej porcji danych rozpoczyna się proces analizy.

Analiza składniowa to krok, który wykonuje przeglądarka, aby przekształcić dane (znaczniki HTML) w drzewo DOM.

DOM to model dokumentu reprezentujący HTML jako drzewo gałęzi i węzłów.

Każda gałąź drzewa kończy się węzłem, a każdy węzeł zawiera obiekty. Węzeł reprezentuje część dokumentu, taką jak element, ciąg tekstowy lub komentarz.

Mówiąc prościej, kiedy słyszysz DOM, oznacza to strukturę obiektów, które przeglądarka buduje za każdym razem, gdy ładowana jest strona internetowa.

Kluczowe terminy:

  • węzły. Każdy element lub znacznik w DOM jest nazywany węzłem lub liściem.
  • Głębokość. Liczba elementów w gałęzi DOM.
  • Element podrzędny. Ostatni węzeł, który nie rozgałęzia się dalej.

Jaki wpływ ma rozmiar DOM na wydajność strony?

Im więcej gałęzi i węzłów ma Twój DOM, tym większy będzie jego rozmiar.

Odpowiednio, im większy rozmiar DOM, tym więcej negatywnych problemów z wydajnością możesz napotkać.

Oto niektóre problemy, które korelują z większym rozmiarem DOM:

1. Zwiększone koszty danych i wolniejsze czasy ładowania

Duże drzewo DOM często zawiera wiele węzłów, które nie są widoczne, gdy użytkownik ładuje stronę po raz pierwszy. To niepotrzebnie zwiększy koszty danych, ponieważ będą musieli załadować więcej elementów dla Twoich użytkowników i spowolnić czas ładowania.

2. Przeciąża zasoby pamięci urządzenia użytkownika

Ciągła interakcja z zapytaniami JavaScript prowadzi do niskiej wydajności i powolnego renderowania. Skutkuje to negatywnym wrażeniem strony dla użytkowników Twojej witryny.

3. Zwiększony czas renderowania

Gdy użytkownicy wchodzą w interakcję z Twoją stroną, przeglądarka musi stale przeliczać pozycję i styl węzłów. Duże i skomplikowane drzewo DOM może drastycznie spowolnić renderowanie.

4. Zwiększony czas do pierwszego bajtu (TTFB)

TTFB mierzy, ile czasu zajmuje przeglądarce klienta otrzymanie pierwszego bajtu odpowiedzi z serwera. Nadmierny DOM wskazuje na większy dokument HTML. W rezultacie do przetransportowania jest więcej danych, co może zająć więcej czasu.

Dlaczego widzisz ostrzeżenie „Unikaj nadmiernego rozmiaru DOM” w PageSpeed ​​Insights

PSI używa Lighthouse do analizowania adresów URL w kontrolowanym środowisku (tj. przy użyciu danych laboratoryjnych) w celu zaprezentowania wyników w zakresie wydajności, dostępności, najlepszych praktyk i SEO.

Aby Lighthouse oflagował Twoją stronę i odpowiednio - wyświetlił ostrzeżenie „Unikaj nadmiernego rozmiaru DOM” w raporcie PSI, jeden z poniższych błędów musi być prawdziwy dla jego drzewa DOM:

  • Ma łącznie ponad 1500 węzłów DOM .
  • Ma maksymalną głębokość węzła większą niż 32 węzły .
  • Węzeł nadrzędny ma ponad 60 węzłów podrzędnych .

Warto wiedzieć: rozmiar DOM nie wpływa bezpośrednio na wyniki Lighthouse (tj. wydajność, dostępność, najlepsze praktyki i SEO). Nadmierny rozmiar DOM negatywnie wpłynie jednak na rzeczywistą wydajność Twojej witryny, prowadząc do długiego ładowania i złego samopoczucia użytkowników.

Dołącz do 31% najlepszych stron internetowych, które pomyślnie przechodzą Core Web Vitals! Zobacz swoją witrynę z NitroPack

 

Jak naprawić Unikaj nadmiernego rozmiaru DOM

Dobra praktyczna zasada Google brzmi:

„Ogólnie rzecz biorąc, szukaj sposobów tworzenia węzłów DOM tylko wtedy, gdy są potrzebne, i niszcz je, gdy nie są już potrzebne”.

Oczywiście łatwiej to powiedzieć niż zrobić, a czasami będziesz musiał przejść do sedna optymalizacji witryny.

Następnie sugerujemy zastosowanie niektórych z następujących poprawek:

1. Unikaj źle zakodowanych wtyczek i motywów

Po prostu rozdęją kod Twojej witryny, zwiększą rozmiar DOM i zaszkodzą szybkości i ogólnej wydajności Twojej witryny.

Jak stwierdzić, czy motyw/wtyczka zostały źle zakodowane?

Świetne pytanie. Odpowiedź brzmi:

  • Przeczytaj recenzje. Jeśli występują problemy, prawdopodobnie ktoś już je napotkał i skomentował.
  • Nie wstydź się wydać trochę pieniędzy. Tak jak wszystko inne, dostajesz to, za co płacisz. Oszczędność pieniędzy dzięki darmowemu motywowi/wtyczce może brzmieć świetnie, ale długoterminowe efekty będą kosztować znacznie więcej.
  • Sprawdź, kiedy była ostatnio aktualizowana. Zdecydowanie chcesz uniknąć nieaktualnych motywów i wtyczek.

Jeśli jesteś użytkownikiem WooCommerce lub planujesz założyć sklep, zdecydowanie powinieneś zapoznać się z naszymi dogłębnymi badaniami na temat najlepiej działających motywów Woo w 2022 roku.

Oto lista kontrolna rzeczy, na które należy zwrócić uwagę/unikać przy wyborze motywu:

  1. Wielofunkcyjne motywy. Zawierają wiele opcji, których nigdy nie użyjesz, a jednocześnie rozdęją Twój kod.
  2. Darmowe wersje. Ponownie, świetnie nadają się do jazdy próbnej, ale często osiągają gorsze wyniki i mogą sprawić ci wiele kłopotów.
  3. Zerowane motywy. Nigdy nie używaj złamanej wersji płatnego motywu, ponieważ może ona zawierać złośliwe skrypty, które mogą zaszkodzić Twojej witrynie.

 

2. Zminimalizuj węzły DOM oparte na JavaScript

Dodanie dynamicznych elementów do Twojej witryny wiąże się z ceną, ponieważ mogą ją przeciążyć dodatkowymi węzłami JavaScript.

Na początek możesz to naprawić, przydzielając pliki JS, które powodują problemy, i usuwając je. Jeśli jest to widżet innej firmy (np. widżet czatu), należy poszukać zoptymalizowanej alternatywy.

3. Kreatory stron, które generują rozdęty kod HTML

Łatwość obsługi kreatorów stron uczyniła z nich integralną część procesu tworzenia witryn dla wielu użytkowników.

Niestety twórcy stron mogą czasami generować rozdęty kod z nadmierną liczbą węzłów DOM. Robią to, wstrzykując zbyt wiele znaczników div.

Aby sobie z tym poradzić, możesz uzyskać dostęp do kodu HTML i naprawić go ręcznie.

Dobrą wiadomością jest to, że niektórzy twórcy stron podejmują kroki w celu rozwiązania tych dobrze znanych problemów. Na przykład Elementor ogłosił, że Elementor 3.0 zawiera znaczące ulepszenia DOM, aby zwiększyć szybkość i wydajność nowych stron internetowych.

4. Nie kopiuj/wklejaj tekstu do edytora WYSIWYG

Większość edytorów WYSIWYG (What You See Is What You Get) zawodzi w czyszczeniu wklejonego kodu. Zwłaszcza po wklejeniu z innego źródła tekstu sformatowanego, takiego jak Microsoft Word. Problem polega na tym, że skopiuje nie tylko tekst, ale także jego style. I są głównym winowajcą, ponieważ mogą osadzić wiele węzłów DOM.

Masz kilka opcji, aby sobie z tym poradzić:

  • Unikaj wklejania tekstu w edytorze
  • Użyj opcji Wklej jako zwykły tekst
  • (Jeśli Twój edytor na to pozwala) Użyj zaawansowanych funkcji, aby wyczyścić kod po jego wklejeniu

I na koniec - wróć do swoich starych stron i wyczyść je.

5. Podziel swoją jednostronicową witrynę na wiele stron

Witryna jednostronicowa to świetny pomysł, gdy jej jedynym celem jest zaprezentowanie Twojej firmy.

Z drugiej strony, jeśli zdecydujesz się dodać informacje o firmie, artykuły na blogu, produkty, formularze kontaktowe itp., podziel je na osobne strony i połącz je za pomocą menu nawigacyjnego.

Dzielenie dużych stron na wiele stron może zmniejszyć liczbę węzłów DOM.

6. Nie ukrywaj niechcianych elementów za pomocą display:none

display: none jest często używany z JavaScriptem do ukrywania i pokazywania elementów bez ich usuwania i ponownego tworzenia. Nie oznacza to jednak, że znikną one ze znaczników HTML, pozostawiając odwiedzającym ładowanie niechcianych elementów.

7. Unikaj skomplikowanych deklaracji CSS i JavaScript

Skomplikowane deklaracje CSS i JavaScript mogą dodatkowo zwiększyć wykorzystanie pamięci i spowolnić Twoją witrynę. Najlepiej je pominąć, jeśli masz do czynienia z nadmierną liczbą węzłów DOM.

Napraw problemy CSS i JavaScript automatycznie! Zobacz swoją witrynę z NitroPack

Podsumowując

To prawda, że ​​naprawienie problemów z DOM nie doprowadzi do poprawy wyników PageSpeed ​​Insights.

Jednak ukryte korzyści z włożenia wysiłku w radzenie sobie z ostrzeżeniem „unikaj nadmiernego rozmiaru DOM” są znacznie większe:

  • Zwiększ czas ładowania swojej witryny
  • Popraw postrzeganą wydajność swojej strony
  • Zapewnij odwiedzającym lepsze wrażenia użytkownika

Co najważniejsze, te trzy rzeczy są nagradzane przez Google ! Ponadto są niezawodnym sposobem na zmniejszenie współczynnika odrzuceń, zwiększenie średniego czasu spędzonego na stronie, a także zwiększenie liczby konwersji.

Jeśli szukasz sposobów na naprawienie innych sugestii PSI, sprawdź nasze inne artykuły:

  • Łatwe udostępnianie obrazów w formatach nowej generacji (WordPress, OpenCart i Magento)
  • Jak leniwie ładować obrazy poza ekranem (5 sprawdzonych technik)
  • Optymalizacja obrazu w sieci: techniki SEO i szybkości witryny w 2022 r
  • 8 strategii ładowania czcionek w celu poprawy podstawowych wskaźników internetowych (2022)
  • Jak wyeliminować zasoby blokujące renderowanie (CSS i JavaScript)
  • Zmniejsz wpływ kodu stron trzecich (z/bez wtyczek)
  • 7 sposobów na zminimalizowanie pracy głównego wątku