Что означает «Скорость сайта» в Битриксе и как ее улучшить

Как вычисляется показатель «Скорость сайта» в Битриксе

Инструмент использует стандартную функцию любого браузера Navigation Timing API. В браузере есть объект performance с ключом timing, который возвращает временные отметки этапов запроса к странице.

Скоростью сайта считается время между navigationStart и domContentLoaded.

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

Обратите внимание! Так как посетители все время меняются, то и данные меняются вместе с ними!

Технология расчета значения «Скорости сайта» следующая: из 1250 последних хитов вычитаются 250. Это 20% самых медленных хитов, которые не берутся в расчет, чтобы исключить ошибку, связанную с неустойчивыми каналами связи (мобильный интернет, связь в транспорте и т.п.).

Что влияет на показатель «Скорость сайта»

На показатель Скорость сайта влияет несколько факторов:

1. Производительность и настройки сервера (их можно оценить на странице «Монитор производительности»);
2. Скорость Интернета;
3. Местоположение пользователя;
4. Качество разработки сайта;
5. Использование различных технологий, ускоряющих работу сайта;
6. Подключаемые скрипты, которые могут значительно замедлять работу сайта.
7. Содержимое сайта (контент) — изображения, шрифты, иконки. JS и пр.  

Инструмент «Скорость сайта» учитывает все эти параметры и показывает реальную картину работы сайта для пользователей из сети.

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

Показатель «Скорость сайта» выдает 5 уровней скорости загрузки сайта.

Инструмент «Скорость сайта» позволяет сразу же просмотреть, какие именно страницы тормозят сильнее всего. На графике ниже показано время загрузки страниц и их количество. Если подвести курсор к любому столбцу, то можно увидеть 10 самых медленных страниц, которые требуют оптимизации.

Как улучшить показатель «Скорость страниц»

1. Оптимизировать изображения. Картинки — это наиболее тяжеловесная часть контента. Особенно когда их много и когда они не сжаты для веб.

На сегодняшний день основная масса изображений на сайтах представлена в форматах JPEG, GIF и PNG. Это не самые оптимальные форматы. Попробуйте использовать Progressive jpeg. Это заметно снизит нагрузку и позволит ускорить загрузку сайта.

Подробнее о том, что такое Progressive jpeg читайте здесь.

2. Объединение и сжатие JS / CSS. В Битриксе есть встроенная функция по оптимизации скриптов и стилей в настройках Главного модуля. Но нужно с ними быть осторожными и знать, что делаете, потому что иногда использование этого инструмента приводит к конфликтам в коде сайта.

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

3. async и отложенный запуск скриптов. Асинхронная загрузка сторонних JS также помогает ускорить общую загрузку страниц сайта. Но не всегда она справляется.

Например, широко используемые на сайтах всплывающие окна онлайн консультантов (типа Jivosite), загружаются асинхронно, но все равно влияют на общую скорость загрузки сайта.

Однако совершенно не обязательно, чтобы такое окно онлайн консультанта всплывало сразу же. Можно отложить его загрузку на некоторое время. Для этого достаточно в скрипт добавить параметр setTimeout со значением 5000, что отложит его загрузку на 5 секунд. За это время страница сайта успеет загрузиться полностью, что заметно улучшит показатели скорости загрузки.

4. Удаление лишнего кода. Речь идет о неиспользуемых стилях, JS-скриптах и частях HTML-кода, которые могут загружаться, но не использоваться. Например, это встроенные стили темы (блоков, визуальных решений, цветовых схем), которые не применяются на вашем сайте.

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

5. Кэширование. Это еще один из инструментов Битрикса — автокэширование компонентов. Он включен по-умолчанию, но требует грамотной настройки.

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

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

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

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

7. Используйте максимально возможную версию PHP. На PHP 7.3 сайт будет работать быстрее, чем на более низких версиях.

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

Рекомендуем также почитать статью «Что такое оценка Google PageSpeed и как ее улучшить». Этот сервис от Google полезен тем, что дает конкретные рекомендации и показывает, что и где нужно исправить на сайте, чтобы оптимизировать и ускорить его работу.