First contentful paint
Первое существенное отображение (англ. First Contentful Paint, FCP) — время, за которое пользователь увидит какое-то содержимое веб-страницы, например, текст или картинку.
Эта метрика показывает, какое время потребуется браузеру для отображения части DOM после того, как пользователь перешёл на веб-страницу. Контентом в данном случае считаются любой текст, изображения, не пустой canvas и SVG. Данный показатель не учитывает загрузку контента в iframe, но учитывает текст, шрифт которых ещё загружается.
Смотрите также
- First Meaningful Paint
- Paint Timing specification
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
First contentful paint что это
Первая отрисовка контента (FCP)
Published on четверг, 2 мая 2019 г. • Updated on пятница, 4 июня 2021 г.
Table of contents
- Что измеряет FCP
- Как Lighthouse определяет FCP
- Как улучшить оценку FCP
- Отслеживайте FCP на устройствах реальных пользователей
- How to improve your overall Performance score
- Ресурсы
FCP (Первая отрисовка контента) — одна из метрик, отслеживаемых в разделе Performance (Производительность) отчета Lighthouse. Каждая метрика отражает определенный аспект скорости загрузки страницы.
Lighthouse показывает FCP в секундах:
# Что измеряет FCP
FCP измеряет, сколько времени требуется браузеру для отрисовки первой части контента DOM после перехода пользователя на страницу. Изображения, небелые элементы и 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.
# 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:
See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.
# Ресурсы
- Исходный код проверки FCP.
- Руководство по метрике FCP.
- Руководство по оценке производительности в Lighthouse.
- Спецификация Paint Timing.
Updated on пятница, 4 июня 2021 г. • Improve article
Table of contents
- Что измеряет FCP
- Как Lighthouse определяет FCP
- Как улучшить оценку FCP
- Отслеживайте FCP на устройствах реальных пользователей
- How to improve your overall Performance score
- Ресурсы
Первая содержательная краска (FCP)
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Филип Уолтон
Примечание. Первая отрисовка контента (FCP) — это важный, ориентированный на пользователя показатель для измерения воспринимаемой скорости загрузки, поскольку он отмечает первую точку на временной шкале загрузки страницы, когда пользователь может видеть что-либо на экране. Быстрый FCP помогает убедить пользователя в том, что что-то происходит .
Что такое ФКП?
Метрика First Contentful Paint (FCP) измеряет время с момента начала загрузки страницы до момента отображения какой-либо части содержимого страницы на экране. Для этой метрики «контент» относится к тексту, изображениям (включая фоновые изображения), элементам или небелым элементам .
На приведенной выше временной шкале загрузки FCP происходит во втором кадре, когда на экран выводятся первые элементы текста и изображения.
Вы заметите, что хотя часть контента и была отрисована, не весь контент отрисован. Это важное различие между первой отрисовкой контента (FCP) и самой крупной отрисовкой контента (LCP) , целью которой является измерение момента завершения загрузки основного содержимого страницы.
Что такое хороший показатель FCP?
Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны стремиться к тому, чтобы первая прорисовка контента составляла 1,8 секунды или меньше. Чтобы гарантировать достижение этой цели для большинства ваших пользователей, хорошим порогом для измерения является 75-й процентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.
Как измерить 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(); Предупреждение: этот код показывает, как записать запись 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 для передачи данных о времени отрисовки родительскому кадру для агрегирования.
Вместо того, чтобы запоминать все эти тонкие различия, разработчики могут использовать библиотеку JavaScript web-vitals для измерения FCP, которая обрабатывает эти различия за вас (где это возможно):
import 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 в целом (для любого сайта), обратитесь к следующим руководствам по производительности:
- Устраните ресурсы, блокирующие рендеринг
- Минимизировать CSS
- Удалить неиспользуемый CSS
- Удалить неиспользуемый JavaScript
- Предварительное подключение к необходимым источникам
- Сокращение времени ответа сервера (TTFB)
- Избегайте перенаправления нескольких страниц
- Предварительная загрузка запросов ключей
- Избегайте огромной полезной нагрузки в сети
- Обслуживайте статические ресурсы с помощью эффективной политики кэширования
- Избегайте чрезмерного размера DOM
- Минимизируйте критическую глубину запроса
- Убедитесь, что текст остается видимым во время загрузки веб-шрифта.
- Следите за тем, чтобы количество запросов было небольшим, а размеры переводов — небольшими.
ИЗМЕНЕНИЯ
Иногда ошибки обнаруживаются в API, используемых для измерения метрик, а иногда и в определениях самих метрик. В результате иногда приходится вносить изменения, и эти изменения могут проявляться в виде улучшений или регрессов в ваших внутренних отчетах и информационных панелях.
Чтобы помочь вам справиться с этим, все изменения в реализации или определении этих показателей будут отражены в этом CHANGELOG .
Если у вас есть отзывы об этих показателях, вы можете оставить их в группе Google web-vitals-feedback .
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2019-11-07 UTC.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) – важная, ориентированная на пользователя метрика для измерения визуально-воспринимаемой скорости загрузки, она фиксирует на временной шкале загрузки страницы точку, когда основное содержимое страницы, вероятно, загружено. Быстрая LCP помогает убедить пользователя в том, что страница полезна .
Исторически сложилось так, что веб-разработчикам было сложно измерить, насколько быстро основной контент веб-страницы загружается и становится видимым для пользователей.
Старые метрики, такие как load или DOMContentLoaded, не подходят, потому что они не обязательно соответствуют тому, что пользователь видит на своем экране. А новые, ориентированные на пользователя показатели производительности, такие как First Contentful Paint (FCP), отражают только самое начало процесса загрузки. Если на странице отображается заставка или индикатор загрузки, этот момент не очень важен для пользователя.
Раньше рекомендовались такие показатели производительности, как First Meaningful Paint (FMP) и Speed Index (SI) (оба доступны в Lighthouse), чтобы помочь уловить больше впечатлений от загрузки после начальной отрисовки, но эти показатели сложны, их трудно объяснить. Они часто неверны – это означает, что они все еще не определяют, когда загружено основное содержимое страницы.
Чем проще – тем лучше. Более точный способ измерить, когда загружается основное содержимое страницы, – это посмотреть, когда был отрисован самый большой элемент.
Что такое LCP?
Метрика Largest Contentful Paint (LCP) сообщает время рендеринга самого большого изображения или текстового блока, который находится в видимой части окна браузера, относительно того, когда страница впервые начала загружаться.
Что такое хороший показатель LCP?
Чтобы обеспечить удобство работы пользователей, сайты должны стремиться к тому, чтобы максимальная продолжительность отрисовки контента составляла 2.5 секунды или меньше. Чтобы убедиться, что вы достигли этой цели для большинства пользователей, хорошим порогом для измерения является 75-й перцентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.
Какие элементы учитываются?
Как указано в API Largest Contentful Paint в настоящее время, для оценки будут рассматриваться следующие типы элементов:
- элементы
- элементы внутри элемента
- элементы (используется изображение постера)
- элементы с фоновым изображением, загруженным с помощью функции url() (в отличие от CSS-градиента)
- блочные элементы, содержащие текстовые узлы или другие дочерние строковые элементы
Обратите внимание, что ограничение элементов в этом списке было намеренным, чтобы упростить задачу вначале. Дополнительные элементы (например, , ) могут быть добавлены в будущем по мере проведения дополнительных исследований.
Как определяются размеры элемента?
Размер элемента, о котором сообщается для Largest Contentful Paint, обычно равен размеру, который виден пользователю в области просмотра. Если элемент выходит за пределы области просмотра, или если какой-либо элемент обрезан или имеет невидимое overflow, эти части не учитываются в размере элемента.
Для масштабированных изображений сообщается о видимых размерах или внутренних, в зависимости от того, что меньше. Например, уменьшенные изображения будут сообщать только размеры, в которых они отображаются, а растянутые изображения будут сообщать только свои внутренние (натуральные) размеры.
Для текстовых элементов учитываются только размеры их текстовых узлов (наименьший прямоугольник, охватывающий все текстовые узлы).
Для всех элементов любые поля, отступы или границы, применяемые с помощью только CSS, не учитываются.
Иногда бывает сложно определить, какие текстовые узлы каким элементам принадлежат. Особенно для элементов, у которых дочерние включают встроенные элементы и узлы с простым текстом, а также блочные элементы. Ключевым моментом является то, что каждый текстовый узел принадлежит своему ближайшему блочному элементу-предку. В терминах спецификации: каждый текстовый узел принадлежит элементу, который генерирует содержащий его блок.
Когда сообщается об отрисовке самого большого элемента?
Веб-страницы часто загружаются поэтапно, поэтому самый большой элемент на странице может измениться в процессе.
Чтобы перехватить возможные изменения, браузер отправляет PerformanceEntry типа large-contentful-paint , идентифицирующий самый большой контентный элемент, как только отрисовывается первый кадр. Но затем, после рендеринга следующих кадров, он будет отправлять другие PerformanceEntry каждый раз, когда изменяется самый большой содержательный элемент.
Например, на странице с текстом и заглавным изображением браузер может сначала просто отобразить текст – в этот момент он отправит largest-contentful-paint , свойство element которой, скорее всего, будет ссылаться на
или . Позже, как только заглавное изображение загрузится, будет отправлена следующая запись largest-contentful-paint , а её свойство element будет ссылаться на .
Важно отметить, что элемент может считаться самым большим элементом содержимого только после того, как он отрисован и станет видимым для пользователя. Еще не загруженные изображения не учитываются.
Также текстовые узлы не используют веб-шрифты в период блокировки шрифтов. В таких случаях о меньшем элементе может быть сообщено как о самом большом содержательном элементе, но как только более крупный элемент завершит рендеринг, о нём будет сообщено через другой объект PerformanceEntry .
Помимо поздней загрузки изображений и шрифтов, страница может добавлять новые элементы в DOM по мере поступления контента. Если какой-либо из этих новых элементов окажется больше, чем предыдущий самый большой содержательный элемент, то PerformanceEntry обязательно сообщит о нём.
Если самый большой элемент содержимого будет удален из области просмотра (или даже удален из DOM), он будет оставаться самым большим элементом содержимого, пока не появится элемент крупнее его.
До Chrome 88 удаленные элементы не считались элементами с наибольшим содержимым, и их удаление приводило к отправке новой записи largest-contentful-paint . Однако из-за популярных шаблонов пользовательского интерфейса, например карусели изображений, которые часто удаляют DOM-элементы, метрика была обновлена, чтобы точнее отражать то, что испытывают пользователи.
Браузер перестанет сообщать о новых записях largest-contentful-paint , как только пользователь начнёт взаимодействовать со страницей (касание, клик, прокрутка или нажатие клавиш), поскольку взаимодействие с пользователем может изменить то, что ему показывается. Это особенно очевидно при прокрутке страницы.
Для анализа вы должны сообщать в службу аналитики только последний отправленный PerformanceEntry элемент.
Предупреждение: иногда пользователи могут открывать страницы в фоновой вкладке. В этом случае возможно, что самая большая содержательная отрисовка вообще не произойдет, пока пользователь не откроет эту вкладку и в неё переместится фокус. Это может произойти сильно позже, чем при первой загрузке страницы.
Время загрузки или время рендеринга
По соображениям безопасности метка времени рендеринга изображений не отображается для изображений из разных источников, у которых отсутствует заголовок Timing-Allow-Origin . Вместо этого отображается только время их загрузки (поскольку оно уже доступно через многие другие веб-API).
В приведенном ниже примере показано, как обрабатывать элементы, время рендеринга которых недоступно. Но, по возможности, всегда рекомендуется устанавливать заголовок Timing-Allow-Origin , чтобы ваши показатели были более точными.
Как обрабатываются изменения макета и размера элемента?
Чтобы снизить влияние вычислений и отправки LCP-записей на общую производительность, изменения размеров или положения элемента не будут учитываться и создавать новых кандидатов LCP. Учитывается только начальный размер и положение элемента в области просмотра.
Это означает, что могут не передаваться изображения, которые изначально появляются за пределами, а затем оказываются в видимой области экрана. Это также означает, что изначально отображаемые в видимой области экрана элементы, которые затем выталкиваются из поля зрения, продолжат сообщать о своем исходном размере в области просмотра.
Примеры
Вот несколько примеров, как Largest Contentful Paint происходит на нескольких популярных веб-сайтах:
На обеих временных шкалах, самый большой элемент изменяется по мере загрузки содержимого. В первом примере новый контент добавляется в DOM, и это изменяет самый большой элемент. Во втором примере макет изменяется, и содержимое, которое ранее было самым большим, удаляется из видимой области экрана.
Хотя часто происходит так, что позже загруженный контент может оказаться крупнее, чем уже находящийся на странице, это не всегда так. Следующие два примера показывают, что Largest Contentful Paint происходит до полной загрузки страницы.
В первом примере рано загруженный логотип Instagram загружается остаётся самым крупным элементом, даже когда другой контент отображается постепенно. В примере страницы результатов поиска Google самый большой элемент – это абзац текста, который отображается до того, как любое из изображений или логотип завершит загрузку. Поскольку все отдельные изображения меньше этого абзаца, он остается самым большим элементом на протяжении всего процесса загрузки.
В первом кадре временной шкалы Instagram можно заметить, что вокруг логотипа камеры нет зеленой рамки. Это потому, что он – элемент , а -элементы в настоящее время не считаются кандидатами LCP. Первый кандидат LCP – это текст появляется во втором кадре.
Как измерить LCP
В полевых условиях
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- web-vitals JavaScript-библиотека
В лабораторных условиях
Измерение LCP в JavaScript
Чтобы измерить LCP в JavaScript, можно воспользоваться API Largest Contentful Paint API. В следующем примере показано, как создать PerformanceObserver , который прослушивает записи largest-contentful-paint и возвращает их в консоль.
new PerformanceObserver((entryList) => < for (const entry of entryList.getEntries()) < console.log('LCP кандидат:', entry.startTime, entry); >>).observe();Этот код показывает только, как записывать в консоль записи с самым большим содержимым, но само измерение LCP в JavaScript сложнее. Ниже будет рассмотрено, как:
В приведенном выше примере каждая зарегистрированная запись largest-contentful-paint представляет текущего кандидата LCP. Как правило, значение startTime последней отправленной записи является значением LCP, однако это не всегда так. Не все записи largest-contentful-paint подходят для измерения LCP.
Здесь перечислены различия между тем, что сообщает API, и тем, как рассчитывается метрика.
- API будет отправлять записи с самым большим содержимым largest-contentful-paint для страниц, загруженных на фоновой вкладке, но при вычислении LCP такие страницы следует игнорировать.
- API продолжит отправку записей largest-contentful-paint после того, как страница перестает быть фоновой, но эти записи следует игнорировать при вычислении LCP (элементы могут учитываться только в том случае, если страница все время была на переднем плане).
- API не сообщает о записях с самым большим содержимым, когда страница восстанавливается из кэша назад/вперед, но в таких случаях следует измерять LCP, поскольку пользователи воспринимают это как отдельные посещения страницы.
- API не учитывает элементы iframe , но для правильного измерения LCP вы должны их учитывать. iframe могут использовать API, чтобы сообщать о своих записях largest-contentful-paint в родительское окно для агрегирования.
Вместо того, чтобы запоминать все эти тонкости и различия, разработчики могут использовать JavaScript-библиотеку web-vitals для измерения LCP, которая, где это возможно, обрабатывает такие случаи:
import from 'web-vitals'; // Измерение и логирование LCP по возможности. getLCP(console.log);В некоторых случаях (например, в cross-origin iframe ) невозможно измерить LCP в JavaScript. Подробности в разделе ограничений библиотеки web-vitals.
Что, если самый большой элемент не самый важный?
В некоторых случаях самый важный элемент (или элементы) на странице не окажется самым большим элементом, но разработчики могут быть больше заинтересованы в измерении времени рендеринга таких элементов. Это возможно с помощью Element Timing API, как описано в статье о пользовательских метриках.
Как улучшить LCP
В первую очередь на LCP влияют четыре фактора:
- Медленное время ответа сервера
- Блокирующие рендеринг JavaScript и CSS
- Время загрузки ресурса
- Клиентский рендеринг
Подробности о том, как улучшить LCP можно изучить здесь. Дополнительные рекомендации по отдельным методам повышения производительности, которые также могут улучшить LCP, см.
- Применяйте мгновенную загрузку с PRPL-паттерном
- Оптимизация критического пути отрисовки
- Оптимизируйте свой CSS
- Оптимизируйте свои изображения
- Оптимизируйте web-шрифты
- Оптимизируйте свой JavaScript (для сайтов, которые рендерит клиент)