Чтобы понять, насколько хорошо работает сайт, нужно каким-то образом оценить его производительность. Но как это сделать?
На помощь приходят Performance APIs.
Performance APIs — это группа браузерных API для измерения производительности загрузки и работы страниц. Они дают разработчику возможность замерить, сколько времени занимает то или иное событие.
Что можно замерить с их помощью
- Navigation Timing — сколько заняла загрузка страницы.
- Resource Timing — как быстро загружаются скрипты, стили, картинки и шрифты.
- Paint Timing — когда страница начала отображаться (First Paint, First Contentful Paint).
- Largest Contentful Paint — когда на странице отобразилось самое большое контентное изображение.
- Layout Shift — были ли сдвиги лэйаута.
- Long Tasks — есть ли на странице тяжёлые операции, которые тормозят интерфейс.
- User Timing — можно создать свои собственные метки и замерить время между ними (например, сколько времени занимает исполнение функции).
PerformanceObserver
Также ещё есть PerformanceObserver. С помощью него можно подписаться на события перформанса, которые генерируют вышеперечисленные API, и выполнить нужный колбэк.
Кстати, библиотеки для расчёта web-vitals под капотом как раз используют Performance APIs.
Более подробно с ними можно ознакомиться на MDN.