Бюджет веб-производительности: как настроить, рассчитать и применить

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

Поскольку требования посетителей растут настолько, что колоссальные 53% из них покинут веб-сайт, который не загружается в течение 3 секунд, владельцы онлайн-бизнеса не могут полагаться только на показатель скорости 90+, чтобы поддерживать рост коэффициентов конверсии.

Введите бюджеты веб-производительности — наиболее недооцененную стратегию для создания успешного веб-сайта.

В следующих строках мы рассмотрим:

• Что такое бюджет веб-производительности?
• Каковы преимущества бюджета веб-производительности?
• Выбор показателей для бюджета эффективности
• Приоритизация показателей для полностью разработанного веб-сайта
• Как настроить бюджет веб-производительности
• Следите за производительностью вашего веб-сайта и соответствующим образом корректируйте бюджеты.

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

Давайте начнем!

Что такое бюджет веб-производительности?

Бюджет веб-производительности — это предварительно определенный набор ограничений, которые ваш веб-сайт должен поддерживать для оптимальной скорости и эффективности. Эти лимиты включают:

• Жесткое ограничение ресурсов
• Цели по общему весу страницы
• Общее количество HTTP-запросов
• Минимальное время загрузки страницы в мобильных сетях
• Пороговые значения для показателей Core Web Vitals (например, LCP)

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

Автоматически улучшайте Core Web Vitals с помощью NitroPack →

Каковы преимущества бюджета веб-производительности?

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

Кроме того, установка лимитов использования веб-ресурса:

• Позволяет вашей команде сравнивать и оценивать технологии, различные подходы, платформы и функции.
• Может использоваться для прогнозирования тенденций в расходовании ресурсов и помощи в лучшем планировании (например, для месяцев, когда вы расходуете свой бюджет намного быстрее, чем обычно).
• Также может указывать на слабые места разработки и дизайна UX (например, поиск альтернатив большим библиотекам или веб-шрифтам).

️ Бюджеты производительности не следует рассматривать как расширяемые, а скорее как «деньги», которые вы тратите и обмениваете на пользовательский опыт. Как и любой другой бюджет, ваша цель — сделать все возможное, чтобы уложиться в пределы, а не полагаться на их увеличение. В долгосрочной перспективе это сэкономит вам больше ресурсов и упростит процесс для лучшего взаимодействия с пользователем.

Но как решить, с чего начать?

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

Выбор показателей для бюджета эффективности

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

Типы метрик, используемых для бюджетирования веб-эффективности:

• Основанный на правилах
• по времени
• на основе количества
• Обычай

1. Метрики на основе правил

Это сводные оценки производительности сайта, которые можно найти во всех популярных инструментах, таких как WebPageTest, Lighthouse и Google PageSpeed ​​Insights.

Ваши общие баллы основаны как на метриках, основанных на времени, так и на метриках, основанных на количестве (мы немного углубимся в детали).

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

2. Метрики, основанные на времени

Также называемые контрольными показателями, они используются для оценки скорости загрузки страницы и того, что именно происходит во время загрузки. В ваших отчетах это показатели производительности пользователей, называемые Core Web Vitals.

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

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

Первая содержательная краска (FCP)
FCP измеряет, сколько времени требуется браузеру для отображения первого бита контента из дерева DOM (то есть изображений, текста и т. д.). Это будет началом загрузки страницы.

Время до интерактивности (TTI)
TTI посвящен измерению того, сколько времени требуется, чтобы страница стала полностью интерактивной и реагировала на действия пользователя.

Это, однако, не означает, что TTI будет удален, например, из вашего отчета об эффективности в Google PageSpeed ​​Insights. Но это явный намек на то, что вы, возможно, захотите подумать о том, стоит ли добавлять этот показатель в свой бюджет.

Самая большая содержательная краска (LCP)
LCP измеряет, сколько времени требуется странице для отображения самого большого элемента текста или изображения. Это отличная метрика для использования в вашем бюджете производительности, поскольку она ориентирована на пользователя и, в конце концов, предпочтительна для Google.

