Когда вы устанавливаете личный, деловой или семейный бюджет, вы устанавливаете предел своих расходов и следите за тем, чтобы оставаться в его пределах. Бюджеты производительности работают таким же образом, но для показателей, влияющих на производительность веб-сайта.
Установив и соблюдая бюджет производительности, вы можете быть уверены, что ваш сайт будет отображаться как можно быстрее. Это обеспечит лучший опыт для ваших посетителей и положительно повлияет на бизнес-показатели.
Вот как определить свой первый бюджет производительности, выполнив несколько простых шагов.
Предварительный анализ
Если вы пытаетесь улучшить производительность существующего сайта, начните с определения наиболее важных страниц. Например, это могут быть страницы с наибольшим объемом пользовательского трафика или целевая страница продукта.
После того, как вы определили свои ключевые страницы, пришло время их проанализировать. Во-первых, мы сосредоточимся на временных вехах, которые лучше всего измеряют пользовательский опыт.
На панели «Аудит» в Chrome DevTools вы найдете Lighthouse . Запустите аудит на каждой странице в гостевом окне , чтобы записать эти два раза:
В качестве примера возьмем узкоспециализированную поисковую систему Doggos.com. Doggos.com стремится индексировать все, что связано с собаками, в Интернете, и его наиболее важными страницами являются домашняя страница и страницы результатов. Вот значения FCP и TTI, измеренные для сайта на настольных компьютерах и мобильных устройствах.
| Рабочий стол | ФКП | ТТИ |
|---|---|---|
| Домашняя страница | 1680 мс | 5550 мс |
| Страница результатов | 2060 мс | 6690 мс |
| мобильный | ФКП | ТТИ |
|---|---|---|
| Домашняя страница | 1800 мс | 6150 мс |
| Страница результатов | 1100 мс | 7870 мс |
Конкурентный анализ
После того, как вы проанализировали свой собственный сайт, пришло время проанализировать сайты ваших конкурентов. Сравнение результатов с веб-сайтов, похожих на ваш, — отличный способ определить бюджет производительности. Независимо от того, работаете ли вы над уже существующим проектом или начинаете с нуля, это важный шаг. Вы получаете конкурентное преимущество, когда вы быстрее своих конкурентов.
Если вы не уверены, какие сайты посмотреть, вот несколько инструментов, которые стоит попробовать:
- Ключевое слово "похожие:" в поиске Google
- Похожие сайты Alexa
- ПохожиеWeb
Для реалистичной картины постарайтесь найти около 10 конкурентов .
Бюджет для временных этапов
У нашей нишевой поисковой системы в этом примере есть несколько конкурентов, и мы сосредоточимся на оптимизации домашней страницы для мобильных устройств. Сегодня более половины интернет-трафика приходится на мобильные сети, и использование мобильных номеров по умолчанию принесет пользу не только вашим мобильным пользователям, но и пользователям настольных компьютеров.
Создайте диаграмму со временем FCP и TTI для всех похожих веб-сайтов и выделите самый быстрый из группы. Подобная диаграмма дает вам более четкое представление о том, как работает ваш сайт по сравнению с конкурентами.
| Сайт/домашняя страница | ФКП | ТТИ |
|---|---|---|
| Goggles.com | 880 мс | 3150 мс |
| Doggos.com | 1800 мс | 6500 мс |
| quackquackgo.com | 2680 мс | 4740 мс |
| ding.xyz | 2420 мс | 7040 мс |
Есть возможности для улучшения, и хорошим ориентиром для этого является правило 20% . Исследования показывают, что пользователи замечают разницу во времени отклика, когда она превышает 20%. Это означает, что если вы хотите быть заметно лучше, чем лучший сопоставимый сайт, вы должны работать как минимум на 20% быстрее .
| Мера | Текущее время | Бюджет (на 20% быстрее, чем у конкурентов) |
|---|---|---|
| ФКП | 1800 мс | 704 мс |
| ТТИ | 6500 мс | 2520 мс |
Если вы пытаетесь оптимизировать существующий сайт, эта цель может показаться недостижимой. Это не знак, что вам следует сдаваться. Начните с небольших шагов и установите бюджет на 20 % быстрее текущей скорости. Продолжайте оптимизировать оттуда.
Для Doggos.com пересмотренный бюджет может выглядеть следующим образом.
| Мера | Текущее время | Первоначальный бюджет (на 20 % быстрее, чем сейчас) | Долгосрочная цель (на 20 % быстрее, чем у конкурентов) |
|---|---|---|---|
| ФКП | 1800 мс | 1440 мс | 704 мс |
| ТТИ | 6500 мс | 5200 мс | 2520 мс |
Комбинируйте разные показатели
Надежный бюджет производительности сочетает в себе различные типы показателей. Мы уже определили бюджет для этапов, а теперь добавим к ним еще два:
- количественные показатели
- метрики на основе правил
Бюджет для количественных показателей
Какой бы общий вес страницы вы ни получили, постарайтесь предоставить менее 170 КБ ресурсов критического пути (сжатых/минимифицированных). Это гарантирует, что ваш сайт будет работать быстро даже на недорогих устройствах и при медленном 3G .
Вы можете иметь больший бюджет для настольного компьютера, но не сходите с ума. Согласно данным HTTP-архива за последний год, средний вес страницы как на настольных, так и на мобильных устройствах превышает 1 МБ. Чтобы получить эффективный веб-сайт, вам нужно стремиться значительно ниже этих средних цифр.
Вот несколько примеров, основанных на бюджетах TTI:
| Сеть | Устройство | JS | Изображений | CSS | HTML | Шрифты | Общий | Время интерактивного бюджета |
|---|---|---|---|---|---|---|---|---|
| Медленный 3G | Мото G4 | 100 | 30 | 10 | 10 | 20 | ~170 КБ | 5 с |
| Медленный 4G | Мото G4 | 200 | 50 | 35 | 30 | 30 | ~345 КБ | 3 с |
| Wi-Fi | Рабочий стол | 300 | 250 | 50 | 50 | 100 | ~750 КБ | 2 с |
Определение бюджета на основе количественных показателей — непростое дело. Веб-сайт электронной коммерции с множеством фотографий продуктов сильно отличается от новостного портала, который в основном состоит из текста. Если на вашем сайте есть реклама или аналитика, это увеличивает объем отправляемого вами JavaScript.
Используйте приведенную выше таблицу в качестве отправной точки и корректируйте ее в зависимости от типа контента, с которым вы работаете. Определите, что будут включать ваши страницы, просмотрите свои исследования и сделайте обоснованное предположение для отдельных размеров активов. Например, если вы создаете веб-сайт с большим количеством изображений, установите более строгие ограничения на размер JS.
Как только у вас появится работающий веб-сайт, проверьте, как у вас дела с показателями производительности, ориентированными на пользователя, и скорректируйте свой бюджет.
Бюджет для показателей на основе правил
Очень эффективными показателями, основанными на правилах, являются оценки Lighthouse . Lighthouse оценивает ваше приложение по 5 категориям, одна из которых — производительность. Оценки производительности рассчитываются на основе 5 различных показателей , включая первую отрисовку контента и время взаимодействия.
Когда вы попытаетесь создать отличный сайт, установите бюджет показателя производительности Lighthouse как минимум на 85 (из 100) . Используйте Lighthouse CI , чтобы обеспечить его соблюдение в запросах на включение.
Расставлять приоритеты
Спросите себя, какой уровень взаимодействия вы ожидаете на своем сайте. Если это новостной веб-сайт, основная цель пользователей — читать контент, поэтому вам следует сосредоточиться на быстром рендеринге и поддержании низкого уровня FCP. Посетители Doggos.com хотят как можно скорее перейти по соответствующим ссылкам, поэтому главным приоритетом является низкий TTI.
Узнайте, какая именно часть вашей аудитории просматривает контент на настольных компьютерах, а не на мобильных устройствах, и расставьте приоритеты соответственно. Один из способов выяснить это — проверить, что ваша аудитория делает на веб-сайтах конкурентов, с помощью панели отчетов Chrome User Experience .
Следующие шаги
Убедитесь, что ваш бюджет производительности соблюдается на протяжении всего проекта, и включите его в процесс сборки.