Рассмотрим более подробно FCP — параметр загрузки страницы.
Напомним, что FCP (First Contentful Paint) — это момент времени от клика до первых отображений на странице, вот Google приводит в пример:
Вот тут на 2 слайде !!! — так как начало появляться отображение контента.
Следовательно, это важный параметр…и люди не будут долго ждать, если FCP слишком длинный по времени.
Поэтому нужно знать, что влияет на данный параметр:
- изображения (фоновые или элементы svg или canvas)
- текст
Как вы видите на изображении — загружено только часть контента, это и отличает данный параметр от LSP (когда загружен последний элемент страницы)
Какой отличный показатель FCP
Естественно, что нужно стремится к тому, чтобы уменьшить данный показатель загрузки страницы: Google сообщает, что наилучшим значением является — 1,8 секунды, а вот больше 3 секунд и выше — ПЛОХО!!!.
Как улучшить First Contentful Paint
Для того, чтобы улучшить сперва пройдите диагностику страницы с помощью плагина для Chrome браузеров — Lighthouse или при помощи Google Page Speed.
Что можно улучшить:
- оптимизировать CSS (в том числе удалить неиспользуемые)
- оптимизировать JS (в том числе удалить неиспользуемые)
- удалить ресурсы, которые мешают рендерингу страницы
- уменьшение времени ответа сервера (TTFB)
- предварительно подключите необходимые источники
- по возможности избегайте множественных перенаправлений
- не перегружайте DOM дерево
- используйте кэш для статических ресурсов
- нужно убедится, что текст видимый во время загрузки шрифта
- избегайте чрезмерного увеличения количества запросов (минимизируйте их, если такое произошло)
Будьте внимательны: дополнения в браузере будут влиять на измерения данного показателя, если делаете это через плагин, поэтому пробуйте через режим «Инкогнито».
Также посмотрите умеете ли вы работать с Clean param
Смотрите также:
