Первая содержательная краска (FCP)

Philip Walton

Поддержка браузера

• 60
• 79
• 84
• 14.1

Источник

First Contentful Paint (FCP) — это важный, ориентированный на пользователя показатель для измерения воспринимаемой скорости загрузки . Он отмечает первую точку на временной шкале загрузки страницы, где пользователь может видеть что-либо на экране. Быстрый FCP помогает убедить пользователя в том, что что-то происходит .

FCP измеряет время с момента первого перехода пользователя на страницу до момента отображения какой-либо части содержимого страницы на экране. Для этой метрики «контент» относится к тексту, изображениям (включая фоновые изображения), элементам <svg> или небелым элементам <canvas> .

Ключевой момент: FCP включает в себя любое время выгрузки с предыдущей страницы, время установки соединения, время перенаправления и время до первого байта (TTFB) ], что может быть значительным при измерении в полевых условиях и может привести к различиям между полевыми и лабораторными измерениями.

На этой временной шкале загрузки FCP происходит во втором кадре, потому что именно тогда на экране отображаются первые элементы текста и изображения.

Не весь контент отображается при визуализации первого элемента контента. Это важное различие между FCP и Largest Contentful Paint (LCP) , которое измеряет момент завершения загрузки основного содержимого страницы.

Что такое хороший показатель FCP?

Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны иметь FCP 1,8 секунды или меньше. Чтобы гарантировать достижение этой цели для большинства ваших пользователей, хорошим порогом для измерения является 75-й процентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.

Хорошие значения FCP составляют 1,8 секунды или меньше. Плохие значения превышают 3,0 секунды.

Как измерить FCP

FCP можно измерить в лаборатории или в полевых условиях , и он доступен в следующих инструментах:

Полевые инструменты

• Статистика PageSpeed
• Отчет об опыте использования Chrome
• Search Console (отчет о скорости)
• JavaScript-библиотека web-vitals

Лабораторные инструменты

• Маяк
• Инструменты разработчика Chrome
• Статистика PageSpeed

Измерьте FCP в JavaScript

Чтобы измерить FCP в JavaScript, используйте Paint Timing API . В следующем примере показано, как создать PerformanceObserver , который прослушивает запись paint с именем first-contentful-paint и регистрирует ее на консоли.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

Предупреждение. Этот код показывает, как записать запись first-contentful-paint в консоль. Измерение FCP в JavaScript сложнее.

В этом примере зарегистрированная запись first-contentful-paint сообщает вам, когда был нарисован первый элемент с содержимым. Однако в некоторых случаях эта запись недействительна для измерения FCP.

В следующем разделе перечислены различия между тем, что сообщает API, и тем, как рассчитывается метрика.

Различия между метрикой и API

• API отправляет запись first-contentful-paint для страниц, загруженных на фоновую вкладку, но эти страницы следует игнорировать при расчете FCP. Время первой отрисовки учитывается только в том случае, если страница все время находилась на переднем плане.
• API не сообщает о записях first-contentful-paint , когда страница восстанавливается из обратного или прямого кэша , но в этих случаях следует измерять FCP, поскольку пользователи воспринимают их как отдельные посещения страниц.
• API может не сообщать о времени отрисовки из iframe из разных источников , но для правильного измерения FCP необходимо учитывать все кадры. Подкадры могут использовать API для передачи данных о времени отрисовки родительскому кадру для агрегирования.
• API измеряет FCP с момента начала навигации, но для предварительно обработанных страниц FCP следует измерять с activationStart , поскольку это соответствует времени FCP, ощущаемому пользователем.

Вместо того, чтобы запоминать все эти тонкие различия, разработчики могут использовать библиотеку JavaScript web-vitals для измерения FCP, которая обрабатывает эти различия за вас, где это возможно (кроме iframe):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

Обратитесь к исходному коду onFCP() для получения полного примера того, как измерить FCP в JavaScript.

Примечание. В некоторых случаях, например при использовании iframe из разных источников, вы не можете измерить FCP в JavaScript. Подробную информацию см. в разделе ограничений библиотеки web-vitals .

Как улучшить ФКП

Чтобы научиться улучшать FCP для конкретного сайта, вы можете запустить аудит производительности Lighthouse и обратить внимание на любые конкретные возможности или диагностику, которые предлагает аудит.

Чтобы узнать, как улучшить FCP в целом (для любого сайта), обратитесь к следующим руководствам по производительности:

• Устраните ресурсы, блокирующие рендеринг
• Минимизировать CSS
• Удалить неиспользуемый CSS
• Удалить неиспользуемый JavaScript
• Предварительное подключение к необходимым источникам
• Сокращение времени ответа сервера (TTFB)
• Избегайте перенаправления нескольких страниц
• Предварительная загрузка запросов ключей
• Избегайте огромной полезной нагрузки в сети
• Обслуживайте статические ресурсы с помощью эффективной политики кэширования
• Избегайте чрезмерного размера DOM
• Минимизируйте критическую глубину запроса
• Убедитесь, что текст остается видимым во время загрузки веб-шрифта.
• Следите за тем, чтобы количество запросов было небольшим, а размеры переводов — небольшими.

Журнал изменений

Иногда ошибки обнаруживаются в API, используемых для измерения метрик, а иногда и в определениях самих метрик. В результате иногда приходится вносить изменения, и эти изменения могут проявляться в виде улучшений или регрессов в ваших внутренних отчетах и ​​информационных панелях.

Чтобы помочь вам справиться с этим, все изменения в реализации или определении этих показателей отображаются в этом журнале изменений .

Если у вас есть отзывы об этих показателях, оставьте их в группе Google web-vitals-feedback .