01Що це таке та як це працює
FCP — це показник Core Web Vital, який фіксує час від початку навігації до моменту, коли браузер відображає будь-який видимий вузол DOM. Вимірювання включає текстові вузли, зображення, SVG та елементи canvas, які стають частиною макета. Воно не включає ресурси, що не впливають на візуальне відображення, такі як приховані елементи або індикатори завантаження (spinners). Сучасні браузери надають дані про FCP через інтерфейс PerformanceObserver, що дозволяє JavaScript-бібліотекам записувати та передавати цей показник у режимі реального часу.
FCP вказує на момент, коли сторінка показує щось видиме. Це перша візуальна ознака того, що сторінка завантажується.
02Що з цим робити
Щоб покращити FCP, ви можете: вбудувати критичний CSS (inline critical CSS), щоб контент над лінією згину відображався без очікування зовнішніх таблиць стилів; використовувати адаптивні зображення з відповідними розмірами та елементами picture; застосовувати відкладене завантаження (lazy-load) зображень, що знаходяться поза межами екрана, щоб зменшити початкове навантаження на ресурси; зменшити час відповіді сервера, оптимізуючи запити на бекенді та використовуючи CDN; мінімізувати та відкладати некритичний JavaScript; а також агресивно кешувати статичні активи. Ці дії зазвичай скорочують час першого рендерингу на сотні мілісекунд.
03Як це вимірюється або помічається
Ви можете побачити FCP у кількох інструментах: на панелі Performance у Chrome DevTools (шукайте в Timeline), у звітах Lighthouse (доступні на вкладці Audits) та у PageSpeed Insights, де цей показник відображається в розділі Core Web Vitals. До сторінки можна додати бібліотеку Web Vitals JavaScript, щоб програмно фіксувати FCP. Для отримання реальних даних використовується Chrome User Experience Report (CrUX), який агрегує показники FCP для реальних користувачів і доступний через Google Search Central.
04Поширені помилки
- Ігнорування CSS/JS, що блокують рендеринг і затримують перше відображення.
- Розміщення великих головних зображень (hero images) над лінією згину без оптимізації.
- Відсутність кешування статичних ресурсів, що призводить до їх повторного завантаження.
- Вимірювання FCP на сторінках, де контент завантажується через AJAX після початкового рендерингу.
- Фокусування на середньому значенні FCP при ігноруванні досвіду користувачів у 75-му перцентилі.
05Обмеження
FCP не застосовується до односторінкових додатків, які завантажують контент динамічно після початкового завантаження сторінки; показник відображатиме лише перше статичне малювання. Він також не фіксує пізніші візуальні зміни, тому сторінка, яка оновлює графік через 2 секунди, все одно матиме ранній FCP. Помилкове ототожнення FCP з Largest Contentful Paint (LCP) є поширеною помилкою; LCP вимірює найбільший видимий елемент, тоді як FCP вимірює самий перший видимий елемент.
06Практичний приклад
«Якщо сторінка завантажує головне зображення розміром 200 КБ через 800 мс, то FCP становить 800 мс. Будь-який текст, що з'явиться раніше, встановить FCP на цей раніший час».
07Поширені запитання
Чим First Contentful Paint відрізняється від Largest Contentful Paint?
FCP фіксує момент, коли будь-який видимий контент вперше з'являється на екрані, тоді як LCP чекає на рендеринг найбільшого окремого елемента. FCP стосується того, наскільки швидко користувачі бачать щось; LCP стосується того, наскільки швидко завантажується основний контент. Обидва показники є Core Web Vitals, але вони відповідають на різні питання щодо сприйманої швидкості.
Що вважається «першим контентом» для FCP?
Підходить будь-який видимий DOM-елемент, відмальований браузером: текст, зображення, непусті елементи <canvas> або навіть SVG. Кольори фону та зміни вже відмальованого елемента не враховуються. Браузер просто фіксує час першого відповідного малювання після початку навігації.
Чи варто мені оптимізувати FCP, якщо мій LCP вже хороший?
Зазвичай так, оскільки FCP та LCP відображають різні етапи процесу завантаження. Швидкий LCP все одно може сприйматися як повільний, якщо користувачі дивляться на порожній екран, чекаючи на найперший байт контенту. Покращення FCP дає користувачам впевненість, що сторінка дійсно працює, що знижує показник відмов при повільному з'єднанні.
Який показник FCP вважається хорошим результатом?
Google класифікує FCP 1,8 секунди або менше як хороший, від 1,8 до 3,0 секунд — як такий, що потребує покращення, а понад 3,0 секунди — як поганий. Ці пороги базуються на реальних даних про продуктивність, зібраних через Chrome User Experience Report.
Чи можу я виміряти FCP без впровадження RUM (Real User Monitoring)?
Так. Лабораторні інструменти, такі як Lighthouse та панель Performance у Chrome DevTools, звітують про FCP для одного симульованого завантаження. Для реальних користувачів вам знадобиться бібліотека Web Vitals JavaScript або RUM-провайдер, який зчитує записи paint-timing і передає їх у ваш аналітичний сервіс.
08Як про це питають уголос
Той самий термін словами, якими про нього питають асистента, а не набирають у рядку пошуку — написано із ситуації, тому кожне питання несе ту ситуацію, з якої виникло.
Lighthouse виконує лише одне симульоване завантаження на швидкій машині, тому він може не помітити того, з чим стикаються реальні відвідувачі у повільних мережах. Відкрийте Chrome DevTools, обмежте швидкість мережі до Slow 4G під час запису Performance trace і подивіться, коли фактично з'являється перший текст або зображення. Цей часовий маркер — це ваш FCP, і якщо він перевищує приблизно 1,8 секунди, ваші відвідувачі дивляться на порожній екран, навіть якщо лабораторний показник виглядає зеленим.
First Contentful Paint зазвичай блокується роботою шляху рендерингу, а не самим HTML: сервер має надіслати відповідь, яку браузер зможе почати відображати негайно, критичний CSS має бути вбудованим (inline), а вебшрифти мають бути налаштовані так, щоб вони не приховували текст. Вбудуйте CSS для першого екрана (above-the-fold) безпосередньо в код, попередньо завантажте (preload) файли шрифтів і віддавайте зображення в сучасних форматах із чітко вказаними шириною та висотою, і ви побачите, як FCP зменшиться під час наступного тесту.
Так, FCP все ще є показником Core Web Vital і все ще відображається в Search Console та CrUX, тому ігнорування цього показника означатиме втрату сигналу, на який ви можете впливати. INP замінив FID, а не FCP, і ці два показники вимірюють різні речі: FCP — це швидкість завантаження, а INP — це інтерактивність після завантаження сторінки. Вам потрібні обидва, оскільки сторінка може рендеритися швидко, але при цьому відчуватися повільною під час натискання, або бути миттєвою у відгуку на клік, але змушувати користувачів дивитися на порожній екран протягом двох секунд.