Оптимізація FCP (First Contentful Paint)
FCP — час до появи першого видимого контенту: текст, зображення, SVG, canvas. Добре значення: ≤ 1,8 секунди. FCP напрямски впливає на сприйняття швидкості — користувач бачить, що щось відбувається.
Різниця FCP та LCP
- FCP — перший пиксель контенту (будь-який)
- LCP — найбільший елемент
Поганий FCP майже завжди означає поганий LCP. Хороший FCP не гарантує хороший LCP.
Render-blocking ресурси — головна причина поганого FCP
Браузер зупиняє рендеринг на кожному <link> CSS та <script> у <head>.
<!-- Погано -->
<head>
<link rel="stylesheet" href="/css/app.css"> <!-- блокує -->
<link rel="stylesheet" href="/css/plugins.css"> <!-- блокує -->
<script src="/js/analytics.js"></script> <!-- блокує -->
</head>
<!-- Добре -->
<head>
<!-- Critical CSS inline -->
<style>
body { margin: 0; font-family: system-ui, sans-serif; }
.header { height: 64px; background: #fff; }
/* ... мінімальний CSS для above-the-fold контенту ... */
</style>
<!-- Non-critical CSS async -->
<link rel="preload" href="/css/app.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<!-- Scripts — defer або async -->
<script defer src="/js/app.js"></script>
<script async src="/js/analytics.js"></script>
</head>
Critical CSS — автоматична генерація
// vite.config.ts із critters плагіном
import { defineConfig } from 'vite';
import { critters } from 'critters';
export default defineConfig({
plugins: [
critters({
preload: 'swap', // preload некритичних стилів
pruneSource: false, // не видаляти CSS з вихідного файлу
})
]
});
Для Laravel — пакет spatie/laravel-vite-plugin + налаштування Nginx для віддачі pre-built сторінок.
Server-Side Rendering для React
SPA має поганий FCP — користувач бачить білий екран поки JS не виконається.
// Next.js — SSR з коробки
// Inertia.js — SSR для Laravel
// vite.config.ts для Inertia SSR
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({ input: 'resources/js/app.tsx', ssr: 'resources/js/ssr.tsx' }),
react(),
],
});
SSR поліпшує FCP на 0,5–2 секунди для повільних з'єднань та пристроїв.
Шрифти
/* Системний стек — нулова затримка */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Якщо потрібен кастомний шрифт — preload + font-display: swap */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-display: swap; /* показати fallback миттєво, замінити коли завантажиться */
unicode-range: U+0400-045F, U+0490-0491; /* тільки кириллиця */
}
<link rel="preload" href="/fonts/inter-regular.woff2"
as="font" type="font/woff2" crossorigin>
Вимірювання
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
console.log('FCP:', entry.startTime);
}
}
}).observe({ type: 'paint', buffered: true });
Швидкий чеклист FCP
- Inline critical CSS (above-the-fold стилі)
- Усі зовнішні стилі — async через
preload - Скрипти —
deferабоasync - Шрифт — preload +
font-display: swap - TTFB < 600 мс (кеш сервера)
- SSR ввімкнений (для React/Vue SPA)
- Видалені непотрібні CSS-правила (PurgeCSS/Tailwind purge)
Час оптимізації: 1–2 дні для налаштування critical CSS та render-blocking ресурсів.