JavaScript блокирует рендер страницы
Render-blocking JS — главный враг LCP. defer, async, разделение бандла.
Симптом
- Замедление загрузки страницы – пользователь видит пустой экран дольше, чем обычно.
- Плохой показатель LCP в Google PageSpeed Insights (значение выше 2,5 с).
- Появление «зависания» в DevTools → Network → «Blocked» для файлов .js.
- Появление предупреждения «Render-blocking resources» в Lighthouse.
- Снижение скорости первого интерактивного кадра (FID) из‑за блокировки скриптов.
Причина
JavaScript‑файлы, загруженные без атрибутов defer или async, блокируют парсинг HTML.
Браузер не может отрисовать DOM, пока не скачает, не распарсит и не выполнит скрипт.
Если скрипт находится в <head> и не помечен как defer/async, он блокирует рендеринг до завершения выполнения.
Кроме того, большие бандлы (много кода в одном файле) увеличивают время загрузки и парсинга, усиливая эффект.
Как проверить
-
Lighthouse
bash lighthouse https://example.com --view
В отчёте ищите раздел «Render-blocking resources». -
Chrome DevTools
- Откройте страницу → DevTools → Network.
- Сортируйте по колонке «Initiator» и найдите скрипты, помеченные как «blocked».
- В панели «Performance» запустите запись, посмотрите, когда начинается рендеринг. -
Проверка атрибутов
```html
``
Вручную просмотрите исходный код страницы и убедитесь, что все критичные скрипты имеютdefer/async`.
- Проверка размера бандла
bash du -h dist/app.js
Если файл > 200 КБ, стоит рассмотреть разделение на чанки.
Решение
-
Добавьте
deferк критичным скриптам
html <head> <script src="vendor.js" defer></script> <script src="app.js" defer></script> </head>
deferгарантирует, что скрипты выполнятся после парсинга HTML, но в порядке их появления. -
Используйте
asyncдля независимых скриптов
```html
``async` загружает и выполняет скрипт сразу, не дожидаясь остальных.
-
Разделите бандл
- В Webpack:
js // webpack.config.js module.exports = { optimization: { splitChunks: { chunks: 'all', }, }, };
- В Vite:
js // vite.config.js export default { build: { rollupOptions: { output: { manualChunks(id) { if (id.includes('node_modules')) return 'vendor'; }, }, }, }, }; -
Lazy‑load ненужные модули
js // При клике на кнопку button.addEventListener('click', async () => { const module = await import('./heavyModule.js'); module.init(); }); -
Проверьте порядок загрузки
Если скрипт зависит от другого, убедитесь, что он загружается позже.
```html
```
-
Проверьте, что все внешние скрипты тоже оптимизированы
- Используйте CDN сdefer/async.
- Удалите неиспользуемые сторонние библиотеки. -
Проверьте итоговый LCP
После изменений запустите Lighthouse снова. Целевой показатель LCP – < 2,5 с.
Связанные
Не хотите разбираться сами?
Запустите технический аудит сайта за 5 минут — получите PDF-отчёт с разбором всех 64 параметров и конкретными точками роста. Или закажите комплексное SEO-продвижение сайта — починим всё это и возьмём на себя дальнейшую оптимизацию.