Angular Academy · Урок

Измерение основных веб-показателей

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

«Измерение основных веб-показателей» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Зачем нужны показатели

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

Три метрики

В эту тройку входят LCP (отрисовка самого крупного содержимого), CLS (совокупное смещение макета) и INP (взаимодействие до следующей отрисовки). Каждая метрика оценивает отдельный аспект воспринимаемой производительности.

LCP

LCP измеряет момент завершения отрисовки самого крупного видимого элемента (главного изображения или заголовка). Хорошим считается результат менее 2,5 секунды. SSR помогает, доставляя это содержимое в первоначальном HTML.

CLS

CLS измеряет неожиданные смещения макета во время загрузки страницы. Хорошим считается результат менее 0,1. Резервируйте место для изображений и рекламы и не вставляйте содержимое перед уже существующим.

<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->

INP

INP измеряет отзывчивость на взаимодействия пользователя на протяжении всего времени жизни страницы, заменяя прежнюю метрику FID. Хорошим считается результат менее 200 мс. Тяжёлый JS в основном потоке ухудшает INP.

Как SSR улучшает показатели

SSR улучшает LCP, поскольку контент отображается раньше, и может уменьшить CLS, заранее доставляя стабильный макет. Инкрементальная гидратация улучшает INP, загружая меньше JavaScript на начальном этапе.

Данные лабораторных и полевых измерений

Лабораторные данные получают с помощью синтетических инструментов, таких как Lighthouse, в контролируемой среде. Полевые данные (CrUX, RUM) поступают от реальных пользователей. Оптимизируйте приложение с учётом обоих видов данных; именно полевые данные используются для ранжирования.

Измерение с помощью Lighthouse

Запустите Lighthouse в Chrome DevTools или в системе непрерывной интеграции, чтобы получить лабораторные значения LCP и CLS, приблизительную оценку общего времени блокировки для INP, а также рекомендации по исправлению проблем.

// npx lighthouse https://example.com --view

Библиотека web-vitals

Собирайте показатели от реальных пользователей в браузере с помощью библиотеки web-vitals и отправляйте их на конечную точку аналитики.

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP(console.log);
onCLS(console.log);
onINP(console.log);

Уменьшение объёма JavaScript

Меньшие пакеты улучшают INP и время до интерактивности. Используйте отложенную загрузку на уровне маршрутов, @defer, инкрементальную гидратацию и удаление неиспользуемого кода, чтобы сократить объём поставляемого JS.

Повторяйте измерения и проверяйте результат

Работа над производительностью выглядит так: измерить, изменить, снова измерить. После включения SSR, гидратации или defer повторно запустите Lighthouse и в течение нескольких недель отслеживайте динамику полевых данных, чтобы подтвердить реальные улучшения.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете основные показатели веба.

Итоги

Вы изучили основные показатели веба (LCP, CLS, INP), узнали, как SSR и инкрементальная гидратация улучшают их, разобрались в различии между лабораторными и полевыми данными, а также научились измерять показатели с помощью Lighthouse и библиотеки web-vitals, повторяя измерения для проверки результата.

Часто задаваемые вопросы

Урок «Измерение основных веб-показателей» бесплатный?

Да — полный текст урока «Измерение основных веб-показателей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Измерение основных веб-показателей»?

Отслеживайте и улучшайте показатели производительности Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Измерение основных веб-показателей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy