С какой метрики начинаешь отладку производительности приложения

Ответ

Начинаю с Largest Contentful Paint (LCP) – ключевая метрика загрузки контента. Если LCP > 2.5s – это проблема. Далее смотрю:

  1. Time to First Byte (TTFB) – проверяю бэкенд и сетевые задержки.
  2. First Input Delay (FID) – интерактивность (должен быть < 100ms).
  3. Cumulative Layout Shift (CLS) – визуальная стабильность.

Пример анализа в Lighthouse:

// Проверка в DevTools:
1. Открыть вкладку Lighthouse
2. Запустить аудит
3. Анализировать показатели LCP, FID, CLS

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

Ответ 18+ 🔞

Да ты посмотри, какой у нас тут распиздяй собрался — Largest Contentful Paint (LCP), блядь! Это ж главный показатель, сколько твоя страница тупит, пока самый большой кусок контента вылезет. Если больше 2.5 секунд — пиши пропало, народ уже в соседнюю вкладку свалил, пока ты тут со своими скриптами разбираешься. Ну а дальше-то что? А дальше я как хирург-мясник начинаю резать по живому.

Первым делом хватаю за Time to First Byte (TTFB). Это ж, сука, фундамент! Если сервер тупит, как пьяный ёжик в тумане, и отдаёт первый байт дольше, чем я утром кофе варю — всё, пиздец. Тут либо бэкенд гонять, либо кэширование настраивать, либо CDN подключать — вариантов дохуя, но делать надо.

Потом смотрю на First Input Delay (FID). Представь: пользователь тыкнул кнопку, а она, блядь, молчит, как Герасим из той истории. Он тыкает ещё раз, уже злее. А интерфейс-то завис, потому что какой-то скрипт-ублюдок весь главный поток заблочил. Надо, чтобы отклик был меньше 100 миллисекунд — быстрее, чем твоя бывшая смс-ку шлёт после ссоры.

Ну и куда же без Cumulative Layout Shift (CLS) — этой ёбаной пляски верстки. Только начал статью читать, а тут БАЦ — рекламный баннер впердолился сверху, и весь текст уехал вниз. Ты уже не читаешь, а ловишь курсором убегающие абзацы, как муху тапком. Это, блядь, недопустимо! Элементы должны вставать на свои места сразу и навсегда, как приклеенные.

Вот смотрю я в Lighthouse, как в магический шар, и вижу всю эту хуйню как на ладони:

// Беру DevTools, открываю вкладку Lighthouse
// Жму кнопку "Запустить аудит" и жду, пока он мне всю правду-матку выложит
// А потом сижу и разбираюсь: что за ресурсы такие тяжёлые, что LCP проседает, какой скрипт FID портит, и откуда эти прыгающие блоки на CLS взялись

И начинается самое интересное — оптимизация. Картинки-гиганты режу, скрипты лениво гружу, кэш настраиваю так, чтобы второй раз страница летела как угорелая. В общем, довожу до ума, чтобы не стыдно было. А то ведь и правда — народ безмозглый, блядь, второй раз на тормозной сайт не зайдет, сразу в пизду его пошлёт.