Первая довольная краска, или FCP, измеряет время, чтобы отобразить первый элемент веб -страницы. Это современное, ориентированное на пользователя измерение того, как быстро пользователи видят ответ с вашего сайта. Вот все, что вам нужно знать о метрике и как его использовать.
FCP — один из Основная сеть жизненно важна Метрики производительности, которые измеряют воспринимаемую производительность пользователя веб -сайтов. Эти метрики невероятно важны для обеспечения быстрого опыта пользователей и Избегание штрафов SEO производительности Анкет Посмотрите, как FCP сравнивается с другими показателями производительности в Окончательное руководство по измерению веб -производительности Анкет
Первая довольная метрика краски
Первая довольная метрика краски рассматривает все шаги, необходимые для того, чтобы показать пользователю первый бит запрошенного контента. Это включает в себя время для ваших серверов, чтобы ответить, время передачи сети, размер и сложность HTML, а также необходимые активы CSS.
В этом случае Удовлетворение относится к любым текстовым или элементам изображения, но не к цвету фона документа.
Проверьте этот пример Диаграмма водопада , и где FCP помечен.
FCP в погрузочном водопаде
Загрузка изображений веб -страницы не требуется для FCP, но браузер действительно необходимо загрузить все стили CSS, включая стили, прикованные в цепье @Import заявления. Гнездование нескольких уровней стилей может резко замедлить производительность FCP.
Метрический диапазон FCP
Google определяет приемлемые диапазоны для FCP меньше 1,0 секунды Анкет Все, что по сравнению с негативным пользовательским опытом и возможным рейтингом. FCP оценки больше, чем 3,0 секунды Укажите серьезную проблему производительности для вашего сайта.
Измерение FCP с помощью PerformanceObserver
Первая довольная краска измеряется с использованием PerformanceObserver API и поддерживается в браузерах на основе Blink, таких как Chrome, Edge, Android и Opera. Другие браузеры, в том числе Chrome на iOS, Safari и Firefox, не могут сообщить о метрик FCP.
Вот небольшой код, чтобы проиллюстрировать API:
new PerformanceObserver((entryList) => {
console.log(entryList.getEntriesByName("first-contentful-paint"));
}).observe({ type: "paint", buffered: true });
В отличие от Самая большая довольная краска Метрика, не существует выделенного типа для FCP. Вы должны слушать все события краски и отфильтровать их по имени. буферирован Опция позволяет собирать данные после того, как это произошло. Вставьте этот код в DevTools на любую страницу, и вы увидите что -то вроде этого:
FCP производительность
Обратите внимание, что значение измерения время начала , не продолжительность . Starttime это когда событие FCP начал , пока Продолжительность Как долго длилось событие, которое обычно 0.
Причуды, готы и неожиданное поведение
Скорее всего, вы не будете измерять FCP самостоятельно. Вы полагаетесь на библиотеку, как Веб-виталы или такая услуга, как Запросить метрики Чтобы собрать данные для вас. Но если вы действительно хотите измерить FCP самостоятельно, есть несколько неожиданных вещей, на которые вы должны обратить внимание.
1. Не измеряйте фоновые страницы
Страницы, которые загружены в фоновом режиме, такие как открытые на другой вкладке или в то время как минимизированные, не будут иметь точных измерений FCP. Первая контента-краска Вход производительности запускается после просмотра страницы, которая будет значительно медленнее, чем фактическое время загрузки страницы.
Вы можете обнаружить, находится ли страница в фоновом режиме и отфильтровать метрики:
var hiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
document.addEventListener('visibilitychange', (event) => {
hiddenTime = Math.min(hiddenTime, event.timeStamp);
}, { once: true });
new PerformanceObserver(entryList => {
entryList.getEntriesByName("first-contentful-paint").forEach((entry) => {
if (entry.startTime < hiddenTime) {
// This entry occurred before the page was hidden
console.log(entry);
}
};
}).observe({ type: "paint", buffered: true });
2. Всегда используйте обнаружение функций
Многие (большинство) браузеров не поддерживают PerformanceObserver или краска тип. Некоторые браузеры, объект не определяется, в то время как другие вынесут ошибку, если вы попытаетесь использовать ее. Try/Catch — самый надежный способ обнаружения совместимости браузера.
try {
new PerformanceObserver(entryList => {
console.log(entryList.getEntriesByName("first-contentful-paint"));
})
// Some browsers throw when 'type' is passed:
.observe({ type: "paint", buffered: true });
}
catch (e) { /* Not Supported */ }
3. Стили в документ не считаются
Некоторые страницы будут применять встроенные стили к своим html или тело Элементы, такие как фоновый цвет, границы или очертания. Пока эти стили делают краска На экране они не рассматриваются для первой контент-красовой метрики.
Улучшение баллов FCP
FCP включает в себя все время ожидания и получения документа, файлов CSS и синхронных сценариев. Вы можете улучшить свои оценки FCP, сделав свои серверы быстрым, ваши ресурсы небольшими и немногими, и сеть хмель коротко. Вот несколько общих тактик, которые могут помочь:
- Уменьшить работу на сервере и кэшировать дорогостоящие действия
- Используйте сжатие на HTML, CSS и другие ресурсы
- Уменьшите критические CSS, необходимые для визуализации страницы
- Используйте меньше и более эффективные шрифты
- Подавать контент через CDN
- Используйте эффективные настройки кэширования HTTP
Все улучшения, которые вы вносите в FCP, также помогут вашему Самая большая довольная краска баллы.
Вывод
Первая довольная метрика краски является важной частью истории веб -производительности, но она не единственная! Узнайте больше о других показателях веб -производительности и о том, как измерить их в Окончательное руководство по измерению веб -производительности Анкет
Оригинал: «https://dev.to/requestmetrics/using-first-contentful-paint-fcp-41ff»