DOM (Document Object Model)

Что такое DOM?

DOM (Document Object Model, объектная модель документа) — это программный интерфейс, который представляет HTML-документ в виде иерархического дерева узлов, позволяя скриптам динамически изменять контент, структуру и стили страницы.

Ключевой индустриальный ориентир (2026): размер DOM не должен превышать 1500 узлов при максимальной глубине вложенности 32 уровня (стандарт Google Lighthouse для «зелёной» зоны производительности). Превышение этого порога увеличивает время парсинга и обработки DOM, задерживая событие DOMContentLoaded на 200–400 мс на среднестатистическом мобильном устройстве.

Как это работает?

Браузер получает HTML, парсит его и строит дерево узлов, где каждый тег, атрибут и фрагмент текста становится объектом со свойствами и методами.

JavaScript через API (например, document.querySelector, appendChild) напрямую манипулирует этим деревом: добавляет, удаляет или перемещает элементы в реальном времени, без перезагрузки страницы.

Любое изменение DOM запускает каскадную перестройку стилей (CSSOM) и компоновку (Layout), что напрямую влияет на производительность рендеринга.

Метрики и стандарты

• Максимальный размерDOM: ≤1500 узлов, глубина ≤32 уровня — порог, рекомендованный Lighthouse для предотвращения избыточного потребления памяти и длительной блокировки главного потока.
• Влияние наCore Web Vitals: раздутый DOM увеличивает LCP (Largest Contentful Paint) на 0,8–1,5 с, TBT (Total Blocking Time) на 200–500 мс и ухудшает INP (Interaction to Next Paint), задерживая реакцию на клики.
• DOMContentLoaded: целевое время — ≤1,5 с на мобильных устройствах. Каждые лишние 500 узлов добавляют около 50–100 мс к этому показателю.
• Использование памяти: документ с 3000 узлов потребляет в среднем на 20–35% больше оперативной памяти вкладки, чем эквивалент с 1500 узлов, что критично для устройств с 4 ГБ ОЗУ.

Почему это важно для бизнеса?

Каждые 100 мс задержки взаимодействия снижают конверсию на 1–2% в e-commerce. Раздутый DOM напрямую увеличивает время до первого осмысленного клика, ухудшает показатели в Google PageSpeed Insights и понижает ранжирование по сигналу Page Experience.

Для мобильного трафика (доля >60% в B2C) неоптимизированный DOM означает более высокий показатель отказов и невыполненные целевые действия: оформление заказа, отправка заявки, подписка.

Пример применения

Страница товара интернет-магазина содержала 4200 узлов из-за десятикратно вложенных слайдеров, скрытых модальных окон и дублирующихся блоков от плагинов социальных сетей.

Аудит Lighthouse показал предупреждение «Avoid an excessive DOM size» и LCP 4,7 с. После удаления неиспользуемых секций, замены сложного слайдера на CSS-слайдер с одним контейнером и внедрения ленивой загрузки отзывов количество узлов сократилось до 1350. Результат: LCP снизился до 2,2 с, INP уменьшился с 280 мс до 75 мс, конверсия в корзину выросла на 8,3%.

Как это реализуется в WordPress?

• Аудит: Google Lighthouse (встроен в Chrome DevTools) или WebPageTest выявляют превышение порога DOM; Query Monitor показывает количество HTML-элементов, сгенерированных на серверной стороне.
• Выбор темы: используются минималистичные темы без избыточной вложенности div-обёрток (GeneratePress, Kadence, Astra с отключёнными дополнительными секциями); исключаются темы с heavy page builder’ами, генерирующими лишние обёртки.
• Оптимизация контента: в блочном редакторе (Gutenberg) удаляются неиспользуемые блоки, вложенные группы; исключаются из рендера скрытые на мобильных элементах с помощью серверной условной логики (хук wp_is_mobile).
• Плагины и скрипты: отключаются виджеты и шорткоды, которые рендерят пустые контейнеры. Инструменты оптимизации — Perfmatters (скрипт-менеджер), WP Rocket (отложенная загрузка iframe, удаление неиспользуемого CSS) — предотвращают загрузку элементов, не участвующих в первоначальном рендеринге.
• Серверный уровень: при использовании LiteSpeed Cache настройка «Remove Unused CSS» и кэширование фрагментов через ESI позволяют сократить серверный HTML-ответ, что напрямую уменьшает конечный размер DOM.

Связанные понятия

• HTML — исходная разметка, из которой строится DOM.
• CSSOM — объектная модель CSS, совместно с DOM образующая render tree.
• Render Tree — итоговая структура, используемая браузером для компоновки и отрисовки.
• Критический путь рендеринга — последовательность шагов от получения HTML до первой отрисовки, сильно зависящая от сложности DOM.
• Core Web Vitals — метрики LCP, INP и CLS, напрямую коррелирующие с размером и глубиной DOM.
• Shadow DOM — изолированное поддерево DOM, применяемое в веб-компонентах, не влияющее на основной документ до момента подключения.