Первая значимая краска (FMP) — это одна из шести метрик, отслеживаемых в разделе «Производительность» отчета Lighthouse. Каждая метрика отражает определенный аспект скорости загрузки страницы.
Маяк отображает FMP за секунды:
Что измеряет FMP
FMP измеряет, когда основной контент страницы виден пользователю. Исходная оценка FMP — это время в секундах между пользователем, инициирующим загрузку страницы, и страницей, отображающей основной контент над сгибом. FMP по сути показывает время отрисовки, после которого происходит самое большое изменение макета верхней части страницы. Узнайте больше о технических деталях FMP в книге Google Time to First Meaningful Paint: подход на основе макета .
First Contentful Paint (FCP) и FMP часто совпадают, когда первый бит контента, отображаемый на странице, включает контент над сгибом. Однако эти показатели могут отличаться, например, если контент находится над сгибом iframe. FMP регистрируется, когда содержимое iframe видно пользователю, тогда как FCP не включает содержимое iframe.
Как Lighthouse определяет ваш балл FMP
Как и FCP, FMP основан на реальных данных о производительности веб-сайта из HTTP-архива .
Когда FMP и FCP одинаковы, их баллы идентичны. Если FMP возникает после FCP — например, когда страница содержит содержимое iframe, — оценка FMP будет ниже, чем оценка FCP.
Например, предположим, что ваш FCP составляет 1,5 секунды, а ваш FMP — 3 секунды. Оценка FCP будет равна 99, а оценка FMP — 75.
В этой таблице показано, как интерпретировать ваш показатель FMP:
| Метрика FMP (в секундах) | Цветовое кодирование | Оценка ФМП (Процентиль FCP HTTP-архива) |
|---|---|---|
| 0–2 | Зеленый (быстро) | 75–100 |
| 2–4 | Оранжевый (умеренный) | 50–74 |
| Более 4 | Красный (медленный) | 0–49 |
Как улучшить свой балл FMP
См. раздел «Как улучшить самую большую содержательную отрисовку на вашем сайте» . Стратегии улучшения FMP во многом такие же, как и стратегии улучшения Largest Contentful Paint.
Отслеживание FMP на устройствах реальных пользователей
Чтобы узнать, как определить, когда FMP действительно происходит на устройствах ваших пользователей, посетите страницу Google «Показатели производительности, ориентированные на пользователя» . В разделе «Отслеживание FMP с использованием главных элементов» описывается, как программно получить доступ к данным FCP и отправить их в Google Analytics.
Дополнительную информацию о сборе показателей реальных пользователей см. в статье Google «Оценка производительности загрузки в реальной жизни с помощью навигации и синхронизации ресурсов» . Аудит Lighthouse позволяет вам видеть данные пользовательского времени в отчете.
Как улучшить общий показатель производительности
Если у вас нет конкретной причины сосредоточиться на определенном показателе, обычно лучше сосредоточиться на улучшении общего показателя производительности.
Используйте раздел «Возможности» вашего отчета Lighthouse, чтобы определить, какие улучшения будут иметь наибольшую ценность для вашей страницы. Чем более значимой является возможность, тем больший эффект она окажет на ваш показатель производительности. Например, на скриншоте Lighthouse ниже показано, что устранение ресурсов, блокирующих рендеринг , приведет к наибольшему улучшению:
Посетите целевую страницу «Аудит производительности» , чтобы узнать, как использовать возможности, указанные в вашем отчете Lighthouse.