Значение DCL, L, FP, FCP, FMP, LCP в Chrome Devtool Performance

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

На рисунке представлены следующие важные моменты времени: DCL, L, FP, FCP, FMP, LCP. Здесь я разделяю первые два и последние, потому что они относятся к разным стандартам/черновикам W3C:navigation timingа такжеPaint timing.

DCL, L

DCL(DOMContentLoaded) представляет событие завершения загрузки HTML, а L(onLoad) представляет событие завершения загрузки всех ресурсов на странице.Вы должны быть хорошо знакомы с этими двумя событиями и не будем здесь их описывать.

Не только в отчете о производительности, но и в панели «Сеть».

Но DCL и L показывают разные значения в производительности и сети, потому что начальная точка временной шкалы в производительности — это когда вы нажали кнопку записи, а начальная точка временной шкалы в сети — это событие fetchStart. Что такое fetchStart?

Navigation Timing API

Рабочая группа W3C по производительности определяет серию событий страницы в Navigation Timing API, включая fetchStart, DOMContentLoaded, Load и другие события.

На рисунке ниже показан весь процесс от браузера, выгружающего старую страницу, до завершения загрузки новой страницы, причем каждое событие страницы перемежается между каждой фазой загрузки страницы.

Мы можем получить временные метки этих событий через свойство window.performance.timing, как показано ниже, а затем проанализировать производительность страницы.

Однако такие события, как Load и DOMContentLoaded в API времени навигации, на самом деле не отражают производительность загрузки страницы, поскольку они не соответствуют тому, что пользователь видит на экране. К счастью, браузеры во главе с Chrome придумали другие показатели производительности, которые лучше отражают пользовательский опыт.

FP, FCP, FMP, LCP

Инженеры Google настаивают на ориентированных на пользователя показателях производительности, призванных ответить на три вопроса о пользовательском опыте:

1. Это случилось?
2. Это полезно?
3. Можно ли использовать?

Это случилось? -- ФП и ФКП

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

FP(First Paint): Момент времени, когда страница впервые отображается в отличие от содержимого до навигации после навигации.

FCP(First Contentful Paint): Момент времени, когда любой текст, изображение, непустой холст или SVG впервые отрисовываются.

FP и FCP могут совпадать, или FP может предшествовать FCP. На приведенной ниже диаграмме показана разница между FP и FCP.

Эти два события определяют в проекте сроков краски W3C, мы можем получить значение двух точек во времени через Window.performance.getentriesbytype («краска»).

Это работает -- FMP и LCP

FMP(First Meaningful Paint): Момент времени, когда «основное содержимое» страницы отображается впервые.

FMP — это современная метрика производительности, введенная инженерами Google, которая сообщает нам, когда страница «полезна». По сути, он использует алгоритм, чтобы предположить, что определенный момент времени может быть FMP.

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

LCP(Largest Contentful Paint): Момент времени, когда на странице начинает появляться самый большой видимый элемент «контента» видимой области.

Алгоритм FMP очень сложен и неточен, и инженеры Google исследовали и обнаружили другой, более точный и простой способ определить, является ли страница «полезной», а именно увидеть, когда страница отображает самый большой элемент.

В настоящее время LCP является проектом, предложенным WICG (Группа сообщества инкубатора веб-платформы W3C).новые особенности, который еще не является официальной спецификацией W3C. Мы можем вычислить его с помощью Chrome PerformanceObserver API.

// Create a variable to hold the latest LCP value (since it can change).
let lcp;

// Create the PerformanceObserver instance.
const po = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];

  // Update `lcp` to the latest value, using `renderTime` if it's available,
  // otherwise using `loadTime`. (Note: `renderTime` may not be available if
  // the element is an image and it's loaded cross-origin without the
  // `Timing-Allow-Origin` header.)
  lcp = lastEntry.renderTime || lastEntry.loadTime;
});

// Observe entries of type `largest-contentful-paint`, including buffered
// entries, i.e. entries that occurred before calling `observe()`.
po.observe({type: 'largest-contentful-paint', buffered: true});

// Send the latest LCP value to your analytics server once the user
// leaves the tab.
addEventListener('visibilitychange', function fn() {
  if (lcp && document.visibilityState === 'hidden') {
    console.log('LCP:', lcp);
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Третий вопрос пользовательского опыта «Можно ли его использовать» можно просмотреть с помощью TTI (время до интерактивности), которое указывает, когда ваша страница может реагировать на взаимодействие с пользователем. Это еще не спецификация W3C, как FMP, и нет стандартного API для доступа к нему, но Google предоставляетполифилл для TTIМожно использовать для обнаружения, также можно получить TTI с маяком.

новые показатели производительности

На саммите разработчиков Chrome в ноябре рабочая группа W3C по производительности представила три показателя производительности, над которыми они работают: LCP,CLSа такжеTBT.

CLS(Cumulative Layout Shift): указывает частоту неожиданных изменений макета, с которыми сталкивался пользователь.

TBT(Total Blocking Time): Указывает, что от FCP до TTI всеlong taskсумма времени блокировки.

В новом рейтинге производительности Lighthouse скоро будет меньше внимания FMP и FCI, и он будет включать три новые функции: LCP, TBT и CLS.