Кейсы

Измерение скорости работы сайта на cms Битрикс, предложение рекомендаций для повышения скорости сайта

Задача

Сделать измерение скорости работы сайта на cms Битрикс, предложить рекомендации для повышения скорости сайта.

Решение

В рамках проведенных замеров было сделано:

- Выбраны различные сервисы (GTmetrix; Lighthouse в двух вариантах: для десктопа и для мобильного; и из вкладки Network браузерной консоли) для замеров на страницах сайта

- Создана сводная таблица с показателями замеров от всех сервисов

- Проведен анализ показателей, результаты интерпретированы в понятный для клиента формат

Результаты анализа визуализируются в виде цветовой диаграммы: где

красный цвет - низкая скорость загрузки страницы (0-49% от контрольного показателя)

желтый цвет - низкая скорость загрузки страницы (50-89% от контрольного показателя)

зеленый цвет - низкая скорость загрузки страницы (90-100% от контрольного показателя)

Результат

В целом анализируемый сайт получил хорошие показатели скорости.

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

Сформированы рекомендации по увеличению скорости загрузки.

1. Скорость ответа сервера

Хостинг на сервере в Литве (Вильнюс). Это очень нерациональное решение, увеличивающее скорость ответа сервера.

Целевая аудитория сайта находится в СПб, там же должен находиться и дата-центр. Логика очень простая: чем ближе сервер к потребителю, тем быстрее проходит сигнал / передаются данные.

Перенос в питерский дата-центр позволит ускорить ответ сервера для пользователей с любым устройством / размером экрана.

2. Ленивая загрузка картинки на первом экране

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

Это замедляет загрузку первого экрана страницы, что является критичным параметром.

Стоит попробовать убрать load="lazy" в тэге img.

Вообще, надо тестировать это для одной картинки и для всех.

3. Можно немного ускорить загрузку шрифтов

Надо добавить в раздел HEAD в самом верху, обязательно перед любым css код:

<link rel="preload" href="https://fonts.gstatic.com">

или

<link rel="dns-prefetch" href="https://fonts.gstatic.com">

В данном случае вариант с preload обычно даёт лучший результат.

4. Использование @import в файле стиля

Такой подход замедляет загрузку.

Файл стиля:

https://сайт.ru/css/style.min.css?4

Загружаемый шрифт (он в самом начале)

https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap

тут надо просто убрать запись с подключением шрифта через import и сразу подгружать шрифт в разделе HEAD напрямую

можнопопробоватьтакойвариант:

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" as="font" type="font/woff2" crossorigin>

5. Отказ от нестандартных шрифтов

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

Это позволит ускорить загрузку страниц. А все сложности насчет подключения шрифтов окажутся просто ненужными.

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

6. Можно немного ускорить поиск DNS для ресурсов, которые подгружаются с других доменов

Использовать preload, как вариант, в данном случае неоправданно.

Надо добавить в раздел HEAD в самом верху (после загрузки шрифтов) код:

<link rel="dns-prefetch" href="https://www.gstatic.com">

<link rel="dns-prefetch" href="https://www.google.com">

<link rel="dns-prefetch" href="https://www.google-analytics.com">

<link rel="dns-prefetch" href="https://www.googletagmanager.com">

<link rel="dns-prefetch" href="https://mc.yandex.ru">

Стоит провести тесты до и после добавления с каждым ресурсом. Для достоверности результатов измерять надо не менее 3-х раз.

ВСЕ стили должны подключаться только ниже.