Изображения — самый «тяжелый» контент, их загрузка всегда занимает гораздо больше времени, чем код всего остального сайта. Поэтому оптимизация графики даёт самый заметный прирост к скорости загрузки.
Большой размер фотографий — это особая проблема для мобильных устройств, т.к. скорость мобильного интернета часто гораздо ниже проводного.
Для нашего клиента был проведен первичный аудит, с помощью популярного сервиса PageSpeed Insights.
По результатам проверки магазин получил ошибки:
- Используйте современные форматы изображений;
- Настройте подходящий размер изображений;
- Настройте эффективную кодировку изображений.
Варианты решений
Оптимизировать изображения можно несколькими способами:
- Уменьшить качество изображения;
- Использовать новые форматы изображений.
Под «новыми форматами» чаще всего подразумевается формат .webp — формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc. в 2010 году.
В настоящее время этот формат поддерживается большинством браузеров. Исключение составляют Safari, IE, Firefox for Android и несколько других, менее известных браузеров.
Самыми популярными браузерами, среди аудитории нашего клиента были:
- Google Chrome — 23,5%;
- Chrome Mobile — 22%;
- Mobile Safari — 13,8%;
- Яндекс.Браузер — 13,6%;
- Яндекс: мобильное приложение — 7,79%.
Поэтому для достаточно большой аудитории новый формат использовать было можно.
Но допустить отсутствия картинок даже на менее известных браузерах нельзя.
Поэтому было принято решение работать в 2 этапа:
- Уменьшить трафик за счет сжатия изображений стандартных форматов jpeg,png и т.д.;
- Настроить отображения изображений в формате webp.
Особенности реализации
Сайт клиента развернут на CMS Битрикс лицензия «Старт».
Этап 1. Изображения на главной странице обработали программным методом, который при изменении картинок создает и хранит изображение заданного размера и качества. На оригиналы картинок, если они загружены в административной части метод никак не влияет: за счет этого можно было попробовать много разных вариантов и остановиться на подходящем.
Начальный размер всех изображений — 17,2 МБ
После первой обработки размер всех изображений составил 12,0 МБ
После этого почистили страницу от ненужных или устаревших изображений (скрытые устаревшие блоки, неактуальные всплывающие окна и т.д.). Для каждого изображения подобрали разный максимальный размер и качество. Так изображения в главном слайдере стали качеством лучше, чем фоновые полупрозрачные изображения.
Итоговый вес изображений составил 10,5 МБ, а максимальный размер изображения 289,45 КБ.
Этап 2. Настройка отображения изображений в формате webp.
Для всех браузеров, которые поддерживают новый формат нужно отдавать изображения в webp, для остальных — стандартные форматы.
Был подобран, установлен и настроен бесплатный модуль с конвертацией изображений в формат webp.
Эффект от проведенных работ
Не пройденные аудиты Google PageSpeed Insights до проведения работ по оптимизации изображений:
Ошибка снялась, в аудите остались только изображения формата svg:
В общей сложности, вместе с работами по оптимизации программной части оценка повысилась с 11 баллов:
До 51 балла для мобильных устройств:
