PageSpeed Insights – оптимизация изображений

Если вы уже начали работу по продвижению своего сайта, то возможно познакомились с таким инструментом как PageSpeed Insights.

PageSpeed Insights – это инструмент позволяющий протестировать ваш сайт и определить насколько он качественно оптимизирован для смартфонов и настольных компьютеров.

Стоит заметить важность хороших показателей в данном сервисе. Уровень их влияние на ваш сайт в результатах выдачи поисковой системы крайне высок. Если сайт не может похвастаться зелеными оценками, то, при прочих равных условиях, не стоит рассчитывать на первые места в поиске.

PageSpeed Insights оптимизация изображения

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

Сообщение об ошибке - Оптимизируйте изображения

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

PageSpeed Insights оптимизация изображения

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

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

Массовая оптимизация изображений - способ первый

В некоторых системах (например, в Битрикс) при выводе каталога, есть возможность «на лету» оптимизировать картинки. Делается это с помощью метода CFile::ResizeImageGet, который не только уменьшает картинку, но оптимизирует ее. Часто добавления такой процедуры при выводе товаров или каких-то других элементов вполне достаточно. Но если это не помогло или помогло не полностью, тогда переходим ко второму способу.

Массовая оптимизация изображений - способ второй

PageSpeed Insights анализирует быстроту полной загрузки страницы. И если наши картинки тормозят этот процесс, не надо их показывать сразу – сделаем отложенную загрузку.

Поможет нам в этом javascript. Суть решения такова:

  1. Показать вместо картинок единую картинку-заглушку

  2. После загрузки страницы загрузить картинки в фоновом режиме

Если вы обратили внимание, список записей в нашем блоге запускается именно по такой схеме. Сначала мы показываем картинку предзагрузки

PageSpeed Insights оптимизация изображения

А когда вы начинаете какие-то действия на сайте, загружаются полноценные фотографии.

Загружать их можно с помощью ajax или используя html атрибуты. Мы выбрали второй вариант и наше фото в коде при загрузке выглядит вот так:

Как видите сам путь ссылается на заглушку, а реальная картинка находится в значении артибута data-src. Затем написали функцию, которая будет заменять заглушку на реальное фото:

При начале ваших действий js скрипт пройдется по всем тегам с нужным статусом и заменит src на data-src. Для красоты загрузки мы еще добавили анимацию плавного появления, чтобы создать приятный эффект.

Чтобы это работало на смартфонах, где нет событий связанных с мышкой, используем сочетание mouseover и touchmove.

Google оценил наши старания и поставил после такой оптимизации очень хорошие оценки. Какие цифры были до этого вы могли видить на скриншоте выше.

PageSpeed Insights оптимизация изображения

Надеемся и вам такой метод принесет нужный эффект. Если будут сложности – обращайтесь, будем рады помочь.


Подписаться на анонсы блога

comments powered by HyperComments