Задержка первого ввода (FID)
FID измеряет время, которое требуется странице, чтобы реагировать на любые действия пользователя, такие как клики по ссылкам, нажатия кнопок и т. д. Он фиксирует, насколько хорошо подготовлена ​​страница для загрузки соответствующих сценариев и информации для ответа на ввод пользователя.

Общее время блокировки (TBT)
Как упоминалось выше, TBT связан с TTI, но в сочетании с LCP дает вам более точную картину того, как пользователи воспринимают ваш сайт. TBT измеряет, как долго ваша веб-страница была заблокирована, что не позволяло пользователю взаимодействовать с ней.

3. Количественный

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

Наиболее распространенные ресурсы, на которые можно установить ограничения, включают:

• Размер языка и стиля (HTML и CSS)
• Размер медиаконтента (изображения, видео)
• Размер шрифта
• Размер скрипта
• Общий вес страницы
• Общее количество HTTP-запросов

Причина, по которой эти показатели более полезны в начале нового проекта, заключается в том, что они помогают командам решить, какое влияние на производительность окажут более тяжелые изображения и сценарии. Однако, если вы боретесь с проблемами скорости сайта, введение нескольких показателей, основанных на количестве, может значительно упростить выбор элементов страницы для удаления (или замены).

4. Пользовательские показатели

Такие команды, как Twitter, установили специальную метрику, например «Время до первого твита». Еще одна распространенная пользовательская метрика — «Время до героя». В зависимости от того, какое взаимодействие является наиболее важным на вашем веб-сайте и насколько оно уникально для вашего бизнеса, вы можете рассмотреть возможность его отслеживания в своем бюджете веб-производительности.

Наберите 90+ очков скорости и преодолейте Core Web Vitals с помощью NitroPack →

Приоритизация показателей для полностью разработанного веб-сайта

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

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

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

Читайте дальше, чтобы узнать, как оценить свое текущее положение, к чему следует стремиться и как улучшить показатели веб-производительности.

Как настроить бюджет веб-производительности

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

1. Изучите своих конкурентов

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

• Поймите, что они делают хорошо
• Определите области, в которых вы можете превзойти их
• Создавайте более реалистичные цели производительности и ограничения бюджета

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

Есть несколько способов найти веб-сайты, похожие на ваш:

• Поиск в Google по родственному:"ключевое слово"
• Используйте такой сервис, как SimilarWeb (бесплатная версия ограничена, но все же удобна для создания начального списка)

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

Запустите целевые страницы (домашняя страница, продукт, функции, блог и т. д.) ваших конкурентов с помощью инструмента расчета производительности, такого как Google PageSpeed ​​Insights.

Затем вы можете захотеть перечислить все значения показателей эффективности ваших конкурентов на диаграмме.

Используя такие инструменты, как WebPageTest и Google PageSpeed ​​Insights, мы построили этот пример диаграммы , показывающий, как BBC сравнивается с The Guarding и Daily Mail на настольных компьютерах:

Если бы Daily Mail провела такое же исследование, им пришлось бы наметить все показатели, связанные со скоростью и количеством, для своего бюджета, чтобы попытаться сократить разрыв в индексе скорости.

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

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

2. Создайте базовый уровень вашей веб-производительности

Чтобы создать надежную контрольную точку, используйте такие инструменты, как WebPageTest и Lighthouse для относительно стабильных измерений. Не забудьте очистить кеш браузера перед тестированием с помощью встроенного инструмента браузера. Используйте расширение Clear Cache для Chrome, чтобы ускорить процесс.

Вам не нужно проводить аудит для всех ваших веб-страниц. Начните с самых важных, которые, как вы знаете (или прогнозируете), привлекут больше всего трафика.

Вот примеры подсказок, которые помогут вам завершить свой список:

