Skip to content
Обучение Измерение Блог Case studies О сайте
The PWA community is coming together for #PWASummit22. Have a great story about developing a web app? Submit your talk today
Содержание
  • Что такое FCP?
    • Какое значение показателя FCP можно считать хорошим?
  • Как измерить FCP
    • Инструменты для измерения в полевых условиях
    • Инструменты для измерения в лабораторных условиях
    • Измерение FCP в JavaScript
  • Как улучшить показатель FCP
  • CHANGELOG

Первая отрисовка контента (FCP)

Nov 7, 2019 — Обновлено Jan 18, 2021
Available in: Español, 日本語, 한국어, Português, 中文, English
Appears in: Показатели
Philip Walton
Philip Walton
TwitterGitHubHomepage
Содержание
  • Что такое FCP?
    • Какое значение показателя FCP можно считать хорошим?
  • Как измерить FCP
    • Инструменты для измерения в полевых условиях
    • Инструменты для измерения в лабораторных условиях
    • Измерение FCP в JavaScript
  • Как улучшить показатель FCP
  • CHANGELOG
Первая отрисовка контента (FCP)важная, ориентированная на пользователя метрика для измерения воспринимаемой скорости загрузки, так как она отмечает первую точку на временной шкале загрузки страницы, где пользователь может видеть появление контента на экране. Низкий показатель FCP убеждает пользователя в том, что загрузка началась.

Что такое FCP? #

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

Временная шкала FCP с google.com

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

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

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

Какое значение показателя FCP можно считать хорошим? #

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

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

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

Инструменты для измерения в полевых условиях #

  • PageSpeed Insights
  • Отчет Chrome User Experience Report
  • Search Console (отчет о скорости загрузки)
  • JavaScript-библиотека web-vitals

Инструменты для измерения в лабораторных условиях #

  • Lighthouse
  • Chrome DevTools
  • PageSpeed Insights

Измерение 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, когда страницы восстанавливаются функцией back/forward cache, но в данных случаях следует измерять FCP, поскольку пользователи воспринимают такие посещения страниц как отдельные.
  • API может не сообщать о времени отрисовки из iframe с перекрестным происхождением, но для правильного измерения FCP следует учитывать все фреймы. Подфреймы могут использовать API, чтобы сообщать о времени отрисовки в родительский фрейм для агрегирования.

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

import {getFCP} from 'web-vitals';

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

Полный пример измерения FCP в JavaScript приводится в исходном коде getFCP().

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

Как улучшить показатель FCP #

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

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

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

CHANGELOG #

Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.

To help you manage this, all changes to either the implementation or definition of these metrics will be surfaced in this CHANGELOG.

ПроизводительностьПоказатели
Последнее обновление: Jan 18, 2021 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Web Fundamentals
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.