DOM (Document Object Model) — это структура HTML-документа, которую браузер строит при загрузке страницы. Каждый тег, атрибут и текстовый узел становится элементом DOM. Чем больше элементов — тем дольше браузер строит дерево, обрабатывает стили и отрисовывает страницу. В 2026 году размер DOM — один из факторов Core Web Vitals. В этой статье — что такое размер DOM, как его проверить и как уменьшить.
Что такое DOM и размер DOM
DOM — это программное представление HTML-страницы. Когда браузер загружает HTML, он парсит его и строит дерево объектов: каждый тег становится узлом, текст — текстовым узлом, атрибуты — свойствами.
Размер DOM измеряется в количестве узлов (nodes). Это не размер файла HTML в килобайтах, а именно количество элементов в дереве. Два HTML-файла одинакового размера могут иметь разный размер DOM — если один содержит много мелких тегов, а другой — мало крупных.
Google рекомендует держать размер DOM в пределах:
Хорошо: до 800 узлов.
Приемлемо: 800-1500 узлов.
Плохо: больше 1500 узлов.
Некоторые источники называют критичным порогом 3000 узлов. Если DOM больше — браузер тратит больше времени на рендеринг, особенно на мобильных устройствах.
Проверить размер DOM можно через проверку размера DOM.
Почему размер DOM важен
Три причины.
Скорость рендеринга. Чем больше узлов — тем дольше браузер строит DOM-дерево, вычисляет стили и отрисовывает страницу. Это влияет на LCP (Largest Contentful Paint).
Производительность на мобильных. Мобильные устройства имеют ограниченные ресурсы. Большой DOM замедляет страницу сильнее, чем на десктопе.
Core Web Vitals. Google использует LCP и INP как сигналы ранжирования. Большой DOM ухудшает обе метрики.
Проверить Core Web Vitals можно через SEO-аудит SerpMax.
Как проверить размер DOM
Три способа.
Способ 1. Инструмент проверки DOM
Самый быстрый способ — использовать онлайн-инструмент. SerpMax предоставляет проверку размера DOM — введите URL, и инструмент покажет:
— общее количество узлов DOM;
— максимальную глубину вложенности;
— максимальное количество дочерних элементов у одного узла;
— рекомендации по оптимизации.
Инструмент работает с любой страницей, не только с вашим сайтом.
Способ 2. Chrome DevTools
Для детального анализа используйте Chrome DevTools.
Как:
1. Откройте страницу в Chrome.
2. Нажмите F12.
3. Перейдите во вкладку Elements.
4. Откройте консоль (вкладка Console).
5. Введите команду: document.getElementsByTagName("*").length
6. Консоль покажет общее количество элементов на странице.
Также можно посмотреть глубину вложенности и количество дочерних элементов через вкладку Elements — но это займёт больше времени.
Способ 3. Lighthouse
Google Lighthouse показывает размер DOM вместе с другими метриками производительности.
Как:
1. Откройте страницу в Chrome.
2. Нажмите F12.
3. Перейдите во вкладку Lighthouse.
4. Нажмите «Analyze page load».
5. Посмотрите раздел «Diagnostics» — там будет размер DOM.
Lighthouse также показывает, сколько времени тратится на построение DOM и какие элементы самые глубокие.
Что считается большим DOM
Ориентиры:
До 800 узлов. Хорошо. Рендеринг быстрый даже на мобильных.
800-1500 узлов. Приемлемо. Может быть небольшая задержка на слабых устройствах.
1500-3000 узлов. Плохо. Рендеринг замедляется, Core Web Vitals страдают.
Больше 3000 узлов. Критично. Браузер тратит значительное время на построение и отрисовку DOM.
Что влияет на размер DOM:
— сложная структура HTML с множеством вложенных элементов;
— таблицы с большим количеством строк и ячеек;
— списки с сотнями элементов;
— виджеты и плагины, которые добавляют свои элементы;
— динамический контент, который подгружается через JavaScript.
Как уменьшить размер DOM
Восемь способов.
1. Упростить структуру HTML
Уберите лишние обёртки. Часто разработчики добавляют <div> там, где можно обойтись без него. Каждый лишний элемент — плюс один узел DOM.
Что делать: проверить HTML и убрать вложенные div, которые не несут функциональной нагрузки.
2. Использовать семантические теги
Вместо <div class="header"> используйте <header>. Это не уменьшает количество узлов, но упрощает структуру и делает её понятнее для поисковиков.
3. Сократить количество элементов в списках и таблицах
Если на странице список из 500 пунктов — это 500+ узлов. Если таблица с 1000 ячеек — это 1000+ узлов.
Что делать: использовать пагинацию, lazy load или виртуальный скролл для больших списков. Разбить таблицу на части.
4. Убрать неиспользуемые элементы
Скрытые элементы (display:none) всё равно находятся в DOM. Если они не нужны — удалите их из HTML.
Что делать: проверить, какие элементы скрыты, и удалить те, что не используются.
5. Оптимизировать виджеты и плагины
Каждый виджет (чат, соцсети, аналитика) добавляет свои элементы в DOM. Если виджет не нужен — уберите его.
Что делать: проверить, какие виджеты реально используются, и удалить остальные.
6. Использовать CSS вместо лишних элементов
Часто разработчики добавляют элементы только для стилизации. Например, <div class="spacer"> для отступа. Это можно сделать через CSS (margin, padding).
Что делать: проверить, какие элементы добавлены только для стилей, и заменить их на CSS-свойства.
7. Отложить загрузку некритичного контента
Если часть контента не нужна при первом рендере (комментарии, отзывы, связанные товары) — загружайте её после.
Что делать: использовать lazy load для контента ниже первого экрана.
8. Проверить сторонние скрипты
Сторонние скрипты (аналитика, реклама, чаты) часто добавляют много элементов в DOM. Некоторые добавляют сотни узлов.
Что делать: проверить, какие скрипты добавляют больше всего элементов, и заменить или удалить их.
Проверить размер DOM после каждого изменения можно через проверку размера DOM.
DOM size и Core Web Vitals
Размер DOM влияет на две метрики Core Web Vitals.
LCP (Largest Contentful Paint). Если DOM большой — браузер дольше строит дерево и отрисовывает страницу. LCP растёт.
INP (Interaction to Next Paint). Большой DOM замедляет обработку событий. Если пользователь кликает — браузер дольше ищет нужный элемент и обновляет интерфейс.
Google рекомендует LCP до 2,5 секунд и INP до 200 мс. Большой DOM затрудняет достижение этих значений.
Как часто проверять размер DOM
Рекомендуемая частота:
— после добавления новых элементов, виджетов или плагинов;
— после обновления CMS или шаблона;
— раз в месяц — как часть технического SEO-аудита;
— если заметили, что страница стала медленнее.
Размер DOM может вырасти незаметно. Регулярная проверка помогает поймать проблему до того, как она повлияет на позиции.
Часто задаваемые вопросы
Что такое DOM size?
DOM size — это количество узлов в дереве Document Object Model. Каждый HTML-тег, атрибут и текстовый узел становится элементом DOM. Чем больше узлов — тем дольше браузер строит и отрисовывает страницу.
Какой размер DOM считается нормальным?
До 800 узлов — хорошо. 800-1500 — приемлемо. Больше 1500 — плохо. Больше 3000 — критично. Google рекомендует держать размер DOM в пределах 800-1500 узлов.
Как проверить размер DOM?
Через проверку размера DOM. Или через Chrome DevTools → Console → команда document.getElementsByTagName("*").length. Или через Lighthouse.
Влияет ли размер DOM на SEO?
Косвенно — через Core Web Vitals. Большой DOM ухудшает LCP и INP, которые Google использует как сигналы ранжирования. Медленные страницы теряют позиции.
Что влияет на размер DOM?
Сложная структура HTML, таблицы с большим количеством строк, длинные списки, виджеты и плагины, сторонние скрипты, динамический контент.
Как уменьшить размер DOM?
Упростить структуру HTML, использовать семантические теги, сократить списки и таблицы, убрать неиспользуемые элементы, оптимизировать виджеты, использовать CSS вместо лишних элементов, отложить загрузку некритичного контента.
Влияет ли размер DOM на мобильные устройства сильнее?
Да. Мобильные устройства имеют ограниченные ресурсы. Большой DOM замедляет страницу на мобильных сильнее, чем на десктопе. Поэтому для мобильных версий размер DOM критичнее.
Как часто проверять размер DOM?
После добавления новых элементов, виджетов или плагинов; после обновления CMS; раз в месяц как часть технического аудита. Размер DOM может вырасти незаметно.
