Skip to content
Обучение Измерение Блог Case studies О сайте
Join and donate to 🇺🇦 DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
Содержание
  • Что измеряет FCP
  • Как Lighthouse определяет FCP
  • Как улучшить оценку FCP
  • Отслеживайте FCP на устройствах реальных пользователей
  • How to improve your overall Performance score
  • Ресурсы

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

May 2, 2019 — Обновлено Jun 4, 2021
Appears in: Аудиты производительности
Содержание
  • Что измеряет FCP
  • Как Lighthouse определяет FCP
  • Как улучшить оценку FCP
  • Отслеживайте FCP на устройствах реальных пользователей
  • How to improve your overall Performance score
  • Ресурсы

FCP (Первая отрисовка контента) — одна из метрик, отслеживаемых в разделе Performance (Производительность) отчета Lighthouse. Каждая метрика отражает определенный аспект скорости загрузки страницы.

Lighthouse показывает FCP в секундах:

Скриншот проверки Lighthouse для FCP

Что измеряет FCP #

FCP измеряет, сколько времени требуется браузеру для отрисовки первой части контента DOM после перехода пользователя на страницу. Изображения, небелые элементы <canvas> и SVG на странице считаются содержимым DOM; всё, что находится внутри iframe, не включается.

Как Lighthouse определяет FCP #

Оценка FCP — это сравнение времени FCP вашей страницы и времени FCP реальных веб-сайтов на основе данных из Интернет-архива. Например, у сайтов, входящих в 99-й процентиль, FCP составляет примерно 1,5 секунды. Если FCP вашего сайта составляет 1,5 секунды, то оценка FCP равна 99.

В этой таблице показано, как интерпретировать оценку FCP:

Время FCP
(в секундах)
Цветовой код
0–1,8Зеленый (быстро)
1,8–3Оранжевый (средне)
Более 3Красный (медленно)
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Как улучшить оценку FCP #

Для FCP особенно важно время загрузки шрифтов. Ознакомьтесь со статьей «Убедитесь, что текст остается видимым во время загрузки веб-шрифта», чтобы узнать, как ускорить загрузку шрифтов.

Отслеживайте FCP на устройствах реальных пользователей #

Чтобы узнать, как измерять FCP на реальных устройствах пользователей, см. статью Google «Ориентированные на пользователя показатели производительности». В разделе «Отслеживание FP/FCP» описывается, как программно получить доступ к данным FCP и отправить их в Google Analytics.

См. статью Google «Оценка производительности загрузки в реальных условиях с помощью API Navigation Timing и API Resource Timing», чтобы узнать больше о сборе метрик реальных пользователей.

How to improve your overall Performance score #

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

Lighthouse: Opportunities section

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

Ресурсы #

  • Исходный код проверки FCP.
  • Руководство по метрике FCP.
  • Руководство по оценке производительности в Lighthouse.
  • Спецификация Paint Timing.
Последнее обновление: Jun 4, 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.