Klucze do zmniejszenia rozmiaru DOM strony internetowej

Jednym z aspektów wpływających na uzyskanie dobrego pozycjonowania SEO na stronie internetowej jest jej wydajność wczytywania. I to jest temat, w którym rozmiar DOM strony odgrywa kluczową rolę.

Dlatego wyjaśnimy, w jaki sposób DOM można uznać za nadmiernie duży i jak go zmniejszyć.

Zaczynajmy!

Co to jest DOM?

Mówiąc najprościej, kiedy mówimy o DOM, mamy na myśli strukturę obiektów, które przeglądarka generuje za każdym razem, gdy ładuje stronę . Swoją nazwę zawdzięcza akronimowi Document Object Model.

Jest to struktura hierarchiczna, w której znajdują się różne obiekty, z których niektóre zależą od innych. Struktura jest podobna do drzewa, ponieważ istnieje główny obiekt, od którego zależą inne elementy drugorzędne. DOM reprezentuje strukturę HTML strony jako drzewo składające się z serii tagów.

Innymi słowy, kiedy przeglądarka przygotowuje stronę do pokazania nam, buduje drzewo obiektów składające się ze wszystkich elementów strony w oparciu o jej strukturę HTML.

Za każdym razem, gdy przeglądarka otrzymuje dokument HTML, musi go przekonwertować na strukturę podobną do drzewa, którą nazywamy drzewem DOM lub DOM. Kod JavaScript może uzyskać dostęp do tego DOM i modyfikować go.

Jak rozmiar DOM wpływa na wydajność sieci?

Prawda jest taka, że ​​rozmiar DOM wpływa na wydajność strony. Nadmiernie duży DOM może spowolnić szybkość Witryny , ponieważ ma następujące skutki:

• Wydajność sieci i wydajność obciążenia. Jeśli DOM jest zbyt duży, często zawiera elementy HTML, które nie są widoczne przy pierwszym wczytaniu strony przez użytkownika, niepotrzebnie zwiększając zużycie danych i spowalniając ładowanie strony.
• Wydajność w czasie wykonywania. Gdy użytkownicy i skrypty wchodzą w interakcję ze stroną, przeglądarka musi stale przeliczać położenie i styl tagów HTML.
• Wydajność pamięci . Jeśli drzewo DOM jest zbyt duże, przeglądarka może potrzebować więcej pamięci do jego przetworzenia.

Jak technicznie zmniejszyć rozmiar DOM?

Aby zmniejszyć rozmiar DOM tak, aby nie wpływał negatywnie na wydajność sieci , musisz usunąć wszystkie niepotrzebne elementy HTML . Jak widzieliśmy, jeśli nie podejmiemy wymaganych środków, istnieje kilka powodów, dla których może to spowolnić działanie strony.

Zamiast używać tego kodu;

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

Lepiej byłoby użyć tego drugiego;

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

Jeśli chodzi o strukturę drzewa, musimy znać następujące terminy:

• Węzły : Wszystkie elementy HTML DOM. Znane są również jako „liście” drzewa.
• Węzły drugorzędne : te węzły, które nie mają więcej rozgałęzień.

To powiedziawszy, najlepszą rzeczą jest to, że głębokość drzewa jest tworzona przez :

• Mniej niż 32 węzły.
• Mniej niż 60 węzłów drugorzędnych na każdy węzeł.

Google zaleca, aby podczas tworzenia witryn internetowych, strony zawierały mniej niż 1500 węzłów DOM , co oznacza, że ​​projekty nie powinny być zbyt skomplikowane.

Jak zmniejszyć rozmiar DOM w WordPressie

Istnieje kilka sposobów na zmniejszenie rozmiaru DOM w WordPressie:

Podziel duże strony na wiele stron

Czy masz jedną stronę wyświetlającą różne rodzaje treści w Twojej witrynie? Na przykład formularze kontaktowe, posty na blogu, produkty itp.

W takim przypadku lepiej jest sklasyfikować wszystkie te elementy na różnych stronach i połączyć je za pomocą paska nawigacyjnego.

Aktywuj wtyczkę Lazy Load i podziel wszystkie możliwe elementy na strony

Możesz włączyć moduł leniwego ładowania we wszystkich elementach, które na to pozwalają. Możesz to zrobić z filmami z YouTube, używając Youtube Lite lub Lazy Load z WordPress WP-Rocket.

Istotne jest również ograniczenie liczby postów na stronie bloga . Rozsądna maksymalna liczba postów to 10 na stronę. Ta praktyka dotyczy również liczby produktów, które powinny pojawić się na każdej stronie.

Istnieje możliwość zmiany liczby postów na stronie. Przejdź do menu Ustawienia > podmenu Czytanie, zmień wyświetlanie stron bloga o największej wartości i zapisz zmiany .

Zalecamy również ograniczenie liczby powiązanych publikacji do maksymalnie trzech lub czterech.

Usuń niepotrzebne elementy zawarte w domyślnym motywie WP

W niektórych przypadkach może być konieczne usunięcie niektórych elementów, które są domyślnie dostarczane z motywem WordPress , takich jak przycisk „Dodaj do koszyka” na stronach produktów, data publikacji, informacje o autorze itp.

Sprawdź konfigurację motywu WordPress, aby zobaczyć, czy istnieje możliwość usunięcia tych elementów, a jeśli nie, poszukaj odpowiedniego kodu PHP, aby je usunąć.

Używaj dobrze zakodowanych motywów lub kreatorów stron

Jakość motywu WordPress bezpośrednio wpływa na rozmiar DOM. Dlatego warto używać dobrze zakodowanych motywów, takich jak Astra czy GeneratePress.

Kreatory stron również często wstawiają zbyt wiele znaczników div, dlatego ważne jest, aby korzystać z rozwiązań takich jak Oxygen Builders, które nie wprowadzają niechcianych elementów i pozwalają na większą kontrolę nad strukturą HTML.

Narzędzia takie jak HotJar pozwalają zobaczyć, czego używają użytkownicy, a co nie działa dla nich. Przeprowadzenie dokładnej analizy ma kluczowe znaczenie dla uzyskania odpowiedniego rozmiaru DOM.

Końcowe przemyślenia

Nadmierny rozmiar Dom wpływa na wydajność sieci, spowalniając czas ładowania strony. Utrzymuj prostą strukturę HTML bez zbędnych elementów . Sprawdź swoje drzewo DOM i pozbądź się tych węzłów, które nie dodają wartości Twojej witrynie. Nie tylko przyspieszysz swoją stronę, ale także zaoferujesz lepszy UX.

Google bez wątpienia rozważy rozmiar DOM w aktualizacji Page Experience , która zostanie wydana w nadchodzących miesiącach. Upewnij się, że masz odpowiedni, aby nie wpływał na wydajność sieci.