Навчання
First Contentful Paint: що таке FCP і як його покращити
FCP показує, коли користувач уперше бачить реальний контент. Цей гайд пояснює, що його гальмує і які правки швидко дають видимий результат.
Запусти свіжий аудит DomainLens і використовуй звіт як список пріоритетів.
Що вимірює FCP
First Contentful Paint (FCP) фіксує момент, коли браузер уперше відрендерив реальний контент сторінки: текст, зображення, SVG або canvas. Це не повне завантаження сторінки і не головний hero-елемент, але метрика добре показує, скільки часу користувач бачить порожній екран.
Швидкий FCP створює відчуття, що сторінка працює. Повільний FCP змушує сайт виглядати зламаним, навіть якщо решта контенту потім завантажується. Тому ця метрика важлива в performance-аудиті, хоча Core Web Vitals напряму фокусуються на LCP, INP і CLS.
Що зазвичай гальмує FCP
- Повільна відповідь сервера до того, як браузер отримує перший HTML.
- Render-blocking CSS, який треба завантажити й розібрати перед першим показом.
- Синхронний JavaScript у head, який блокує parsing.
- Web fonts, які затримують видимий текст або роблять його невидимим під час завантаження.
- Важкий HTML, tag managers або third-party scripts, що вантажаться до критичного контенту.
Як покращити FCP
Починай із самого початку запиту. Покращ TTFB через кешування, швидший origin, менше database queries і CDN для static assets. Браузер не може показати контент, який ще не отримав.
Потім зменш render-blocking роботу. Inline тільки найменший корисний critical CSS, решту CSS завантажуй асинхронно там, де це безпечно, defer для non-critical JavaScript і простіший above-the-fold HTML. Для шрифтів preload основного font file і font-display: swap, щоб текст зʼявлявся швидко.
Чого уникати
- Оптимізувати тільки зображення, коли CSS і JavaScript досі блокують first paint.
- Вантажити всю аналітику, чат і ads scripts до першого рендеру.
- Використовувати custom fonts без preload або видимого fallback.
- Міряти тільки desktop, де повільний first paint легше приховати.
- Плутати FCP з LCP і виправляти hero image, коли проблема в blank-screen delay.
Як перевірити результат
Запусти Lighthouse або PageSpeed Insights до і після зміни та порівняй FCP, TTFB, render-blocking resources і main-thread work. Справжня правка FCP має раніше показувати перший текст або структуру сторінки, а не просто покращувати score.
Після деплою повтори DomainLens audit і спершу дивись mobile. Якщо є field data, перевір, що користувачі на повільніших пристроях і мережах теж бачать швидший early rendering.