Чек-лист скорости страницы по HTML
Вставьте HTML страницы, чтобы найти блокирующие отрисовку скрипты, изображения без размеров или ленивой загрузки, отсутствие viewport, @import, document.write и другое.
Откройте страницу, выберите «Просмотр кода страницы» (Ctrl+U), скопируйте всё и вставьте сюда.
Добавьте defer (или async для независимых скриптов), чтобы браузер отрисовал страницу до загрузки скрипта.
<script src="https://cdn.example.com/analytics.js">
Задайте width и height (или CSS aspect-ratio), чтобы браузер зарезервировал место и вёрстка не сдвигалась (CLS).
<img src="/hero.jpg" alt="Hero">
Добавьте loading="lazy" изображениям, которые не видны на первом экране.
<img src="/b.png" alt="B" width="300" height="200">
Отдавайте WebP или AVIF (например, через <picture>) — обычно на 25–50% легче при том же качестве.
<img src="/hero.jpg" alt="Hero"> <img src="/a.png" alt="A" width="300" height="200"> <img src="/b.png" alt="B" width="300" height="200">
Добавьте loading="lazy" встраиваемым видео и картам.
<iframe src="https://www.youtube.com/embed/xyz">
Добавьте <meta name="viewport" content="width=device-width, initial-scale=1"> для корректного отображения на мобильных.
<meta name="viewport">
Добавьте <meta charset="UTF-8"> первым элементом в <head>.
<meta charset="UTF-8">
Добавьте <link rel="preconnect"> для важных сторонних источников, чтобы соединение устанавливалось заранее.
cdn.example.com
Пройденные проверки (8)
- ✓ Мало блокирующих таблиц стилей
- ✓ Нет CSS @import
- ✓ У встроенных @font-face задан font-display
- ✓ Первое изображение не загружается лениво
- ✓ Нет document.write()
- ✓ Встроенного кода немного
- ✓ Размер DOM в норме
- ✓ Размер HTML в норме
Что такое Чек-лист скорости страницы?
Инструмент проверяет HTML-код страницы по списку типичных проблем производительности фронтенда и объясняет, как исправить каждую: блокирующие отрисовку скрипты и стили, CSS @import, @font-face без font-display, изображения без размеров или ленивой загрузки, лениво загружаемое главное изображение, устаревшие форматы изображений, iframe без ленивой загрузки, отсутствие viewport или charset, document.write, большой встроенный код, отсутствие preconnect и чрезмерный размер DOM или HTML.
Как пользоваться Чек-лист скорости страницы
- Откройте свою страницу, выберите «Просмотр кода страницы» (Ctrl+U) и скопируйте всё.
- Вставьте HTML и нажмите «Анализировать».
- Изучите находки, отсортированные по влиянию, с примерами проблемных тегов.
- Раскройте «Пройденные проверки», чтобы увидеть, что уже в порядке.
Пример
The sample page (analytics.js without defer, hero.jpg without size, iframe without lazy, no viewport)
8 possible improvements: 1 render-blocking script, 1 image without width/height, 1 below-the-fold image without lazy loading, 3 JPEG/PNG images, 1 iframe without lazy loading, no viewport, no charset, 1 third-party origin without preconnect
Когда использовать Чек-лист скорости страницы
Используйте для быстрой статической проверки шаблонов или страниц или когда нельзя запустить Lighthouse. Инструмент не измеряет реальное время загрузки и Core Web Vitals и не видит ресурсы, добавленные JavaScript; для лабораторных и полевых данных используйте Lighthouse или PageSpeed Insights.
Как работает Чек-лист скорости страницы
HTML сканируется в вашем браузере лёгким парсером тегов после удаления комментариев. Каждое правило проверяет конкретные теги и атрибуты: например, внешние теги <script> в <head> без async, defer или type=module, <img> без width и height одновременно, изображения после первых двух без loading="lazy" или более 1500 элементов всего. Сторонние источники скриптов и стилей сравниваются со ссылками preconnect и dns-prefetch. Страница не загружается, JavaScript не выполняется.
Распространенные Случаи Использования
- Найти скрипты, блокирующие отрисовку, в шапке темы.
- Найти изображения, вызывающие сдвиг макета из-за отсутствия width и height.
- Проверить, что главное изображение не загружается лениво (плохо для LCP).
- Проверить шаблоны HTML-писем или лендингов перед запуском.
Часто Задаваемые Вопросы
Это то же самое, что Google PageSpeed Insights?
Нет. PageSpeed Insights загружает страницу и измеряет её. Этот инструмент лишь читает вставленный вами HTML, поэтому он мгновенный и приватный, но скорость измерить не может.
Почему первое изображение не должно загружаться лениво?
Самое большое изображение в верхней части обычно является элементом Largest Contentful Paint. Ленивая загрузка откладывает его до расчёта макета, что вредит LCP.
Должен ли каждый скрипт использовать defer?
Скриптам, которым нужен DOM и которые выполняются по порядку, нужен defer; независимые скрипты вроде аналитики могут использовать async. Встроенный критический код должен оставаться небольшим.