Почти на каждом сайте есть листинги товаров, услуг или чего-то еще.
Там где это с фотками встречается, то бывает капец долго грузится страница.
Некоторые делают отложенную загрузку картинок по JS, но тогда они не индексируются.
На нескольких сайтах нашел одну и ту же ошибку, сейчас покажу ее и расскажу как исправить.
Берем листинг сайта любой, тыкаем на картинку правой кнопкой мышки:
И открываем в новой вкладке.
То есть тут взяли картинку детальную товара, уменьшили ее размеры стилями CSS и закинули в каталог.
Весит картинка 375 Кб.
В среднем на страницах около 20-30 товаров, то есть все картинки весят примерно 9,3 Мб. Это очень внушительная цифра, и это все адски тормозит загрузку страницы.
Что можно сделать:
- Для каждого товара создаем уменьшенную картинку под листинг
- У уменьшенной картинки снижаем качество до адекватного (никто там не будет пристально разглядывать с лупой монитор)
- Ставим обработчик формата WEBP, если браузер пользователя поддерживает этот формат, то подсовываем ему облегченную версию картинки
Какой результат:
Мы на проекте Колеса Даром уменьшили картинки товаров до 7 Кб. Это в 50 раз меньше! И все картинки листинга весят всего 210 Кб (даже меньше чем исходная одна картинка).
Делайте правильную обработку картинок товаров и будет у вас быстрый сайт :)