Изображения — самый «тяжелый» контент, их загрузка всегда занимает гораздо больше времени, чем код всего остального сайта. Поэтому оптимизация графики даёт самый заметный прирост к скорости загрузки.
Большой размер фотографий — это особая проблема для мобильных устройств, т.к. скорость мобильного интернета часто гораздо ниже проводного.
Для нашего клиента был проведен первичный аудит, с помощью популярного сервиса 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 МБ
![Начальный размер.png Начальный размер.png](/upload/medialibrary/fcd/fcd8f07006032b102050983fc7f0b58e.png)
После первой обработки размер всех изображений составил 12,0 МБ
![После первой обработки.png После первой обработки.png](/upload/medialibrary/e66/e66b93fe76912fe8c6aed9ee36539960.png)
После этого почистили страницу от ненужных или устаревших изображений (скрытые устаревшие блоки, неактуальные всплывающие окна и т.д.). Для каждого изображения подобрали разный максимальный размер и качество. Так изображения в главном слайдере стали качеством лучше, чем фоновые полупрозрачные изображения.
Итоговый вес изображений составил 10,5 МБ, а максимальный размер изображения 289,45 КБ.
![Итоговый вес.png Итоговый вес.png](/upload/medialibrary/5f0/5f02258cb89c81bbf60b3124cefa2ae1.png)
Этап 2. Настройка отображения изображений в формате webp.
Для всех браузеров, которые поддерживают новый формат нужно отдавать изображения в webp, для остальных — стандартные форматы.
Был подобран, установлен и настроен бесплатный модуль с конвертацией изображений в формат webp.
Эффект от проведенных работ
Не пройденные аудиты Google PageSpeed Insights до проведения работ по оптимизации изображений:
![Эффект работ.png Эффект работ.png](/upload/medialibrary/4bf/4bf5447cca467fe8c46c1009b938675c.png)
Ошибка снялась, в аудите остались только изображения формата svg:
![Оптимизация.png Оптимизация.png](/upload/medialibrary/79a/79afb37b626d4568691ebb7dd129fc2c.png)
В общей сложности, вместе с работами по оптимизации программной части оценка повысилась с 11 баллов:
![Оптимизация программной части.png Оптимизация программной части.png](/upload/medialibrary/aa0/aa034ce9ba10b3584bdd82a43d560a83.png)
До 51 балла для мобильных устройств:
![Для мобильной версии.png Для мобильной версии.png](/upload/medialibrary/5ae/5aec3afb20b55452d62e724c951ba68c.png)