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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изначальный выбор Битрикса не дал набрать в 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).

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

Мобильные

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