pl.allworldrating.com
Artykuły

Jak zmniejszyć rozmiar DOM w WordPress

Lub w GTmetrix "Zmniejsz liczbę elementów DOM":

Co to jest DOM?

Gdy Twoja przeglądarka otrzyma dokument HTML, musi zostać przekonwertowany na strukturę drzewa, która jest używana do renderowania i rysowania za pomocą CSS i JavaScript.

Ta struktura drzewa nazywa się DOM lub Document Object Model.

  • Węzły Wszystkie elementy HTML w DOM nazywane są węzłami. (aka „liście” na drzewie).
  • Głębokość – To, jak długo „gałąź” znajduje się na drzewie, nazywa się głębokością. Na przykład na powyższym diagramie tag img ma głębokość 3. (HTML -> body -> div -> img).
  • Elementy potomne – wszystkie węzły potomne węzła (bez dalszego rozgałęzienia) są dziećmi.

Lighthouse i Google PageSpeed ​​Insights rozpoczynają oznaczanie stron, jeśli spełniony jest jeden z następujących warunków:

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

Jak rozmiar DOM wpływa na wydajność?

Nadmierny rozmiar DOM może wpływać na wydajność na różne sposoby.

  • Dłuższy czas analizy i renderowania (FCP) . Duże drzewo DOM i złożone reguły stylów świetnie sprawdzają się w przeglądarce. Przeglądarka musi przeanalizować kod HTML, zbudować drzewo renderowania itp. Za każdym razem, gdy użytkownik wchodzi w interakcję lub coś w kodzie HTML zmienia się, przeglądarka musi to ponownie obliczyć.
  • Zwiększa użycie pamięci - Twój kod JavaScript może mieć funkcje dostępu do elementów DOM. Większe drzewo DOM zmusza JavaScript do używania większej ilości pamięci do ich przetwarzania. Przykładem może być selektor zapytań, wdocument.querySelectorAll('img')który zawiera listę wszystkich obrazów powszechnie używanych przez biblioteki ładujące się z opóźnieniem.
  • Zwiększa TTFB – Wraz ze wzrostem rozmiaru DOM zwiększa się rozmiar dokumentu HTML (w KB). Ponieważ w sieci trzeba przesłać więcej danych, zwiększa to TTFB.

Jak technicznie zmniejszyć rozmiar DOM?

Na przykład technicznie łatwo jest zmniejszyć rozmiar DOM:

stosowanie:

<ul id="navigation-main">etc..</ul>

zamiast:

<div id="navigation-main"><ul>etc..</ul></div>

Zasadniczo pozbądź się wszystkich możliwych elementów HTML. Możesz również użyć Flexbox lub Grid, aby jeszcze bardziej zmniejszyć rozmiar DOM.

Ale skoro używasz WordPressa, to ci niewiele pomoże!

Jak zmniejszyć rozmiar DOM w WordPressie?

Podziel duże strony na wiele stron

Czy masz stronę ze wszystkim w witrynie? Lubisz usługi, formularze kontaktowe, produkty, wpisy na blogu, referencje itp.?

Spróbuj podzielić je na wiele stron i połącz do nich z nagłówka/paska nawigacyjnego.

Leniwe ładowanie i stronicowanie wszystkiego, co możliwe

Leniwe ładowanie wszelkiego rodzaju elementów. Oto kilka przykładów:

  • Leniwe ładowanie wideo YouTube - Użyj WP YouTube Lyte lub Lazy Load przez WP Rocket.
  • Ogranicz liczbę wpisów na blogu/produktów na stronie – Zazwyczaj staram się zachować maksymalnie 10 wpisów na blogu na stronie i paginować resztę.
  • Leniwe ładowanie postów na blogu/produktów – Dodaj przycisk Załaduj więcej lub nieskończone przewijanie, aby załadować więcej postów na blogu lub produktów.
  • Leniwe ładowanie komentarzy - Używam ładowania warunkowego Disqus, ponieważ używam Disqus . Jeśli używasz własnych komentarzy, użyj wtyczek takich jak Lazy Load for Comments .
  • Paginacja komentarzy - jeśli masz setki komentarzy, może to również wpłynąć na rozmiar DOM. Aby podzielić komentarze na strony, przejdź do Ustawienia -> Dyskusja -> Podziel komentarze na strony.
  • Ogranicz liczbę powiązanych postów – Spróbuj ograniczyć liczbę powiązanych postów do 3 lub 4.

Uwaga: leniwe ładowanie obrazów nie zmniejszy rozmiaru DOM

Nie ukrywaj niechcianych elementów za pomocą CSS

Czasami może być konieczne usunięcie elementów wprowadzonych przez motyw/projektanta. Na przykład dodaj przycisk do koszyka na stronach produktów, przycisk oceny, informacje o autorze, datę publikacji itp.

Szybkim rozwiązaniem jest ukrycie ich za pomocą CSS:

.cart-button {wyświetlanie:brak;}

Mimo że to rozwiązanie wygląda na proste, narażasz użytkowników na niepożądany kod (który zawiera zarówno znaczniki HTML, jak i style CSS).

Sprawdź ustawienia motywu/wtyczki, aby zobaczyć, czy istnieje możliwość jego usunięcia. W przeciwnym razie znajdź odpowiedni kod PHP i usuń go/zakomentuj.

Używaj dobrze napisanych motywów i kreatorów stron

Dobry motyw odgrywa ważną rolę w rozmiarze DOM. Używaj dobrze napisanych motywów, takich jakGenerujPrasę lubAstra .

Kreatory stron wprowadzają również zbyt wiele elementów div. Użyj konstruktorów, takich jaktlen, które nie wprowadzają niechcianych bloków div i mają większą kontrolę nad strukturą HTML.

Wniosek

Może być więcej wtyczek lub ustawień motywu, które wprowadzają zbyt wiele elementów div. Przykładem mogą być wtyczki „mega menu”, takie jak UberMenu.

Czasami mają kluczowe znaczenie dla wygody użytkownika witryny. Ale czasami nigdy nie są używane przez użytkowników.

Być może linki w stopce nigdy nie są klikane, ponieważ większość odwiedzających przewija tylko do 75%.

Użyj narzędzi takich jak HotJar lub Google Analytics Events, aby dowiedzieć się, z czego faktycznie korzystają użytkownicy, a czego nie.Analizuj, mierz i powtarzaj.

Ciekawe Artykuły