Карточки в каталоге показывают фото размером 300 пикселей, а скачивают 4000
Каталог выводит товары карточками шириной около 300 CSS-пикселей. Изображения загружаются в оригинале — 4000×4000, по 2–3 МБ. На мобильном интернете страница категории весит 60 МБ.
Что даст основной выигрыш?
- Готовить несколько размеров и отдавать подходящий через srcset и sizes
- Уменьшать картинки через CSS width: 300px
- Включить сжатие gzip для изображений на сервере
- Грузить все картинки сразу при загрузке страницы, чтобы потом не ждать