Оставить заявку

Ускорение сайта для «Пегас-агро» более чем в 10 раз

Самарский производитель сельскохозяйственной техники «Пегас-агро» в 2020 году сделал новый сайт у одной из самых известных студий России. Сайт получился насыщенным картинками и анимациями, главная страница весила 33 Мб, и загружалась на мобильных с 3G интернетом более трёх минут. Когда перед нами встала задача ускорить этот сайт, мы поначалу засомневались, получится ли добиться приличной скорости открытия. Но затем оценили реализацию и поняли, что можем разогнать этот сайт в разы. Давайте посмотрим, как это получилось.

Введение 

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

В нашем кейсе мы не будем обсуждать дизайн нового сайта, но следует отдать должное — отлично сделано наполнение страниц, что явно предполагало большую работу по сбору информации о производимой продукции и производственным мощностям «Пегас-агро».

Самой большой проблемой нового сайта стала скорость его загрузки. Главная страница сайта загружалась долго ↓

На ПК с интернетом на 100 мегабит страница отдавалась через ≈13 секунд
На ПК с интернетом на 100 мегабит страница отдавалась через ≈13 секунд
На телефонах с 4G интернетом ≈18 секунд
На телефонах с 4G интернетом ≈18 секунд
На телефонах с быстрым 3G интернетом ≈3 минуты
На телефонах с быстрым 3G интернетом ≈3 минуты

Самым печальным была невозможность пользоваться сайтом, пока он полностью не загрузится, всё время загрузки вместо сайта показывался мигающий логотип. Главная страница при этом весила более 33 Мб. 

Прямо сейчас на домене pegas-agro.ru уже находится ускоренный нами сайт, посмотреть зарелиженную «Студией №1» версию сайта можно по адресу 2020.pegas-agro.ru, там же можно проверить скорость загрузки главной страницы.

13 и 18 секунд до загрузки страницы на быстром интернете для ПК и мобил — это очень много. А 3 минуты до загрузки в режиме fast 3G — это уже неприлично много, никто не будет так долго ждать открытия сайта. Учитывая, что значительная часть целевой аудитории сайта — это фермеры, часто живущие вне города с не самым быстрым интернетом, не все дождались открытия сайта ↓

По оценкам от Google PageSpeed Insights у новой версии сайта были следующие оценки по стобальной шкале:

 ≈13 баллов для мобильной версии
≈13 баллов для мобильной версии
 ≈30 баллов для ПК
≈30 баллов для ПК

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

Этапы работы 

Гифки

В первую очередь убрали gif-анимации с главной страницы. 5 файлов анимации занимало 9,7 Мегабайт! Эти же анимации в mp4 формате заняли всего 3,6 Мб. Кроме того, отложили загрузку этих файлов асинхронно, чтобы вся страница не ожидала их загрузки для открытия. Те же огромные гифки грузились для мобильных, мы сделали отдельные видео меньшего размера, по mobile detect раздаём разные версии этих видео для ПК и мобильных. Получились анимации в формате mpeg без потери качества, с лучшей плавностью. Вес анимашек уменьшился в 3 раза для ПК и в 10 раз для мобильных.

Хозяйке на заметку. Не используйте gif-анимацию в веб-вёрстке — это тяжёлый устаревший формат.

Конструктор

Далее поработали над конструктором, собирающим машины на первом экране. Он состоит из 36 картинок, собирающихся в машины.

  • Создали мобильную версию контента конструктора.
  • Сделали разные версии картинок для ПК и мобил, отдаём нужную версию по mobile detect. 
  • Оптимизировали картинки.
  • Оптимизировали загрузчик конструктора.
  • Переделали скрипт, который раньше вешал мигающий лого поверх всего, пока не загрузится весь сайт, на отдельный загрузчик для конструктора.
  • Загрузили контент конструктора в preload для более быстрого отображения первого экрана.

Картинки

В первую очередь сделали resize для всех картинок на странице под мобильные — до этого на телефон отдавались те же огромные картинки, что и для компьютера. Далее

  • Вывели новые картинки для телефонов с помощью mobile detect. 
  • Подружили кэширование Битрикса и mobile detect.
  • Сделали ресайз всех картинок под максимальный возможный размер на десктопе — большая часть была в разрешении большем, чем теоретически возможный размер блока.
  • Добавили нативный lazyload (отложенная загрузка) на картинки во всех компонентах.
  • Сделали асинхронную загрузку фоновых изображений.

Хозяйке на заметку. Для больших картинок и анимаций в вёрстке для ПК делайте дубли меньшего размера и отдавайте их для телефонов.

Другие правки

  • Не отдаём картинки десктопного меню на мобильный.
  • Preload шрифтов и font-display: swap для более быстрой отрисовки первого экрана.
  • Загрузка на сервер скриптов/стилей, которые подгружались с CDN-ок, подключение.
  • Отложенная загрузка сторонних скриптов, не нужных для отрисовки, но блокирующих поток (Метрика, Карты etc).

Битрикс — плохой выбор CMS для этого сайта

