Производительность является важной частью пользовательского опыта и влияет на бизнес-показатели . Соблазнительно думать, что если вы хороший разработчик, то в итоге получите эффективный сайт, но правда в том, что хорошая производительность редко является побочным эффектом. Как и в большинстве других вещей, чтобы достичь цели, вам необходимо четко ее определить. Начните путь с установки бюджета производительности .
Определение
Бюджет производительности — это набор ограничений, налагаемых на показатели, влияющие на производительность сайта. Это может быть общий размер страницы, время, необходимое для загрузки в мобильной сети, или даже количество отправленных HTTP-запросов. Определение бюджета помогает начать разговор о веб-производительности. Он служит отправной точкой для принятия решений о дизайне, технологиях и добавлении функций.
Наличие бюджета позволяет дизайнерам подумать об эффектах изображений с высоким разрешением и количестве веб-шрифтов, которые они выбирают. Это также помогает разработчикам сравнивать различные подходы к решению проблемы и оценивать платформы и библиотеки на основе их размера и стоимости анализа .
Выберите показатели
Количественные показатели ⚖️
Эти показатели полезны на ранних стадиях разработки, поскольку они подчеркивают влияние включения тяжелых изображений и скриптов. Их также легко донести до дизайнеров и разработчиков.
Мы уже упоминали несколько вещей, которые вы можете включить в бюджет производительности, такие как вес страницы и количество HTTP-запросов, но вы можете разделить их на более детальные ограничения, например:
- Максимальный размер изображений
- Максимальное количество веб-шрифтов
- Максимальный размер скриптов, включая фреймворки
- Общее количество внешних ресурсов, таких как сторонние скрипты
Однако эти цифры мало что говорят о пользовательском опыте. Две страницы с одинаковым количеством запросов или одинаковым весом могут отображаться по-разному в зависимости от порядка, в котором запрашиваются ресурсы. Если критический ресурс , такой как главное изображение или таблица стилей на одной из страниц, загружается поздно в процессе, пользователи будут дольше ждать, чтобы увидеть что-то полезное, и воспринимать страницу как более медленную. Если на другой странице наиболее важные части загружаются быстро, они могут даже не заметить этого, если остальная часть страницы этого не сделает.
![Изображение прогрессивного рендеринга страницы на основе критического пути](https://web.dev/static/articles/performance-budgets-101/image/image-progressive-page-r-1526eddb291cd.png?authuser=9&hl=ru)
Вот почему важно отслеживать другой тип показателей.
Сроки проведения этапов ⏱️
Тайминги Milestone отмечают события, которые происходят во время загрузки страницы, такие как DOMContentLoaded или событие загрузки . Наиболее полезные тайминги — это показатели производительности, ориентированные на пользователя , которые говорят вам что-то об опыте загрузки страницы. Эти показатели доступны через API браузера и как часть отчетов Lighthouse .
First Contentful Paint (FCP) измеряет, когда браузер отображает первый бит контента из DOM, например текст или изображения.
Время взаимодействия (TTI) измеряет, сколько времени требуется странице, чтобы стать полностью интерактивной и надежно реагировать на ввод пользователя. Это очень важный показатель, который нужно отслеживать, ожидаете ли вы какого-либо взаимодействия с пользователем на странице, такого как нажатие ссылок, кнопок, ввод текста или использование элементов формы.
Метрики на основе правил 💯
Lighthouse и WebPageTest рассчитывают показатели производительности на основе общих правил передовой практики, которые вы можете использовать в качестве рекомендаций. В качестве бонуса Lighthouse также предлагает вам подсказки по простой оптимизации.
Вы получите наилучшие результаты, если будете отслеживать сочетание показателей производительности, основанных на количестве и ориентированных на пользователя. Сосредоточьтесь на размерах активов на ранних этапах проекта и начните отслеживать FCP и TTI как можно скорее.
Установите базовый уровень
Единственный способ действительно узнать, что лучше всего подходит для вашего сайта, — это попробовать это — провести исследование, а затем проверить свои выводы. Проанализируйте конкурентов, чтобы увидеть, как вы себя чувствуете. 🕵️
Если у вас нет на это времени, вот хорошие цифры по умолчанию, которые помогут вам начать:
- Время до интерактивного взаимодействия менее 5 секунд
- Менее 170 КБ ресурсов критического пути (сжатых/минимифицированных)
Эти цифры рассчитаны на основе реальных базовых устройств и скорости сети 3G . Сегодня более половины интернет-трафика приходится на мобильные сети, поэтому в качестве отправной точки следует использовать скорость сети 3G.
Примеры бюджетов
У вас должен быть бюджет для разных типов страниц вашего сайта, поскольку их содержание будет различаться. Например:
- На странице нашего продукта должно быть менее 170 КБ JavaScript на мобильных устройствах.
- Наша страница поиска должна содержать менее 2 МБ изображений на рабочем столе.
- Наша домашняя страница должна загрузиться и стать интерактивной менее чем за 5 секунд при медленном 3G-соединении на телефоне Moto G4.
- Наш блог должен набрать > 80 баллов по результатам аудита производительности Lighthouse.
Добавьте бюджеты производительности в процесс сборки
Выбор инструмента для этого будет во многом зависеть от масштаба вашего проекта и ресурсов, которые вы можете посвятить этой задаче. Есть несколько инструментов с открытым исходным кодом, которые помогут вам добавить бюджетирование в процесс сборки:
Если что-то превышает определенный порог, вы можете:
- Оптимизируйте существующую функцию или актив 🛠️
- Удалите существующую функцию или актив 🗑️
- Не добавлять новую функцию или актив ✋⛔
Отслеживание производительности
Чтобы убедиться, что ваш сайт достаточно быстр, вам придется продолжать измерения после первого запуска. Мониторинг этих показателей с течением времени и получение данных от реальных пользователей покажет вам, как изменения в производительности влияют на ключевые бизнес-показатели.
Заворачивать
Цель бюджета производительности — убедиться, что вы сосредоточены на производительности на протяжении всего проекта, а его заблаговременное определение поможет предотвратить откат в дальнейшем. Это должно стать отправной точкой, которая поможет вам понять, что включить на свой веб-сайт. Основная идея — поставить цели так, чтобы вы могли лучше сбалансировать производительность, не нанося вреда функциональности или пользовательскому опыту.🎯
Следующее руководство поможет вам определить свой первый бюджет производительности за несколько простых шагов.