Производительность является важной частью пользовательского опыта и влияет на бизнес-показатели . Соблазнительно думать, что если вы хороший разработчик, то в итоге получите эффективный сайт, но правда в том, что хорошая производительность редко является побочным эффектом. Как и в большинстве других вещей, чтобы достичь цели, вам необходимо четко ее определить. Начните путь с установки бюджета производительности .
Определение
Бюджет производительности — это набор ограничений, налагаемых на показатели, влияющие на производительность сайта. Это может быть общий размер страницы, время, необходимое для загрузки в мобильной сети, или даже количество отправленных HTTP-запросов. Определение бюджета помогает начать разговор о веб-производительности. Он служит отправной точкой для принятия решений о дизайне, технологиях и добавлении функций.
Наличие бюджета позволяет дизайнерам подумать об эффектах изображений с высоким разрешением и количестве веб-шрифтов, которые они выбирают. Это также помогает разработчикам сравнивать различные подходы к решению проблемы и оценивать платформы и библиотеки на основе их размера и стоимости анализа .
Выберите показатели
Количественные показатели ⚖️
Эти показатели полезны на ранних стадиях разработки, поскольку они подчеркивают влияние включения тяжелых изображений и скриптов. Их также легко донести до дизайнеров и разработчиков.
Мы уже упоминали несколько вещей, которые вы можете включить в бюджет производительности, такие как вес страницы и количество HTTP-запросов, но вы можете разделить их на более детальные ограничения, например:
- Максимальный размер изображений
- Максимальное количество веб-шрифтов
- Максимальный размер скриптов, включая фреймворки
- Общее количество внешних ресурсов, таких как сторонние скрипты
Однако эти цифры мало что говорят о пользовательском опыте. Две страницы с одинаковым количеством запросов или одинаковым весом могут отображаться по-разному в зависимости от порядка, в котором запрашиваются ресурсы. Если критический ресурс , такой как главное изображение или таблица стилей на одной из страниц, загружается поздно в процессе, пользователи будут дольше ждать, чтобы увидеть что-то полезное, и воспринимать страницу как более медленную. Если на другой странице наиболее важные части загружаются быстро, они могут даже не заметить этого, если остальная часть страницы этого не сделает.
Вот почему важно отслеживать другой тип показателей.
Сроки проведения этапов ⏱️
Тайминги 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.
Добавьте бюджеты производительности в процесс сборки
Выбор инструмента для этого будет во многом зависеть от масштаба вашего проекта и ресурсов, которые вы можете посвятить этой задаче. Есть несколько инструментов с открытым исходным кодом, которые помогут вам добавить бюджетирование в процесс сборки:
Если что-то превышает определенный порог, вы можете:
- Оптимизируйте существующую функцию или актив 🛠️
- Удалите существующую функцию или актив 🗑️
- Не добавлять новую функцию или актив ✋⛔
Отслеживание производительности
Чтобы убедиться, что ваш сайт достаточно быстр, вам придется продолжать измерения после первого запуска. Мониторинг этих показателей с течением времени и получение данных от реальных пользователей покажет вам, как изменения в производительности влияют на ключевые бизнес-показатели.
Заворачивать
Цель бюджета производительности — убедиться, что вы сосредоточены на производительности на протяжении всего проекта, а его заблаговременное определение поможет предотвратить откат в дальнейшем. Это должно стать отправной точкой, которая поможет вам понять, что включить на свой веб-сайт. Основная идея — поставить цели так, чтобы вы могли лучше сбалансировать производительность, не нанося вреда функциональности или пользовательскому опыту.🎯
Следующее руководство поможет вам определить свой первый бюджет производительности за несколько простых шагов.