Технические

Почему большой HTML-документ замедляет вашу страницу

Исходный размер HTML-файла вашей страницы влияет на то, насколько быстро браузер вообще может начать её отрисовывать на экране.

Что это

Прежде чем браузер сможет показать хоть какую-то часть страницы, ему сначала нужно полностью загрузить HTML-документ страницы (или, как минимум, достаточную его часть, чтобы начать работу) — это отдельно от изображений, видео и другого медиаконтента, которые загружаются уже после. Эта проверка смотрит именно на размер этого исходного HTML-документа, отмечая случаи, когда он стал необычно большим.

HTML-документы обычно разрастаются в размере, когда много контента встроено прямо в них — крупные блоки кода стилей, скрипты или повторяющийся контент, вставленный прямо в страницу, — вместо того чтобы храниться в отдельных, переиспользуемых файлах, которые браузер может загрузить один раз и закэшировать.

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

Более крупный HTML-документ загружается и обрабатывается заметно дольше, прежде чем браузер вообще сможет начать что-либо отрисовывать, а это откладывает самое первое, что видит посетитель, а не только второстепенный контент дальше на странице. Этот эффект более выражен на медленных мобильных соединениях, где каждый лишний кусок данных добавляет реальное, ощутимое время до того, как страница начинает казаться отзывчивой.

Раздутый HTML-файл также часто является симптомом более глубокой структурной проблемы — контента или кода, который следовало бы организовать в отдельные, кэшируемые файлы, а вместо этого его дублируют прямо на странице, а иногда и на каждой странице сайта.

Как это исправить

  1. Определите, что составляет основную часть файла — инструменты разработчика в браузере могут показать разбивку размера ресурсов страницы, включая сам базовый HTML-документ.
  2. Перенесите крупные блоки встроенного CSS (кода стилей) в отдельный файл .css, который браузер может загрузить один раз и переиспользовать на разных страницах, вместо того чтобы повторять его прямо на каждой странице.
  3. По той же причине перенесите крупный встроенный JavaScript в отдельные файлы .js.
  4. Проверьте код страницы на случайно продублированный контент (один и тот же блок, повторённый более одного раза) и удалите дубликаты.
  5. Если вы используете конструктор сайтов, обычно это управляется за вас — необычно большая страница здесь чаще вызвана тяжёлым пользовательским кодом, встроенным вручную, а не самой платформой, поэтому проверьте любые добавленные вами блоки произвольного кода.

Проверьте, есть ли эта проблема на вашем сайте

Launch Readiness проверяет ваш сайт на эту и ещё ~50 проблем перед запуском за несколько секунд — бесплатно, без регистрации.

Запустить бесплатную проверку