Портфолио категории «Оптимизация картинок для ускорения сайта»

При проверке сайта постоянного клиента обнаружил, что есть сквозные картинки неподходящего размера и сторонний код, который ухудшает показатель INP.

Долгая загрузка сайта из-за того, что грузились сразу все изображения, даже которых не видно на первом экране. Так же не заданные параметры ширины и высоты у изображений увеличивали время их загрузки.

Есть встроенная функция отложенной загрузки только у слайдеров. Все остальные скрытые картинки сайта не откладываются и тормозят скорость сайта.

Сделал предварительное сжатие пары картинок с главной страницы. Результат хороший а качество изображений вообще не потерялось. Так как на сайте очень много картинок, то их сжатие однозначно даст хороший эффект по скорости, хоть ресурс PSI и не отображает этот пункт.

Картинок на сайте не много, но они все очень тяжёлые. Сжатие картинок позволит уменьшить их минимум в 2 раза.

На сервере 6768 картинок. Не смотря на то, что PageSpeed Insights не выдаёт пункт «Настройте эффективную кодировку изображений», при ручной проверке сразу понятно, что картинки можно хорошо сжать без потери качества.

Обычно мы смотрим на главную страницу сайта, но тут надо работать с каждой страницей внедряя технологию в шаблон сайта.

Попробовал сжать пару картинок сайта - результат хороший. Надо сжать все 12561 картинок, которые есть на сервере.

Пример: У вас в шапке сайта используется картинка whatsapp.png Её размер 70х72 пикселя, хотя на сайте она используется в размере 25х25 пикселей. Она находится в шапке сайта и этот лишний вес сказывается на всех страницах. У слайдера большие картинки На компьютере они так и отображаются большими и проблем нет, но в мобильной версии такие большие не нужны. Сейчас действует алгоритм Mobile Ferst, а это значит, что индексируется именно мобильная версия и в первую очередь о сайте поисковики судят именно по мобильной версии. Поэтому, для мобильной версии должны использоваться отдельные картинки слайдера в размере 320х250 пикселей. Это уже позволит сделать каждую легче в 2 раза. Слайдер с логотипами использует картинки с размером 527х528 пикселей, а на сайте они "впихиваются" в окошко шириной 190 пикселей и 177 на мобильной версии. Учитывая, что самих логотипов много, получим существенное облегчение.

Не оптимизированные картинки - это только часть проблем с картинками сайта. Нужно их ещё подогнать под правильный размер, отложить загрузку скрытых и прочее. Но начинать рекомендую именно с оптимизации.

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

Работа над картинками - самый важный этап в оптимизации скорости сайта.