Оптимизация Render-Blocking Resources на сайте
Render-blocking resources — CSS и JS файлы, которые браузер загружает до первой отрисовки страницы. Каждый такой ресурс добавляет время к FCP (First Contentful Paint) и LCP.
Что блокирует рендеринг
CSS в <head> без media query блокирует рендеринг целиком. Браузер обязан построить CSSOM перед первой отрисовкой. JS без async/defer останавливает HTML-парсер. Google Fonts без preconnect добавляет дополнительный DNS lookup.
Работа с CSS
Critical CSS — встраивание минимально необходимых стилей в <style> в head, основной CSS грузится асинхронно:
<style>/* critical inline styles */</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
Инструменты генерации critical CSS: critical (npm), Critters (Webpack plugin, используется Next.js), penthouse.
Для некритичных стилей — media trick:
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="large.css" media="(min-width: 1200px)">
Разбивка CSS по маршрутам — Next.js и Nuxt делают это автоматически через code splitting. Для чистого Webpack настраивается через MiniCssExtractPlugin с chunkFilename.
Работа с JavaScript
Атрибут defer — скрипт загружается параллельно, выполняется после парсинга HTML. Атрибут async — загружается параллельно, выполняется как только загрузился (может нарушить порядок).
<!-- Правило: всё что не критично для первого экрана — defer -->
<script src="analytics.js" defer></script>
<script src="chat-widget.js" async></script>
Для модулей (type="module") defer применяется автоматически.
Dynamic import для тяжёлых компонентов:
// React
const HeavyChart = lazy(() => import('./HeavyChart'))
// Vue
const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue'))
Google Fonts и сторонние шрифты
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Самостоятельный хостинг шрифтов устраняет проблему целиком -->
Оптимальное решение — font-display: swap + self-hosted через fontsource или вручную сконвертированные woff2.
Preload для LCP-ресурсов
Если LCP-элемент — изображение или шрифт, которые обнаруживаются поздно:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin>
Аудит и контроль
PageSpeed Insights и Lighthouse показывают список blocking resources в разделе "Eliminate render-blocking resources". Chrome DevTools → Performance → Waterfall показывает точную хронологию.
webpack-bundle-analyzer помогает найти, что попало в начальный чанк и должно быть вынесено.
Типичные результаты
После оптимизации render-blocking resources FCP снижается на 300–800ms на средних соединениях. LCP улучшается на 15–30% при правильном preload критичных ресурсов.
Срок выполнения
Аудит + настройка critical CSS + defer/async для скриптов — 1–2 рабочих дня. Полная реализация с разбивкой CSS по роутам — 3–5 дней.