Licznik węzłów DOM — analizuj strukturę HTML online
Policz węzły DOM na stronie internetowej. Sprawdz głebokosc drzewa i liczbe elementów. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Węzły łącznie
tylko elementy — włącz „Include text nodes”, by doliczyć teksty i komentarze
Elementy
znaczniki HTML, np. div, p, a — liczone zawsze
Węzły tekstowe
opcja „Include text nodes” jest wyłączona
Głębokość maksymalna
korzeń html ma głębokość 1; średnia: 3, P95: 3
Głębokie węzły
na głębokości ≥ 32; limit: 1500
https://example.com
| Co jest liczone | Kiedy | Dokładnie jak — z kodu narzędzia |
|---|---|---|
| Elementy (znaczniki) | zawsze | każdy węzeł typu element, np. div, p, a, span — trafia do licznika „Elementy” |
| Węzły tekstowe | tylko z opcją „Include text nodes” | liczony jest tylko tekst, który po usunięciu białych znaków coś zawiera — same enter i wcięcia nie liczą się |
| Komentarze HTML | tylko z opcją „Include text nodes” | treść komentarzy (<!-- ... -->) doliczana do osobnego licznika |
| Sposób analizy | zawsze | serwer pobiera HTML (cURL, limit 2,5 MB) i buduje z niego drzewo DOMDocument; zliczanie to przejście w głąb od elementu html, którego głębokość wynosi 1 |
| Głębokie węzły | zawsze | węzły na głębokości większej lub równej progowi (domyślnie 32); gdy przekroczą limit (domyślnie 1500), raport ostrzega przed zbyt zagnieżdżonym DOM |
| Statystyki głębokości | zawsze | maksimum, średnia, percentyl P95 oraz rozkład w przedziałach po 10 poziomów — pokazują, gdzie DOM „ucieka” w głąb |
Zalecenie wydajnościowe (Google/Lighthouse): utrzymuj poniżej 1 500 węzłów łącznie, głębokości maksymalnej ok. 32 poziomów i bez pojedynczych poddrzew dłuższych niż 60 poziomów — dlatego domyślny limit „głębokich węzłów” w narzędziu to właśnie 1 500.
Warto wiedzieć — rozmiar DOM a wydajność
Dlaczego liczba węzłów ma znaczenie
Przeglądarka buduje drzewo DOM, dopasowuje do każdego węzła style i liczy layout — koszt rośnie z liczbą i głębokością węzłów. Strona z kilkoma tysiącami elementów wolniej renderuje się, gorzej reaguje na scroll i zużywa więcej pamięci, zwłaszcza na słabszych telefonach.
Węzeł tekstowy a element
Element to para znaczników (np. p), ale tekst między nimi to osobny węzeł tekstowy. Nawet enter i wcięcia w źródle tworzą węzły tekstowe — narzędzie liczy tylko niepuste. To ważne przy porównaniach: „głupi” licznik elementów zaniża realny rozmiar drzewa.
Głębokość zamiast samej liczby
Wielkość DOM to też zagnieżdżenie: głębokie poddrzewa utrudniają selektory CSS, refaktoryzację i zwiększają koszt przeliczania stylów. Percentyl P95 pokaże, jak głęboko strona „zwykle” schodzi, a rozkład w przedziałach po 10 poziomów — gdzie siedzi problem.
Bezpieczne pobieranie po stronie serwera
Analiza pobiera HTML na serwerze, ale z ograniczeniami z kodu: blokowane są localhost i adresy prywatne/rezerwowane (ochrona SSRF), dozwolone tylko porty 80 i 443 oraz protokoły http/https, a odpowiedź powyżej 2,5 MB jest przerywana.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćLicznik węzłów DOM – zoptymalizuj strukturę HTML swojej strony internetowej
Wydajność stron internetowych (mierzona m.in. przez wskaźniki Google Core Web Vitals) zależy w ogromnym stopniu od struktury kodu HTML. Przeglądarka internetowa po pobraniu kodu strony buduje z niego tzw. drzewo DOM (Document Object Model) – strukturę obiektową reprezentującą wszystkie tagi, teksty i atrybuty. Zbyt duże drzewo DOM (nadmiar zagnieżdżonych kontenerów <div>, tzw. divitis) spowalnia renderowanie strony, zużywa dużo pamięci RAM urządzenia użytkownika i negatywnie wpływa na interakcję z witryną. Nasz darmowy licznik węzłów DOM online to przydatne narzędzie diagnostyczne dla webdeveloperów i specjalistów SEO, które pozwala przeanalizować kod HTML pod kątem liczby elementów oraz głębokości ich zagnieżdżenia.
Wystarczy wkleić kod źródłowy strony lub podać adres URL, a system natychmiast obliczy całkowitą liczbę węzłów DOM, maksymalną głębokość drzewa i wskaże miejsca wymagające optymalizacji strukturalnej.
Zalecenia Google Lighthouse dotyczące drzewa DOM
Narzędzie audytujące Google Lighthouse nakłada na twórców stron konkretne limity mające na celu zapewnienie płynności działania witryny. Poniższa tabela przedstawia kluczowe metryki i ostrzeżenia:
| Metryka struktury DOM | Zalecany limit (Zielona strefa) | Próg ostrzegawczy (Lighthouse Warning) | Próg krytyczny (Błąd wydajności) |
|---|---|---|---|
| Całkowita liczba węzłów DOM | Poniżej 800 elementów | Powyżej 1400 elementów | Powyżej 3000 elementów (drastyczny spadek wydajności) |
| Maksymalna głębokość zagnieżdżenia | Poniżej 15 poziomów | Powyżej 24 poziomów | Powyżej 32 poziomów zagnieżdżenia tagów |
| Maksymalna liczba dzieci (parent node) | Poniżej 60 elementów podrzędnych | Powyżej 80 elementów podrzędnych | Powyżej 100 elementów bezpośrednio pod jednym kontenerem |
Jak nadmiar węzłów DOM wpływa na użytkownika i SEO?
Zaniedbanie optymalizacji struktury HTML niesie za sobą poważne konsekwencje dla biznesu i pozycjonowania strony:
- Wolniejsze renderowanie (rendering block): Przeglądarka musi przetworzyć każdy węzeł podczas renderowania układu (Layout/Reflow) oraz malowania (Paint). Im więcej elementów, tym dłużej użytkownik patrzy na biały ekran.
- Opóźnienia interakcji (Interaction to Next Paint - INP): Gdy użytkownik kliknie element na stronie z gigantycznym drzewem DOM, modyfikacja stylów lub struktury przez JavaScript trwa znacznie dłużej, wywołując irytujące lagowanie interfejsu.
- Większy rozmiar pliku HTML: Nadmiar znaczników zwiększa wagę pliku HTML, co wydłuża czas jego pobierania na urządzeniach z wolniejszym łączem mobilnym.
- Gorsze wyniki w Google Search Console: Słaba wydajność Core Web Vitals przekłada się bezpośrednio na niższe pozycje w wynikach wyszukiwania Google.
Jak zoptymalizować drzewo DOM krok po kroku?
Jeśli nasz licznik wykaże przekroczenie limitów, zastosuj się do poniższych kroków, aby uprościć kod HTML:
- Usuń zbędne wrappery: Przeanalizuj kod i usuń niepotrzebne tagi
<div>, które służą jedynie jako kontenery bez stylów lub zduplikowane kontenery pozycjonujące. - Używaj nowoczesnego CSS Grid i Flexbox: Nowoczesne metody układu pozwalają na tworzenie skomplikowanych siatek bez konieczności głębokiego zagnieżdżania elementów.
- Wdróż leniwe ładowanie (Lazy Loading): Elementy niewidoczne na pierwszym ekranie (np. komentarze, stopka, widgety) renderuj dynamicznie dopiero po przewinięciu strony przez użytkownika.
- Stosuj paginację lub infinite scroll: Na listach produktów lub wpisów blogowych ogranicz liczbę wyświetlanych pozycji na jednej stronie (np. do 20 zamiast 200).
Często zadawane pytania (FAQ)
Co to jest węzeł DOM (DOM node) i czym różni się od elementu HTML?
Węzeł DOM to pojęcie szersze. Węzłem w drzewie dokumentu może być element HTML (tag), ale także tekst wewnątrz tego tagu (Text node) oraz komentarz w kodzie (Comment node). Każdy element HTML jest węzłem DOM, ale nie każdy węzeł DOM jest elementem HTML.
Dlaczego nowoczesne kreatory stron (np. Elementor, Divi) tworzą duże drzewa DOM?
Wizualne kreatory stron (page buildery) stawiają na elastyczność i łatwość obsługi dla osób bez znajomości programowania. Generują one kod automatycznie, obudowując każdą sekcję, kolumnę i widget wieloma warstwami wrapperów <div> w celu zapewnienia responsywności, co drastycznie zwiększa rozmiar drzewa DOM.
Jak sprawdzić liczbę węzłów DOM w przeglądarce Chrome?
Możesz to zrobić otwierając Narzędzia deweloperskie (F12), przechodząc do zakładki Konsola (Console) i wpisując komendę: document.getElementsByTagName('*').length lub uruchamiając audyt Lighthouse w zakładce „Lighthouse”.
Co to jest "divitis" w projektowaniu stron?
To potoczne określenie złej praktyki programistycznej polegającej na nadużywaniu tagu <div> do budowania struktury strony, zamiast stosowania semantycznych elementów HTML5 (takich jak <header>, <nav>, <main>, <section>, <article>, <footer>) oraz czystych reguł CSS.
Czy głębokość drzewa DOM ma znaczenie?
Tak, głębokość drzewa DOM (liczba poziomów zagnieżdżenia rodzic-dziecko) ma kluczowe znaczenie. Głębokie zagnieżdżenie zmusza przeglądarkę do wykonywania skomplikowanych obliczeń rekurencyjnych podczas dopasowywania stylów CSS i obliczania pozycji elementów na ekranie.