Ваш первый бюджет производительности

Когда вы устанавливаете личный, деловой или семейный бюджет, вы устанавливаете предел своих расходов и следите за тем, чтобы оставаться в его пределах. Бюджеты производительности работают таким же образом, но для показателей, влияющих на производительность веб-сайта.

Установив и соблюдая бюджет производительности, вы можете быть уверены, что ваш сайт будет отображаться как можно быстрее. Это обеспечит лучший опыт для ваших посетителей и положительно повлияет на бизнес-показатели.

Вот как определить свой первый бюджет производительности, выполнив несколько простых шагов.

Если вы пытаетесь улучшить производительность существующего сайта, начните с определения наиболее важных страниц. Например, это могут быть страницы с наибольшим объемом пользовательского трафика или целевая страница продукта.

После того, как вы определили свои ключевые страницы, пришло время их проанализировать. Во-первых, мы сосредоточимся на временных вехах, которые лучше всего измеряют пользовательский опыт.

На панели «Аудит» в Chrome DevTools вы найдете Lighthouse . Запустите аудит на каждой странице в гостевом окне , чтобы записать эти два раза:

Панель «Маяк» в Chrome DevTools

В качестве примера возьмем узкоспециализированную поисковую систему Doggos.com. Doggos.com стремится индексировать все, что связано с собаками, в Интернете, и его наиболее важными страницами являются домашняя страница и страницы результатов. Вот значения FCP и TTI, измеренные для сайта на настольных компьютерах и мобильных устройствах.

Рабочий стол ФКП ТТИ
Домашняя страница 1680 мс 5550 мс
Страница результатов 2060 мс 6690 мс
Настольный анализ Doggos.com
мобильный ФКП ТТИ
Домашняя страница 1800 мс 6150 мс
Страница результатов 1100 мс 7870 мс
Мобильный анализ Doggos.com

Конкурентный анализ

После того, как вы проанализировали свой собственный сайт, пришло время проанализировать сайты ваших конкурентов. Сравнение результатов с веб-сайтов, похожих на ваш, — отличный способ определить бюджет производительности. Независимо от того, работаете ли вы над уже существующим проектом или начинаете с нуля, это важный шаг. Вы получаете конкурентное преимущество, когда вы быстрее своих конкурентов.

Если вы не уверены, какие сайты посмотреть, вот несколько инструментов, которые стоит попробовать:

  1. Ключевое слово "похожие:" в поиске Google
  2. Похожие сайты Alexa
  3. ПохожиеWeb

Снимок экрана поиска Google с соответствующим ключевым словом

Для реалистичной картины постарайтесь найти около 10 конкурентов .

Бюджет для временных этапов

У нашей нишевой поисковой системы в этом примере есть несколько конкурентов, и мы сосредоточимся на оптимизации домашней страницы для мобильных устройств. Сегодня более половины интернет-трафика приходится на мобильные сети, и использование мобильных номеров по умолчанию принесет пользу не только вашим мобильным пользователям, но и пользователям настольных компьютеров.

Создайте диаграмму со временем FCP и TTI для всех похожих веб-сайтов и выделите самый быстрый из группы. Подобная диаграмма дает вам более четкое представление о том, как работает ваш сайт по сравнению с конкурентами.

Сайт/домашняя страница ФКП ТТИ
Goggles.com 880 мс 3150 мс
Doggos.com 1800 мс 6500 мс
quackquackgo.com 2680 мс 4740 мс
ding.xyz 2420 мс 7040 мс
Конкурентный анализ Doggos.com в сети 3G
Догго за компьютером
У Doggos.com, похоже, дела идут хорошо по показателю FCP, но он серьезно отстает по TTI.

Есть возможности для улучшения, и хорошим ориентиром для этого является правило 20% . Исследования показывают, что пользователи замечают разницу во времени отклика, когда она превышает 20%. Это означает, что если вы хотите быть заметно лучше, чем лучший сопоставимый сайт, вы должны работать как минимум на 20% быстрее .

Мера Текущее время Бюджет (на 20% быстрее, чем у конкурентов)
ФКП 1800 мс 704 мс
ТТИ 6500 мс 2520 мс
Бюджет производительности, который позволит Doggos.com опередить конкурентов

Если вы пытаетесь оптимизировать существующий сайт, эта цель может показаться недостижимой. Это не знак, что вам следует сдаваться. Начните с небольших шагов и установите бюджет на 20 % быстрее текущей скорости. Продолжайте оптимизировать оттуда.

Для Doggos.com пересмотренный бюджет может выглядеть следующим образом.

Мера Текущее время Первоначальный бюджет (на 20 % быстрее, чем сейчас) Долгосрочная цель (на 20 % быстрее, чем у конкурентов)
ФКП 1800 мс 1440 мс 704 мс
ТТИ 6500 мс 5200 мс 2520 мс
Пересмотренный бюджет производительности Doggos.com

Комбинируйте разные показатели

Надежный бюджет производительности сочетает в себе различные типы показателей. Мы уже определили бюджет для этапов, а теперь добавим к ним еще два:

  • количественные показатели
  • метрики на основе правил

Бюджет для количественных показателей

Какой бы общий вес страницы вы ни получили, постарайтесь предоставить менее 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 .

Данные о распространении устройств из отчета Chrome User Experience.
Данные о распространении устройств из отчета Chrome User Experience.

Следующие шаги

Убедитесь, что ваш бюджет производительности соблюдается на протяжении всего проекта, и включите его в процесс сборки.