Быстрая первая отрисовка: FCP и LCP

Прямой ответ

Две метрики описывают скорость появления содержимого: время первого содержимого (FCP) и время основного содержимого (LCP).

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime, entry.element);
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

Элемент, определяющий LCP, выявляется наблюдателем, поэтому оптимизация направлена на конкретный ресурс, а не на страницу в целом. О метриках скорости в совокупности — в статье про Core Web Vitals.

Факторы задержки и способы сокращения

Задержка отрисовки определяется цепочкой от запроса документа до получения ресурса, определяющего метрику.

Блокирующие ресурсы. Стили в заголовке и скрипты без атрибутов задерживают отрисовку, поскольку браузер не отображает содержимое до их обработки. О устранении — в статье про render-blocking ресурсы.

Позднее обнаружение ресурса. Ресурс, указанный в стилях либо загружаемый скриптом, обнаруживается после цепочки зависимостей, поэтому его загрузка начинается поздно.

Отсутствие критических стилей. Стили первого экрана, загружаемые внешним файлом, задерживают отрисовку до получения файла. О встройке — в статье про критический CSS.

Практическое следствие: сокращение метрики достигается устранением блокировки и ранним обнаружением ресурса, определяющего отрисовку.

Отдельный аспект — приоритет загрузки. Ресурс, определяющий LCP, загружается с высоким приоритетом, поскольку его получение определяет момент отрисовки основного содержимого.

Три признака некорректной оптимизации.

Оптимизация без определения элемента. Изменения направлены на страницу в целом, а не на ресурс, определяющий метрику.

Отложенная загрузка ресурса первого экрана. Основной элемент загружается позже, поэтому метрика растёт.

Измерение только в лабораторных условиях. Лабораторные данные не отражают распределение реальных устройств и сетей.

Проверка выполняется на полевых данных, поскольку распределение реальных условий шире лабораторных.

Целевые значения и распределение показателей

Метрики отрисовки оцениваются по распределению значений, поскольку единичное измерение не отражает опыт пользователей.

Целевое значение. Устанавливается по верхней границе распределения, поэтому доля пользователей с медленной загрузкой сокращается. Оптимизация среднего значения не изменяет долю медленных загрузок.

Различие лабораторных и полевых данных. Лабораторные условия одинаковы для каждого измерения, полевые данные отражают распределение устройств и сетей. Расхождение между ними указывает на зависимость от условий клиента.

Влияние типа соединения. Ресурс, загружаемый быстро при высокоскоростном соединении, задерживается при медленном, поэтому объём ресурса определяет долю медленных загрузок.

Практическое следствие: оптимизация направляется на сокращение объёма загружаемых ресурсов, поскольку это влияет на долю пользователей с медленным соединением.

Отдельный аспект — приоритет ресурсов. Ресурс, определяющий метрику, загружается с высоким приоритетом, поэтому его получение не задерживается другими загрузками.

Влияние кэширования на повторные посещения

Ресурсы из кэша не передаются повторно, поэтому время отрисовки при повторном посещении сокращается.

Первое посещение. Ресурсы загружаются полностью, поэтому время отрисовки определяется объёмом и скоростью соединения.

Повторное посещение. Ресурсы получаются из кэша, поэтому время отрисовки сокращается. Изменение состава ресурсов инвалидирует кэш.

Практическое следствие: оптимизация времени отрисовки направлена на первое посещение, поскольку повторное использует кэш. О стратегиях — в статье про кэширование браузера.

Практика: сокращение времени отрисовки

1. Определите элемент, определяющий метрику. Наблюдатель показывает конкретный ресурс, поэтому оптимизация направлена на него.

2. Устраните блокирующие ресурсы. Стили и скрипты, задерживающие отрисовку, загружаются асинхронно либо с отложением.

3. Встройте критические стили. Стили первого экрана доступны сразу, поэтому отрисовка не ждёт внешнего файла.

4. Установите высокий приоритет для основного ресурса. Ресурс, определяющий метрику, загружается раньше остальных.

5. Предзагрузите ресурс, обнаруживаемый поздно. Загрузка начинается до обнаружения ресурса в цепочке зависимостей.

6. Проверяйте на полевых данных. Лабораторные условия не отражают распределение реальных устройств и сетей.

7. Измеряйте до и после изменения. Фактическое сокращение метрики подтверждает эффект оптимизации.

Рекомендации:

1. Различайте первое и основное содержимое. Первое содержимое отрисовывается раньше, поэтому оптимизация направлена на разные ресурсы.
2. Учитывайте цепочку зависимостей. Ресурс, обнаруживаемый после нескольких уровней, загружается поздно.
3. Не откладывайте загрузку основного ресурса. Отложенная загрузка ресурса первого экрана увеличивает метрику.
4. Проверяйте распределение значений. Среднее значение не отражает долю пользователей с медленной загрузкой.
5. Пересматривайте при изменении страницы. Изменение состава первого экрана меняет элемент, определяющий метрику.

Практический сценарий: метрика основного содержимого была высокой

Контекст: время отрисовки основного содержимого превышало целевое значение, при этом страница содержала один крупный элемент.

1. Диагностика. Наблюдатель показал, что метрику определяет изображение, которое загружалось после цепочки: документ, скрипт, данные, отрисовка. Изображение обнаруживалось поздно, поэтому его загрузка начиналась после получения данных.
2. Причина. Ресурс, определяющий метрику, зависел от цепочки запросов. Отложенная загрузка не применялась, но позднее обнаружение добавляло время к моменту отрисовки.
3. Действия. (а) Добавили предзагрузку изображения с высоким приоритетом, чтобы загрузка начиналась сразу; (б) указали атрибуты размеров, чтобы место было зарезервировано до загрузки; (в) исключили изображение из отложенной загрузки, поскольку оно относится к первому экрану; (г) сократили объём изображения, выбрав формат с лучшим соотношением; (д) измерили метрику на полевых данных после изменения.
4. Результат. Метрика основного содержимого сократилась, поскольку загрузка изображения начинается сразу, а не после цепочки запросов.

Вывод: метрику определяет конкретный ресурс, выявляемый наблюдателем. Оптимизация направляется на раннее обнаружение и высокий приоритет этого ресурса, а не на страницу в целом.

FAQ

Чем FCP отличается от LCP? FCP измеряет момент отрисовки первого текстового либо графического элемента, LCP — момент отрисовки наибольшего видимого элемента. Первое содержимое появляется раньше.

Как определить элемент, задающий LCP? Наблюдателем производительности, который сообщает элемент и время отрисовки. Оптимизация направляется на выявленный ресурс.

Нужно ли измерять на полевых данных? Да, лабораторные условия не отражают распределение реальных устройств и сетей. Полевые данные показывают долю пользователей с медленной загрузкой.

Можно ли откладывать загрузку ресурса первого экрана? Нет, основной элемент загружается сразу, поскольку отложенная загрузка увеличивает время отрисовки основного содержимого.

Источники: web.dev FCP, web.dev LCP, MDN LargestContentfulPaint — ссылки в шапке.