Облегчение.....листингов

Почти на каждом сайте есть листинги товаров, услуг или чего-то еще.

Там где это с фотками встречается, то бывает капец долго грузится страница.

Некоторые делают отложенную загрузку картинок по JS, но тогда они не индексируются.

На нескольких сайтах нашел одну и ту же ошибку, сейчас покажу ее и расскажу как исправить.

Берем листинг сайта любой, тыкаем на картинку правой кнопкой мышки:

И открываем в новой вкладке.

То есть тут взяли картинку детальную товара, уменьшили ее размеры стилями CSS и закинули в каталог.

Весит картинка 375 Кб.

В среднем на страницах около 20-30 товаров, то есть все картинки весят примерно 9,3 Мб. Это очень внушительная цифра, и это все адски тормозит загрузку страницы.

Что можно сделать:

1. Для каждого товара создаем уменьшенную картинку под листинг
2. У уменьшенной картинки снижаем качество до адекватного (никто там не будет пристально разглядывать с лупой монитор)
3. Ставим обработчик формата WEBP, если браузер пользователя поддерживает этот формат, то подсовываем ему облегченную версию картинки

Какой результат:

Мы на проекте Колеса Даром уменьшили картинки товаров до 7 Кб. Это в 50 раз меньше! И все картинки листинга весят всего 210 Кб (даже меньше чем исходная одна картинка).

Делайте правильную обработку картинок товаров и будет у вас быстрый сайт :)