Если вы уже начали работу по продвижению своего сайта, то возможно познакомились с таким инструментом как PageSpeed Insights.
PageSpeed Insights – это инструмент позволяющий протестировать ваш сайт и определить насколько он качественно оптимизирован для смартфонов и настольных компьютеров.
Стоит заметить важность хороших показателей в данном сервисе. Уровень их влияние на ваш сайт в результатах выдачи поисковой системы крайне высок. Если сайт не может похвастаться зелеными оценками, то, при прочих равных условиях, не стоит рассчитывать на первые места в поиске.
Существует несколько индикаторов, по которым ведется оценка сайта. В данной статье мы не будем разбирать все, а расскажем только про изображения. Но в будущих материалах, обязательно поделимся опытом по настройке других показателей. Подписывайтесь на наши анонсы, чтобы не пропустить эти статьи.
Сообщение об ошибке - Оптимизируйте изображения
Данная ошибка играет большую роль в общем учете качества сайта. Так как "тяжелые" изображения очень сильно тормозят загрузку страницы. А если таких картинок много, например, в каталоге товаров, то показатели тестирования резко падают.
Есть несколько вариантов решения данной проблемы. Один из них — это скачать подготовленные изображения и заменить их на своем сайте. Чтобы их скачать прокрутите вниз страницы с результатами тестов и увидите ссылку на архив с этими файлами. Это удобно, если вы работаете над оптимизацией одной страницы или таких страниц у вас мало.
Однако в случаях, когда требуется проработать каталог товаров из нескольких сотен, а может и тысяч позиций, такое решение проблемы становится крайне неудобным и требует огромных трудозатрат. Но отчаиваться не стоит, ведь мы вам расскажем про пару способов решения данной задачи.
Массовая оптимизация изображений - способ первый
В некоторых системах (например, в Битрикс) при выводе каталога, есть возможность «на лету» оптимизировать картинки. Делается это с помощью метода CFile::ResizeImageGet, который не только уменьшает картинку, но оптимизирует ее. Часто добавления такой процедуры при выводе товаров или каких-то других элементов вполне достаточно. Но если это не помогло или помогло не полностью, тогда переходим ко второму способу.
Массовая оптимизация изображений - способ второй
PageSpeed Insights анализирует быстроту полной загрузки страницы. И если наши картинки тормозят этот процесс, не надо их показывать сразу – сделаем отложенную загрузку.
Поможет нам в этом javascript. Суть решения такова:
-
Показать вместо картинок единую картинку-заглушку
-
После загрузки страницы загрузить картинки в фоновом режиме
Если вы обратили внимание, список записей в нашем блоге запускается именно по такой схеме. Сначала мы показываем картинку предзагрузки
А когда вы начинаете какие-то действия на сайте, загружаются полноценные фотографии.
Загружать их можно с помощью ajax или используя html атрибуты. Мы выбрали второй вариант и наше фото в коде при загрузке выглядит вот так:
Как видите сам путь ссылается на заглушку, а реальная картинка находится в значении артибута data-src. Затем написали функцию, которая будет заменять заглушку на реальное фото:
При начале ваших действий js скрипт пройдется по всем тегам с нужным статусом и заменит src на data-src. Для красоты загрузки мы еще добавили анимацию плавного появления, чтобы создать приятный эффект.
Чтобы это работало на смартфонах, где нет событий связанных с мышкой, используем сочетание mouseover и touchmove.
Google оценил наши старания и поставил после такой оптимизации очень хорошие оценки. Какие цифры были до этого вы могли видить на скриншоте выше.
Надеемся и вам такой метод принесет нужный эффект. Если будут сложности – обращайтесь, будем рады помочь.