Задача
Сделать измерение скорости работы сайта на 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-х раз.
ВСЕ стили должны подключаться только ниже.
Сделать измерение скорости работы сайта на 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-х раз.
ВСЕ стили должны подключаться только ниже.