Эта страница переведена с помощью Cloud Translation API.

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

Philip Walton

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

Что такое ФКП?

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

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

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

Вы заметите, что хотя часть контента и была отрисована, не весь контент отрисован. Это важное различие между первой отрисовкой контента и самой большой отрисовкой контента (LCP) , целью которой является измерение момента завершения загрузки основного содержимого страницы.

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

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

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

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

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

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

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

Измерьте 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

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

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

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

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

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

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