Производительность сайта напрямую влияет на скорость его загрузки. А она, в свою очередь, формирует пользовательский опыт. Чем дольше происходит загрузка страницы, тем меньше шансов, что человек получит необходимые ему данные. Каждая секунда ожидания увеличивает число отказов. И это, в том числе, влияет на ранжирование страницы поисковыми системами. Поисковики настроены таким образом, чтобы угождать пользователям. Соответственно, им не выгодно предлагать на высоких позициях страницы с низкой скоростью загрузки. Всё это складывается в потери и пользовательские, и как результат — финансовые.
В сети интернет огромное количество действительно скоростных сайтов. При этом, визуально для пользователя они выглядят объёмными, структурированными и «тяжёлыми». Всё дело в правильно проведённых настройках. Специалисты SEO-HI акцентируют внимание, что сейчас сайт — это не просто источник получения информации. Интернет-ресурс должен быть полноценным инструментом маркетинга. И чтобы этого достигнуть, настройки должны осуществляться не поверхностно. Не достаточно просто разработать стильный дизайн, наполнить уникальным контентом. Нужно создать такие условия, чтобы пользовательский опыт был максимально положительным. И в первую очередь — это скорость загрузки и ошибки во внутренней начинке, которые определяют поисковые системы.
Для увеличения скорости загрузки необходимо разработать глобальную стратегию, согласно которой создаётся внутренняя начинка сайта. Это не о красивых картинках или текстах, а о скриптах и кодах. Одна из задач веб-разработчика определить оптимальный бюджет производительности. Достигается это в том числе и за счёт сохранения низкого количества запросов (не пользовательских, а системных) и небольшого размера файлов. Как и за счёт чего этого можно достигнуть, рассмотрим в данном материале.
Бюджет производительности. Что это и для чего
Настройка бюджета производительности — всегда вторичный этап работы со страницей. Он осуществляется после проведения всех необходимых работ по повышению этой самой производительности и требуется для того, чтобы она не снижалась с течением времени. Сайт — это живой организм в котором постоянно происходят изменения.
Для того, чтобы проверить каков ваш реальный бюджет производительности, что равно затратам на производительность, модно воспользоваться средствами Lighthouse. Для этого, необходимо перейти в раздел «Сохранять запросы». В нём учитывается низкий размер и реальный размер файла. В небольшом аудите указывается общее количество запросов и размер передаваемых сценариев, изображений и прочее.
В этом же инструменте можно определить критичный бюджет файла, чтобы наложить явные ограничения на некоторые или все типы ресурсов. После определения файла бюджета, в новом столбце « Бюджет» будет указано, превышает любой из ресурсов заданные ограничения.
Как настроить данные бюджета производительности
В отношении бюджета производительности, Lighthouse является не инструментом работы, а средством мониторинга. После проведения всех необходимых настроек, он будет осуществлять контроль и отправлять отчёты о превышении бюджета. Данная возможность предоставляется исключительно при запуске Lighthouse из командной строки.
Файл бюджета необходимо сформировать. По умолчанию он будет носить название budget.json, но для собственного удобства его можно переименовать как угодно. После этого, требуется задать значения бюджета файлов. К примеру, они будут иметь следующие показатели:
• Скрипты — 300 килобайт
• Изображения — 100 килобайт
• Сторонние ресурсы — 200 килобайт
• Общий бюджет — 1000 килобайт
• Сетевые запросы на внешние ресурсы — 10
• Общие сетевые запросы — 50
В кодовом формате, который создаёт веб-разработчик, данные будут отображены примерно следующим образом:
[
{ «resourceSizes»: [
{
«resourceType»: «script»,
«budget»: 300
},
{
«resourceType»: «image»,
«budget»: 100
},
{
«resourceType»: «third-party»,
«budget»: 200
},
{
«resourceType»: «total»,
«budget»: 1000
}
],
«resourceCounts»: [
{
«resourceType»: «third-party»,
«budget»: 10
},
{
«resourceType»: «total»,
«budget»: 50
}
]
}
]
Стоит учитывать, что при установке бюджета resourceSizes, то указывается максимальный общий размер для всех ресурсов, которые находятся в данной конкретной категории. К примеру, в представленном выше коде, бюджет ресурсов script составляет 300 килобайт. Таким образом получается, что если main.js знимает 200 килобайт, а ads.js — ещё 150 килобайт, то бюджет превышен на 50 килобайт.
Иные возможности доступа к бюджету производительности и его рассчёту
Бюджет производительности, при запуске Lighthouse из командной строки, можно задать как флажок: —budget-path (или —budgetPath. После этого, указывается путь к файлу бюджета и можно рассчитать, когда данная категория его превысит. К примеру:
Для того, чтобы не просто передать и рассчитать бюджет производительности, но и сохранитьрезультаты отчета в формате JSON в текущем рабочем каталоге, потребуется задать в настройках —output=json, а затем —output-path=report.json. И в данном случае, это будет иметь приблизительно следующий вид:
Если воспользоваться опцией и присвоить результаты отчета JSON переменной с именем report, то появляется возможность получить доступ к данным «Сохранить количество запросов и размеры файлов малого размера» report.audits[‘resource-summary’] и «Бюджеты производительности» из report.audits[‘performance-budget’].
Чтобы не превышать настройки бюджетов по всем категориям, из которых и состоит начинка сайта, необходимо провести поэтапные настройки каждой из них. Например — включить сжатие текста, проработать структуру DOM, разделить JavaScript, удалить неиспользуемые коды, минимизировать CSS, заменить GIF-изображения на видеоформат и прочее. Работа требуется с каждым элементом в отдельности и проводится поэтапно. Невозможно провести универсальную настройку — она не будет эффективной и не принесёт пользу сайту.
