Поскольку скорость страницы с годами становится важным показателем как для SEO, так и для UX, концепция бюджет веб-производительности также вышел на первый план. Теперь стало более очевидно, что веб-производительность — это тема, которая требует общей точки зрения всех отделов, а не просто является приоритетом одного отдела или отдельного человека.
Поясним это на примере: отделы маркетинга могут захотеть реализовать конверсию и коды ремаркетинга/ретаргетинга, а также такие инструменты, как Criteo и RTB House, которые используют ретаргетинг на основе продуктов. Они также могут ожидать привлекательных фотографий и анимации. Между тем, продуктовые отделы могут запросить интеграцию таких инструментов, как Хотжар и ясность. С другой стороны, отделы программного обеспечения стремятся как можно быстрее развиваться как на фронтенде, так и на бэкенде. Спрос и затраты, связанные с этими требованиями к скорости страницы, на самом деле находятся в равновесии. Бюджет веб-производительности призван эффективно установить этот баланс.
Бюджет веб-производительности включает в себя установку целевой скорости для вашей платформы на конкретной платформе и установление числовых целей, которых будут придерживаться все заинтересованные стороны для достижения этой скорости. Короче говоря, цена скорости — это бюджет веб-производительности.
Все начинается с предложения. Вы предлагаете, как быстро должна открываться ваша страница при определенном типе соединения. Например, некоторые предложения по бюджету производительности могут быть следующими:
- Может ли главная страница открыться в менее 2 секунд при быстром мобильном соединении 3G (1.6 Мбит/с)?
- Может ли страница результатов поиска открыться в менее 5 секунд при медленном соединении 3G (780 Кбит/с)?
Затем вы создаете план действий и подпоказатели для достижения этих предложений, разбивая его на части.
Помимо предложений, могут быть и другие целевые показатели бюджета производительности. Например:
- Увеличение мобильного Маяка оценка страницы подробностей выше 80
- Уменьшение размера всех изображений на сайте для ПК до размера менее 500 КБ
Показатели бюджета производительности
Существует три различных точки зрения для определения показателей бюджета производительности:
Числовые метрики
- Максимальное количество шрифтов/Максимальный размер шрифта
- Максимальное количество изображений / Максимальный размер изображения
- Максимальное количество скриптов, стилей, видео и т. д. / Максимальный размер скрипта, стиля, видео и т. д.
- Максимальный размер HTML
- Максимальное количество HTTP-запросов
- Максимальное количество сторонних скриптов
Метрики, основанные на времени
- Время первой контентной отрисовки (FCP)
- Наибольшее время отрисовки контента (LCP)
- Время первой входной задержки (FID)
- Время до интерактивного (TTI) времени
- Общее время блокировки (TBT)
- Совокупный балл за изменение макета (CLS)
- Индекс скорости
Метрики на основе правил
- Оценка маяка
- Оценка GTmetrix
- Оценка веб-страницы по тесту
- Оценка Ислоу
При определении бюджета веб-производительности обычно рекомендуется объединить все эти аспекты в нужной мере, а не выбирать только один. Вы можете использовать симулятор бюджета производительности чтобы найти цифры, необходимые для достижения целевой скорости.
Оценивайте типы страниц отдельно
Один из важнейших моментов при определении бюджета производительности — не основывать его на одной странице сайта. Распространенной ошибкой является тестирование только главной страницы, что приводит к неполной оценке.
Вам следует начать с изучения платформы и определения различных типов страниц. Затем проанализируйте трафик платформы, чтобы определить страницы, которые получают больше всего трафика, и расставить их по приоритетам. В результате получится таблица, подобная этой:
- Главная
- Статические страницы с листингом
- Динамические страницы с листингом
- Подробные страницы
- Страницы оформления заказа
- Страницы результатов поиска
- Страницы кампании
- Страницы блога
Вам нужно сосредоточиться на бюджеты производительности этих типов страниц отдельно, исходя из приоритетов.
