Во время работы над заданием опытные и ответственные вебмастера проверяют сайт через сервис google page speed. Он позволяет анализировать сайт на скорость загрузки и дает советы по исправлению ситуации. Конечно, всем хочется видеть большой балл с зеленой зоне, но не всем это удается. 

Причин может быть несколько — медленный ответ сервера, перенасыщенность скриптами,  стилями и наконец таки тяжелые неоптимизированные картинки. О них и пойдет речь.

Когда на сайте все тип-топ, скрипты и стили убраны вниз, добились хорошего быстродействия, включили кеширование, вы ожидаете увидеть хороший балл. Но как правило этого не происходит из-за изображений. Благо google page speed умеет сжать все фото без потери качества и дать вам эти файлы для замены на сервере. Но не спешите этого делать!

Предыстория.

Раньше google отдавал сжатые картинки в  оригинальном размере. Мы скачивали архив, открывали в нем файл MANIFEST где смотрели название файла и куда его надо загрузить. Все отлично и хорошо работало — после загрузки картинок на сервер балл сразу взлетал на несколько пунктов. Но сейчас ситуация поменялась.

На что обратить внимание.

Сейчас google ругается на фото, даже если они сжатые, лишь по одной причине — блок с фотографией меньшего размера чем оригинальная картинка. Иными словами, если вы запихнули фото 800х600 в блок 400х300 вам об этом напомнят и предложат скачать оптимизированные файлы. 

Будьте внимательны! Без сравнения размера фото не спешите загружать т. к. сервис отдаст вам файл размером 400x300 (размер блока в котором фотка) и если вы замените оригинал на уменьшенную версию то большое фото просто заменится. Конечно, если на сайте везде блоки 400х300 то и волноваться нечего, но если на главной странице у вас превью меньшего размера чем, например, на странице товара — фото не в коем случае не заменяйте.

Как быть?

Google все правильно делает, он указывает вам на то, то нет смысла использовать большие изображения в меленький блоках. Это грузит не только трафик а и процессор посетителя.  Гораздо лучше ставить фото такого размера как и блок. Для этого надо "ресайзить" все фото на сайте под конкретный блок. Это хорошо и логично с точки зрения скорости страниц, но немного запутывает вебмастеров.

В заключение, хотелось бы предупредить разработчиков что бы они внимательно сравнивали размеры сжатых изображений и оригинальных на сервере. И если те отличаются делайте "ресайз" под размеры блока и будет вам хороший балл в page speed.