Никто не любит медленные сайты: ни поисковые системы типа Яндекса и Google, ни пользователи интернета. Именно поэтому скорость загрузки сайта играет не последнюю роль при поисковом ранжировании веб-страниц. Один из вариантов ускорить сайт — это оптимизация изображений, чтобы ваш сайт «горел зеленым» в Google PageSpeed Insights.
Google PageSpeed Insights — онлайн-сервис, который показывает скорость загрузки вашего сайта для компьютера и мобильных устройств. Если у вашего сайта есть какие-то проблемы с загрузкой, то данные ресурс их покажет и выдаст рекомендации по тому, как их исправить. Веб-мастеры очень часто пользуются данным инструментом, чтобы определить проблемы с веб-сайтом и найти способ их решения. PageSpeed Insights — это инструмент от компании Google. Для ранжирования в их поисковой системе скорость загрузки сайта имеет важное значение. Поэтому негласно PageSpeed Insights принимают за инструмент, который помогает адаптировать сайты под Гугл-поиск.
Оптимизация изображений для Google
Сейчас редко когда встретишь сайт, который в своем контенте не использует графические изображения. Но каждое изображение — это дополнительный вес для страницы. Дополнительный вес — это уменьшение скорости загрузки сайта. Медленный сайт — это потенциальная потеря своих пользователей. То есть тяжелые изображения — это не «корень зла» медленного сайта, но одна из распространенных причин.
Поэтому если вы прогнали свой сайт через Google PageSpeed Insights и этот инструмент вам выдал, что вашему сайту нужна оптимизация изображений, тогда у нас есть несколько рекомендаций, как это можно сделать.
Оптимизация изображений для Google PageSpeed Insights: рекомендации
Первое, с чего всегда нужно начинать, — это правильно выбрать подходящий формат изображений. Наиболее распространенные форматами изображений на сайтах, которые необходимо подвергать оптимизации:
PNG — после оптимизации дает высокое качество изображения, но все равно с большим весом;
JPEG — дает возможность регулировать качество, то есть можно оптимизировать с потерей качества и сделать суперлегкое изображение, а можно оптимизировать без потери качества, соблюдая правильный баланс «качество-вес»;
GIF — обычно используется для небольшой анимации, подходит для оптимизации без потери качества.
Не так давно появился еще один формат изображений — WebP. Он очень хорошо оптимизируется, однако пока поддерживается не всеми современными браузерами. Поэтому на сегодняшний день оптимально использовать формат JPEG для больших изображений и PNG для небольших. Также обязательно нужно присмотреться к формату изображений SVG, которые изначально обладают небольшим весом, но отличным качеством. Поэтому если есть возможность использовать SVG на своем сайте, то обязательно это делайте.
Второй момент после формата, на который также нужно обращать внимание, — это размер изображения. Если у вас на сайте контейнер изображения 200*200, то изображение не должно быть размером 2000*2000. Больше размер — больше вес.
Кстати, существует 2 варианта оптимизации изображений:
оптимизация с потерей качества — этот способ максимально сильно облегчает изображение, но цепляет при этом качество изображения, что не всегда уместно;
оптимизация без потери качества — этот способ также уменьшает вес изображения, но в разумных пределах, поэтому визуально изображение не теряет качества.
Оптимизация изображений для Google PageSpeed Insights должна быть продуманной и сбалансированной, потому что если у вас будет суперлегкий сайт, но от качества изображений будет «резать глаза», тогда вы тоже будете терять своих потенциальных пользователей. Потому что некачественный сайт, также как и медленный, никому не нужен.
Оптимизация изображений для Google: инструменты
Перечень инструментов можно разделить на два больших лагеря:
инструменты, которые помогают оптимизировать изображения до их загрузки на сайт;
инструменты, которые оптимизируют изображения, уже загруженные на сайт.
Перед тем как загрузить изображение на сайт, его необходимо оптимизировать, а именно:
подогнать под необходимый размер;
сжать вес без потери качества или с частичной потерей качества.
Самый простой выход для таких действий — это использование онлайн-инструментов. Просто введите в поисковой строке соответствующий запрос, и вы удивитесь от количества найденных сервисов. Если вам больше нравится работать со стационарными программами, тогда можете присмотреться в сторону следующих программ-редакторов-оптимизаторов, которые нужно будет установить на свой компьютер:
Photoshop;
GIMP;
Paint.net;
GIFsicle;
JPEGtran;
JPEG Mini;
FileOptimizer;
ImageOptim;
и др.
Таких программ тоже очень много, среди них есть как бесплатные, так и платные варианты. Обычно их используют, когда нужно обрабатывать большое количество изображений. Если вам нужна разовая оптимизация изображений для Google PageSpeed Insights, то имеет смысл воспользоваться онлайн-сервисами.
Но что делать, когда изображения уже на сайте? Как тогда их можно оптимизировать? В этом случае на помощь придут специальные плагины, которые могут обработать всю медиатеку вашего сайта и сжать изображения с потерей или без потери качества. Но нужно помнить, что такие плагины — это не панацея для сжатия изображений. То есть, даже зная, что у вас на сайте установлен подобный плагин, не нужно добавлять на сайт изображения весом по несколько мегабайт. Во-первых, таким образом вы быстро заполните арендованное дисковое пространство, а во-вторых, плагин не способен будет оптимизировать подобное изображение до рекомендуемых 100-150 Кб.
Среди плагинов-оптимизаторов можно присмотреться к следующим:
Imagify;
ShortPixel Image Optimizer;
Optimole;
EWWW Image Optimizer Cloud;
Optimus WordPress Image Optimizer;
WP Smush;
TinyPNG;
ImageRecycle;
и др.
Заключение
Оптимизация изображений для Google PageSpeed Insights — это не всегда быстрый процесс. Он требует вашего времени и систематического подхода. Оптимальной связкой для работы с изображениями на вашем сайте является использование оптимизации изображений до их заливки на сайт, а на самом сайте использовать плагины для оптимизации. В этом случае у вас получится добиться максимальных результатов сжатия изображения при минимальных потерях качества.
Web