Размер HTML-документа

Размер HTML — вес самого документа, без картинок, стилей и скриптов. Ориентир: до 100 КБ — хорошо, 100–300 КБ — приемлемо, больше 300 КБ — стоит разобраться.

Почему это важно

Время загрузки. HTML грузится первым, и всё остальное ждёт его. На мобильном интернете каждые 100 КБ — это заметная задержка.

Разбор документа. Браузер строит из HTML дерево DOM. Чем больше узлов, тем дольше разбор, тем тяжелее последующая отрисовка и любые изменения на странице. На бюджетном телефоне разница между 1 000 и 10 000 узлов видна невооружённым глазом: страница «задумывается» при прокрутке.

Краулинговый бюджет. Робот качает те же байты, что и человек.

Откуда берётся вес

Стили и скрипты внутри документа. Килобайты CSS в <style> и JS в <script> — они не кэшируются и скачиваются заново на каждой странице.

Картинки в base64. Изображение, вставленное прямо в HTML, весит на треть больше оригинала и лишает браузер возможности его закэшировать.

Огромные списки. Каталог, где на одной странице выводятся все 2000 товаров. Или <select> со списком всех городов России.

Данные состояния. Современные фреймворки встраивают в страницу JSON с данными — иногда весь ответ API целиком, включая поля, которые нигде не используются.

Разметка конструктора. Десять вложенных div с длинными служебными классами вокруг каждого абзаца.

Мёртвый код — закомментированная вёрстка, остатки старых версий, дубли блоков (про соотношение текста и кода).

Что делать

1. Вынесите CSS и JS в файлы. Один раз скачаются, потом возьмутся из кэша браузера (про заголовки кэширования).
2. Включите сжатие. gzip ужимает HTML в 4–8 раз — это самая быстрая мера.
3. Разбейте длинные списки на страницы или подгружайте по мере прокрутки.
4. Уберите base64-картинки, кроме совсем крошечных иконок.
5. Почистите данные состояния: передавайте только то, что нужно странице.
6. Упростите вёрстку. Каждый лишний уровень вложенности повторяется столько раз, сколько на странице элементов списка.
7. Минифицируйте HTML — уберите лишние пробелы и комментарии. Эффект небольшой, особенно поверх сжатия, но бесплатный.

Как измерить

• Пункт аудита «Размер HTML» показывает вес документа в килобайтах.
• В браузере: F12 → Network → первая строка (сам документ) → колонка Size. Там два числа: переданный размер (сжатый) и реальный.
• Число узлов DOM:

document.getElementsByTagName('*').length

Больше 1500 — повод присмотреться, больше 3000 — точно есть что упрощать.