Ответ
В браузере есть несколько ключевых метрик для измерения производительности:
- FCP (First Contentful Paint) – время появления первого контента (текст, изображение).
- LCP (Largest Contentful Paint) – загрузка самого большого элемента в viewport (обычно hero-блок).
- TTI (Time to Interactive) – когда страница становится интерактивной (откликается на действия).
- CLS (Cumulative Layout Shift) – визуальная стабильность (измеряет неожиданные сдвиги контента).
- FID (First Input Delay) – задержка реакции на первый клик/ввод.
Пример измерения через PerformanceObserver:
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.name, entry.startTime);
}
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });Ответ 18+ 🔞
А, слушай, вот эти ваши браузерные метрики производительности — это же просто песня, а не работа! Сидишь, бывает, такой, ждёшь, когда же эта ебучая страница наконец покажется, а она — ни хуя. Так вот, чтобы не гадать на кофейной гуще, умные люди придумали целую кучу замеров.
Первым делом — FCP (First Contentful Paint). Это когда на белом экране, наконец-то, ёпта, что-то прорисовывается. Буква, картинка, хоть одна пиксельная точка — уже праздник. Пиздец как радуешься.
Потом идёт LCP (Largest Contentful Paint). Это уже главный герой сериала, самый большой кусок контента на экране. Обычно это та самая картинка-заглушка или баннер, который грузится дохуя времени. Пока он не появится — всё, считай, вхолостую.
А вот TTI (Time to Interactive) — это вообще святое. Страница вроде есть, но ты на кнопку жмёшь, а она, сука, не жмётся! Вот TTI — это тот самый момент, когда интерфейс просыпается и начинает тебя слушаться. До этого — общение с тыквой.
CLS (Cumulative Layout Shift) — моя любимая, блядь, метрика! Это когда ты уже начал читать, ткнул в ссылку, а тут БАЦ — рекламный блок с кричащим мужиком выезжает сверху и сносит весь контент в пизду. Вот эта сумма всех внезапных прыжков и сдвигов и есть CLS. Чистое издевательство, ёпта.
Ну и FID (First Input Delay). Вроде мелочь, но бесит нереально. Тыкнул мышкой — а отклика ни хуя. Просто тишина на полсекунды. Вот эта задержка перед первой реакцией и есть FID. Чувствуешь себя идиотом, который стучится в закрытую дверь.
А мерить это всё можно вот таким вот нехитрым заклинанием, в рот меня чих-пых:
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.name, entry.startTime);
}
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });Вот так, сидишь, смотришь в консоль, а там эти циферки ползут. И сразу понимаешь, где у тебя в коде собака зарыта, а где — целая псарня. Без этого — как слепой котёнок, ей-богу.