Оптимізація 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>
<!-- Self-hosting шрифтів усуває проблему цілком -->
Оптимальне рішення — 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 допомагає знайти, що попало в початковий чанк та повинно бути вынесено.
Типічні результати
Після оптимізації FCP знижується на 300–800ms на середніх з'єднаннях. LCP поліпшується на 15–30% при правильному preload критичних ресурсів.
Термін виконання
Аудит + настройка critical CSS + defer/async для скриптів — 1–2 робочих дні. Повна реалізація з розбивкою CSS по роутам — 3–5 днів.