Мы часто сталкиваемся с ситуацией, когда разрабатывающая сайт студия создаёт все сайты на одной CMS, всё чаще на Битриксе. При этом часто функционал этого самого Битрикса для сайта не нужен. Ещё до начала программирования сайта на этапе согласования макетов мы задавали разработчикам вопрос, почему для сайта выбрана CMS Битрикс, на что не получили ответа. Ответить на этот вопрос убедительно не так просто — перед нами типичный промо-сайт с минимумом функционала и крошечным каталогом продукции. 

Ранее для подобных решений мы бы предложили ModX — быструю и  простую CMS с удобной админкой, но сейчас она слабо поддерживается. Поэтому рекомендуем использовать фреймворки, например Yii или Laravel — они легко разворачиваются, настраиваются и не перегружают сайт лишним кодом.

Мы с сожалением смотрим за тем, как рынок веб-разработки массово скатывается в Битрикс, внедряя его, где он нужен и нет. Битрикс является нормальным решением при синхронизации каталога товаров на сайте с 1С, а также при синхронизации заявок и диалогов с CRM Битрикс24 (на этом сайте нет каталога и синхронизаций, Б24 не используется), в других случаях его использование чаще всего нецелесообразно. 

Для улучшения безопасности и новых функций Битрикс выпускает обновления, которые нельзя установить, не оплачивая ежегодно лицензию на поддержку. В то время как у opensource-систем обновления связанные с устранением уязвимостей выходят быстро и бесплатно, в Битрикс пользователь не может обновляться, отказавшись от ежегодных оплат, что является потенциальной угрозой безопасности.

Сайты на Битриксе часто используют шаблонные css и js-код, так, например, в Битриксе стандартный джаваскрипт вывода попап-окон занимает более 3000 строк кода. Отказ от использования некоторых стандартных модулей в CMS повышает производительность сайта, делает код более чистым и коротким.

Изначальный выбор Битрикса не дал набрать в Google PageSpeed insights более высокий балл для мобильных, сервис просит удалить избыточные скрипты, стили, сократить dom-дерево — порождения Битрикса и подключенных плагинов ↓

Просьба сервиса удалить избыточные скрипты

Просьба сервиса удалить избыточные скрипты

Итоги работ

При оценке результатов нужно смотреть не на саму оценку сервиса GPSI, а на значения показателей, из которых она складывается: First Contentful Paint (FCP), Speed Index (SI), Largest Contentful Paint (LCP), Time to Interactive (TTI), Total Blocking Time (TBT), Cumulative Layout Shift (CLS).

Проведём замеры показателей до работ и после для ПК и мобильных.

ПК 
  Было, балл GPSI 36 Стало, балл GPSI 92
First Contentful Paint (FCP), с 0,8 0,9
Speed Index (SI), с 10,0 1,1
Largest Contentful Paint (LCP), с 1,8 1,6
Time to Interactive (TTI), с 16,6 1,7
Total Blocking Time (TBT), мс 6830 70
Cumulative Layout Shift (CLS) 0,071 0,006
Было Стало
Было/Стало

Мобильные

  Было, балл GPSI 14 Стало, балл GPSI 22
First Contentful Paint (FCP), с 4,0 4,8
Speed Index (SI), с 38,2 18,5
Largest Contentful Paint (LCP), с 5,1 7,5
Time to Interactive (TTI), с 106,4 7,9
Total Blocking Time (TBT), мс 31290 990
Cumulative Layout Shift (CLS) 0,71 0,001
Было/Стало

Цифры в таблицах выше отлично иллюстрируют, почему не стоит полагаться на общую оценку GPSI. Для мобил она выросла незначительно, с 14 до 22 баллов, при этом Total Blocking Time (время полной блокировки) главной страницы было более 31 секунды, а стало чуть менее одной. Время до возможности взаимодействовать со страницей (TTI) сократилось со 106 секунд до 7,9, то есть речь идет о фактическом ускорении открытия главной страницы сайта на мобильных во много раз.

Чтобы добиться более высоких оценок для мобильных устройств, надо было полностью переверстать css и js, отказаться от битриксовских скриптов, но это слишком радикальные меры — договорились с заказчиком обойтись без них. Кроме того, главная страница объективно очень большая — на ней много графики и контента, Гугл часто сильно занижает оценки подобных страниц на мобильных. Сайт стал загружаться заметно быстрее даже без заглядывания на оценки разных замеряющих сервисов, прекратились жалобы на неоткрывающийся сайт. Заказчик остался довольным проделанной работой, нам тоже понравился результат.

На описанные работы по ускорению сайта pegas-agro.ru было потрачено ≈90 часов.

Нужно увеличить количество заказов с интернета?

Обращайтесь, приведем клиентов с рекламы и SEO сайта

Рекомендуем почитать

Хотите попробовать с нами?

Оставьте заявку или позвоните нам по номеру 8 (800) 775-67-49.

Оставить заявку
след самолета
Нажмите и держите для максимального увеличения