Скорость загрузки веб-сайта можно измерить с помощью следующих подходов и метрик:
Инструменты для измерения:
- Инструменты разработчика браузера: Вкладка Network (Сеть) в Chrome, Firefox, Edge, Safari позволяет отслеживать время загрузки каждого ресурса (HTML, CSS, JS, изображения), Waterfall chart, метрики (DOMContentLoaded, Load).
- Онлайн-сервисы: GTmetrix, PageSpeed Insights (от Google), Pingdom Tools. Они предоставляют детальные отчеты о производительности, рекомендации по улучшению и оценивают различные метрики.
- Инструменты командной строки: Lighthouse (интегрирован в Chrome DevTools, но может запускаться из командной строки), WebPageTest (может запускаться локально). Позволяют автоматизировать тестирование и получать структурированные отчеты.
- Real User Monitoring (RUM) / Мониторинг реальных пользователей: Инструменты типа New Relic, Dynatrace, Sentry. Собирают данные о производительности сайта непосредственно от браузеров реальных пользователей.
Основные метрики производительности (Core Web Vitals и другие):
- First Contentful Paint (FCP): Время до отображения первого элемента контента (текста, изображения) на странице.
- Largest Contentful Paint (LCP): Время до отображения наибольшего элемента контента в видимой области экрана. Ключевая метрика для измерения perceived load speed.
- Cumulative Layout Shift (CLS): Мера визуальной стабильности. Суммирует смещения элементов контента, которые случаются в процессе загрузки страницы.
- First Input Delay (FID): Время от первого взаимодействия пользователя со страницей (клик, нажатие клавиши) до того момента, когда браузер начнет обрабатывать эту реакцию. Измеряет интерактивность. Будет заменен на Interaction to Next Paint (INP) с марта 2024.
- Time to Interactive (TTI): Время, когда страница становится полностью интерактивной, то есть основное содержимое отображено, большинство обработчиков событий зарегистрировано, и страница отвечает на действия пользователя в течение 50 мс.
- DOMContentLoaded: Время, когда исходный HTML-документ полностью загружен и разобран. Не ждет загрузки CSS, изображений и подресурсов.
- Load (Onload): Время, когда вся страница, включая все ресурсы (CSS, JS, изображения), полностью загружена.
Подходы к измерению:
- Лабораторные тесты: Проведение тестов в контролируемой среде с фиксированными условиями сети и устройства. Идеально для выявления регрессий в производительности.
- Мониторинг реальных пользователей (RUM): Сбор данных о производительности в реальных условиях использования. Дает представление о производительности для реальной аудитории.
Важные аспекты при измерении:
- Тестирование на разных устройствах (настольные, мобильные) и в разных условиях сети (Fast 3G, Slow 3G, Wi-Fi).
- Измерение для разных страниц сайта (главная, карточка товара, страница списка, страница с формой).
- Отслеживание производительности во времени, чтобы выявлять тенденции и регрессии.
Пример получения метрик с помощью Performance API в браузере:
javascript