Скорость и производительность
Метрики загрузки и отзывчивости — LCP, CLS, INP, TTFB — и техники, которые на них влияют: сжатие, отложенная загрузка, preload.
Термины словаря
LCP: скорость появления основного контента
LCP (Largest Contentful Paint) — метрика, отражающая время появления крупнейшего подходящего элемента содержимого в видимой области страницы.
CLS: стабильность расположения элементов
CLS (Cumulative Layout Shift) — метрика визуальной стабильности, учитывающая неожиданные смещения элементов страницы. Она не измеряется в секундах.
INP: отзывчивость страницы на действия
INP (Interaction to Next Paint) — метрика отзывчивости, оценивающая задержку между взаимодействием пользователя и следующим отображённым кадром.
FCP: когда появляется первое содержимое страницы
FCP: определение, практический пример и проверка. FCP — время от начала навигации до первой отрисовки содержимого страницы, например текста или изображения.
Тайминг первого байта: определение и проверка
Тайминг первого байта, или TTFB, — время от начала навигации до поступления первого байта ответа.
Ленивая загрузка: ресурсы по мере необходимости
Ленивая загрузка — откладывание загрузки необязательных ресурсов до момента, когда они становятся нужны. Для изображений браузер поддерживает loading="lazy".
Preload: ранняя загрузка важного ресурса
Preload: определение, практический пример и проверка. Preload — указание браузеру заранее начать загрузку ресурса, который скоро понадобится текущей странице.
Gzip: сжатие HTTP-ответов сайта
Gzip: определение, практический пример и проверка. Gzip — формат сжатия, который используется в HTTP для уменьшения передаваемого объёма ресурсов.
Zstandard: сжатие данных без потерь
Zstandard: определение, практический пример и проверка. Zstandard, или zstd, — механизм сжатия данных без потерь с собственным форматом представления.
WebP: сжатие изображений для веба
WebP: определение, практический пример и проверка. WebP — формат изображений с поддержкой сжатия с потерями, без потерь, прозрачности и анимации.
Растровое изображение: картинка из пикселей
Растровое изображение представляет картинку сеткой пикселей. Детализация зависит от размеров этой сетки, а также от качества исходного изображения и сжатия.
Частота кадров: определение и проверка
Частота кадров — количество кадров, которые приложение формирует или показывает за секунду; обычно обозначается FPS.
Debounce: как объединить частые вызовы функции
Debounce: определение, практический пример и проверка. Debounce объединяет серию частых вызовов в один, выполняемый после заданной паузы или по выбранному правилу.
Утечка памяти: определение и проверка
Утечка памяти — ситуация, когда приложение продолжает удерживать уже ненужные данные и не позволяет освободить занимаемую память.
Шрифт в вебе: определение и проверка
Веб-шрифт — шрифт, который браузер использует для отображения текста страницы; файл может загружаться с сайта или внешнего сервера.
Материалы журнала
SSR и CSR на одном примере: как провести сравнение
Чтобы сравнить SSR и CSR, используйте одинаковое содержание и заранее задайте условия. Отдельно измеряйте доступность HTML, появление контента и интерактивность; ниже приведён протокол, а не результаты эксперимента.
Lazy loading: что откладывать, а что показывать сразу
Откладывайте загрузку ресурсов, которые не нужны для первого просмотра, но сначала проверьте главное изображение и доступность контента. Ленивая загрузка изображения и загрузка статьи только после клика — разные механизмы.
LCP: как найти причину позднего появления контента
Для улучшения LCP сначала определите главный элемент и причину задержки. Медленный ответ сервера, позднее обнаружение изображения и задержка отрисовки требуют разных исправлений.
CLS: как найти и исправить скачки страницы
Для исправления CLS найдите элементы, которые смещаются, и событие перед смещением. Частые причины — незарезервированное место, поздние вставки и изменение размеров текста после загрузки шрифта.
INP: почему интерфейс тормозит после нажатия
Исследуйте задержку реакции в конкретном сценарии: очередь ввода, обработчики и подготовку следующего кадра. Сокращение сетевого запроса не исправит тяжёлую синхронную работу, блокирующую интерфейс.
Лабораторные и полевые данные скорости: почему результаты различаются
Лаборатория помогает воспроизвести причину, а полевые данные отражают опыт реальных посещений. Сравнивать их можно только с учётом устройств, сценариев, периода и способа расчёта.