Сторінка має забагато HTML-елементів або вони надто глибоко вкладені

У звітіExcessive DOM size

dom_size_excessive · Потребує перегляду

Коротка відповідь

Це з’являється, коли HTML сторінки в тому вигляді, в якому його віддав сервер, має більше елементів, ніж ліміт, вкладає їх глибше або розміщує більше дочірніх елементів під одним елементом: за замовчуванням понад 1 500 елементів, 32 рівні чи 60 дочірніх елементів. Через велику структуру сторінки рендеринг у браузері коштує дорожче — і під час завантаження, і після кожної взаємодії. Приберіть непотрібну розмітку й розділіть довгі списки.

Серйозність: Низька. На перегляд: підрахунки взято з HTML у тому вигляді, в якому його віддав сервер, а не зі сторінки, яку будує браузер.

Чому це важливо

Посібник web.dev про Interaction to Next Paint каже, що обсяг роботи з рендерингу зазвичай зростає з розміром DOM і що через великий DOM оновлення після взаємодії можуть бути дуже дорогими; він пропонує робити DOM пласкішим і рендерити частини поза екраном пізніше за допомогою content-visibility.

Що зробити

  1. Перегляньте знахідку: у ній показано, яка міра перевищила свій ліміт, значення і шлях до найглибшого елемента чи батьківського елемента з найбільшою кількістю дочірніх.
  2. Приберіть обгортки, які лише додають вкладення, і розмітку, приховану на екранах будь-якого розміру.
  3. Розділіть дуже довгі списки, як-от усі товари чи коментарі на одній сторінці, на сторінки або завантажуйте більше на запит.

Коли залишити як є: якщо сторінка довга навмисно, як-от повний прайс-лист, і вона швидко реагує у вашому браузері, можна залишити як є.

Що ми читаємо

Ми читаємо HTML кожної просканованої сторінки в тому вигляді, в якому його віддав сервер, не виконуючи JavaScript, і рахуємо його елементи, найглибше вкладення й найбільшу кількість дочірніх елементів під одним елементом. Вміст усередині <template>, <noscript> та <iframe> не враховується.

Сторінка фіксується, коли будь-яка з трьох мір перевищує свій ліміт: за замовчуванням 1 500 елементів, 32 рівні чи 60 дочірніх елементів. Ліміти — це налаштування аудиту, які записуються з кожним аудитом. Сторінки, що є лише порожньою оболонкою для JavaScript, пропускаються.

Сторінка позначається як неперевірена, коли її HTML не вдалося прочитати повністю, наприклад тому, що він містить непідтримувану розмітку SVG, <select> чи <math>, має понад 100 000 елементів або вкладений дуже глибоко, тож найбільші сторінки часто не перевіряються.

Приклад і докази

Ілюстративний приклад — підрахунки однієї сторінки, а не реальний аудит.

Виміряно для https://bakery.example/products/:

elements: 4,812 (limit 1,500)
deepest nesting: 21 levels (limit 32)
most children under one element: 312 (limit 60)

Сторінка має більше елементів, ніж ліміт, а один список містить 312 елементів, тому вона фіксується зі шляхом до цього списку.

Можливе виправлення: показуйте 48 товарів на сторінці з посиланнями на наступні сторінки.

Підтвердити й перевірити знову

Перевірте самі: відкрийте сторінку, потім консоль в інструментах розробника вашого браузера й виконайте document.querySelectorAll('*').length; підрахунок браузера враховує те, що додає JavaScript, тож він може бути вищим за наш.

Повторна перевірка: Повний аудит — запустіть новий аудит сайту. Знахідка закривається, коли сторінку знову проскановано, її HTML прочитано повністю і всі три міри лежать у межах своїх лімітів; сторінка, яка стає порожньою оболонкою для JavaScript, теж її закриває. Якщо сторінку не вдається прочитати повністю або її не проскановано знову, знахідка залишається відкритою. Вищий ліміт у налаштуваннях вашого аудиту теж припиняє знахідку; у знахідці зазначено ліміти, які вона використала.

Обмеження та джерела

Підрахунки взято з HTML у тому вигляді, в якому його віддав сервер, а не зі сторінки, яку будує браузер, тож елементи, додані через JavaScript, не враховано. Наш парсер не закриває елементи списків, абзаци та комірки таблиць, кінцеві теги яких пропущено, як це роблять браузери, тож такі сторінки можуть показувати більшу глибину й менше дочірніх елементів, ніж мають насправді. Сама вартість рендерингу не вимірюється.

Упевненість: Середня, бо підрахунки взято з HTML, який віддав сервер, а він може відрізнятися від сторінки, яку будує браузер.

Джерела

  • web.dev, Оптимізація Interaction to Next Paint — каже, що обсяг роботи з рендерингу зазвичай зростає з розміром DOM і через великий DOM оновлення рендерингу після взаємодії можуть бути дуже дорогими, і пропонує робити DOM пласкішим та використовувати content-visibility. Перевірено 28 вересня 2026.

Редакційна перевірка: 29 вересня 2026