FCP (First Contentful Paint) — це метрика швидкодії, яка вимірює час, за який браузер вперше відобразив будь-який змістовний елемент на сторінці: текст, зображення, SVG або елемент DOM (але не фон чи порожній блок).
Іншими словами, FCP показує, коли користувач вперше бачить, що сторінка почала завантажуватися.
Вимірюється в секундах. Ідеальне значення:
- Добре: до 1,8 сек
- Потребує покращення: 1,8–3,0 сек
- Погано: більше 3,0 сек
Поширені помилки та приховані ризики:
- Важкі шрифти або великі зображення. Можуть затримати FCP.
- JavaScript-блокування. Якщо скрипти блокують рендеринг, контент довше не з’являється.
- Логотип або header без тексту. Не рахується як «contentful», FCP не активується до реального контенту.
- FCP ≠ повна швидкість сайту. Це лише початковий показник; для повної оцінки слід дивитися ще й LCP, TTI, CLS.
Як покращити FCP:
Мінімізуйте CSS та JavaScript, що блокують рендер.
Використовуйте системні або попередньо завантажені шрифти.
Оптимізуйте зображення та SVG.
Додайте “Skeleton Screen” або анімовані заглушки для сприйняття швидшого завантаження.