• Максимальный размер изображений для загрузки на ваш веб-сайт (до или после сжатия), чтобы поддерживать как можно меньший вес страницы.
• Максимальный общий вес страницы для каждой страницы
• Общее количество разрешенных HTTP-запросов на страницу
• Порог для достижения определенного индекса скорости
• Ограничения на сегментированные скрипты, такие как JavaScript, CSS, веб-шрифты
• Общее время загрузки не более X секунд (или миллисекунд)
• Шрифты Google, локальные шрифты или системные шрифты (узнайте, как их оптимизировать для получения еще лучших результатов)

️ По данным Strategy Analytics 46% от общего числа мобильных пользователей используют 2G или 3G. Обязательно протестируйте свои веб-страницы в более медленных сетях (например, 3G), чтобы получить более реалистичное представление о том, как люди воспринимают ваш сайт.

3. Рассчитайте и установите бюджет эффективности (+ примеры)

В зависимости от типов страниц, которые вы выбрали для бюджетирования по результатам, значения метрик будут различаться.

Вот несколько примеров, с которых вы можете начать:

• Время загрузки страницы менее 3 секунд
• Ресурсы критического пути (сжатые/минимизированные) до 170 КБ
• Оценка маяка> 80

Отличный инструмент, который поможет вам бесплатно настроить свои бюджеты, — это Калькулятор бюджета эффективности. Выберите бюджет на основе активов или CWV, чтобы указать значения показателей, которые вы хотите установить, и загрузить их в формате, готовом для Google Lighthouse.

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

4. Реализуйте бюджет эффективности

Обратите внимание, что этот шаг становится более техническим, и за правильной настройкой лучше обратиться к разработчику.

Google Lighthouse поддерживает бюджеты производительности с помощью функции LightWallet, доступной в версии Lighthouse v5+ для командной строки.

Чтобы создать бюджет, вам нужно открыть файл с именем Budget.json и JSON, следуя этому примеру от DebugBear:

[
{
"тайминги": [
{
"метрика": "первая содержательная краска",
"бюджет": 1500
},
{
"метрика": "наибольшая содержательная краска",
"бюджет": 5000
}
],
"ресурсСизес": [
{
"тип ресурса": "всего",
"бюджет": 2000 г.
}
],
"счетчиков ресурсов": [
{
"тип ресурса": "шрифт",
"бюджет": 5
},
{
"тип ресурса": "всего",
"бюджет": 100
}
]
}
]

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

Запустите Маяк, чтобы пройти в бюджете. После этого вы сможете увидеть значения для каждой из метрик, для которых вы установили бюджет, в нижней части раздела «Производительность Lighthouse». Вы будете получать уведомления, если какой-либо из порогов бюджета будет превышен.

Чтобы добавить бюджетирование веб-производительности в процесс сборки, вы можете воспользоваться несколькими инструментами с открытым исходным кодом:

• Webpack (функции производительности)
• Размер пакета
• Маяк КИ

Следите за производительностью вашего веб-сайта и соответствующим образом корректируйте бюджеты.

Мы не можем не подчеркнуть, насколько важно пересматривать свои отчеты об эффективности не реже одного раза в месяц (или всякий раз, когда вы получаете уведомление о превышении пороговых значений).

Чтобы убедиться, что вы не выходите за рамки бюджета и никогда не жертвуете удобством для пользователей, вы можете:

• Оптимизируйте существующую инфраструктуру веб-сайта, функции и решения по разработке
• Удалите (или замените) существующие плагины и функции сайта, которые приносят больше вреда, чем пользы.
• Решите вообще не добавлять новую функцию (или стороннее решение)

️ Помните, что каждая примененная вами оптимизация производительности сайта должна быть зарегистрирована в результатах Core Web Vitals не менее 28 дней.

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

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

• Применить быстрое исправление (т. е. некоторый тип оптимизации ресурсов)
• Вернуться к более раннему этапу новых разработок (т. е. удалить сторонний скрипт, который не является жизненно важным)
• Оставьте все как есть, но запланируйте дальнейшую оптимизацию в другом месте.
• Сделайте компромисс в пользу немного худшей производительности и увеличьте свои бюджеты.

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

Замените как минимум 4 плагина оптимизации на NitroPack — легкое решение с более чем 35 мощными функциями →

Унеси это

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

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