Кейс: поднятие pagespeed для сайта на 1С-Битрикс CMS до 90+ баллов (зелёная зона)
Чудес не бывает, но еще одно всё же случилось! Рассказываю о том, как удалось разогнать показатели производительности, специальных возможностей и рекомендаций до зелёной зоны.
Как известно, гугл при ранжировании учитывает в том числе и техническую сторону сайтов - скорость загрузки, которую можно замерить, например, с помощью lighthouse в dev tools гугл хрома или pagespeed insight. Поэтому важно этому уделять пристальное внимание для SEO-продвижения. Итак:
У нас имеется сайт-пациент
Интернет-магазин, собранный на CMS 1C-Битрикс. Чистая вёрстка с html, css, js без фреймворков.
Проблема. Диагностика скорости
Сайт долго грузится и на мобильных и на ПК. Скорость загрузки главной страницы около 10 секунд - критически медленно.
На входе имелась КРАСНАЯ зона производительности - всего 49 баллов набирал сайт на мобильных устройствах. Специальные возможности и рекомендации были в жёлтой зоне на ПК и мобильных.
Результат после моих правок
Сайт загружается шустро, в использовании быстрый, а pagespeed insight в зелёной зоне.
Скорость загрузки менее 3 секунд по разным замерам в разное время.
Что было сделано: 11 ключевых оптимизаций
✔️ Обновление 1С-Битрикс до актуальной версии (это дало устранение уязвимостей и оптимизацию работы)
✔️ Поправлена ошибка соединения с БД - это рекомендация самого 1с-битрикса
✔️ Конвертация всех изображений из png и jpg в webp
✔️ Тяжёлые картинки сжаты по весу до 200 кб без видимого потери качества
✔️ Почищен неиспользуемый код css и js
✔️ Подключение одного из файлов css перенесено в <head> (а было перед </body>)
✔️ Задан атрибут fetchpriority="hight" для баннера на первом экране
✔️ Для картинок задан атрибут loading="lazy"
✔️ Подключение файлов js перенесено вниз перед </body> с атрибутом defer
✔️ Для Яндекс Метрики добавлена отложенная загрузка (чтобы не блокировала рендеринг)
✔️ Сторонний скрипт, подключенный для коллтрекинга, работает теперь с отложенной загрузкой
Вот и все секреты получения зелёной зоны! Быстрый сайт удобен и приятен в использовании, а еще задерживает пользователей подольше : )
🤝Нужно улучшить загрузку сайта?
Свяжитесь со мной, обсудим ваш проект! Мой телеграм для связи - @naweba. (можно писать в личные сообщения канала - иконка слева внизу)
Подпишись на меня @naweba. Рассказываю про web, фронтенд и про всё, что связано с сайтами!
Рассказываю про поднятие показателей pagespeed в своём блоге (тык)
✅А здесь собрана вся серия постов - перейти (тык)