Как оптимизировать интернет-магазин на ImageCMS Shop под PageSpeed Insights

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

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

На основании данного анализа Google предоставляет общую оценку, по шкале от 0 до 100. И только показатели от 85 Google считаются позитивной оценкой вашего магазина.

Мы, как разработчики платформы, не смогли обойти данный факт стороной во время оптимизации ImageCMS Shop под требования Google. Опишем подробнее, как формируется общий рейтинг и как на него влияют те или иные параметры.

Тестирование проводилось на простом хостинге, по тарифу ImageCMS Host Mini (в данном случае нагрузочное тестирование не проводилось. А вот в следующей статье мы опишем его детально). Тестировали страницу категории товаров, как самую нагруженную в магазине.

Вот как выглядят результаты для мобильной версии:

А это результаты для десктопной версии:

Есть 10 основных рекомендаций, которые влияют на общий рейтинг в той или иной степени. Пройдемся по ним подробнее.

1. Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
   Google рекомендует отобразить необходимый для загрузки страницы код прямо в коде страницы, а все остальные классы и скрипты подключить позже. Тут нужно внимательно посмотреть на код страницы и почистить все, что только возможно, чтобы не блокировать загрузку. Если некоторые моменты почистить вручную сложно (как в нашем случае — вынести файл стилей вниз страницы), можно воспользоваться автоматическими серверными модулями, которые рекомендует Google. 
2. Оптимизируйте изображения
   В данной рекомендации Google сам покажет, какие изображения на вашем сайте не оптимизированы и занимают больше места, чем нужно. Необходимо проверить все изображения на соответствие данной рекомендации и исправить, где потребуется. 
3. Сократите время ответа сервера
   Рекомендуемая Google продолжительность ответа сервера составляет меньше 0,2 секунды. Допустимая норма (для зеленой полосы в целом) это 0,9 секунды. При этом не забывайте, что в современный реалиях — полная загрузка любой страницы вашего интернет-магазина не должна превышать 3 секунды. Важно не увлечься временем ответа и не забыть об общей загрузке, которая намного важнее для конечного пользователя. 
4. Сократите HTML
   В некоторый случаях HTML-код занимает слишком много места без сжатия, поэтому стоит посмотреть на рекомендации Google по оптимизации. 
5. Включите сжатие
   На хостинге должно быть включено gzip-сжатие страницы. Это существенно сокращает вес страницы для конечного пользователя. 
6. Используйте кэш браузера
   Кэширование должно поддерживаться платформой и быть включено на хостинге, необходимо проверить все условия. 
7. Не используйте переадресацию из целевой страницы
   Некоторые сайты и скрипты часто применяют переадресацию, что замедляет работу сайта в целом. Если у вас данный пункт отмечен красным или желтым — необходимо внимательно проверить и подкорректировать. 
8. Оптимизируйте загрузку видимого контента
   За выполнение данного правила отвечает валидная верстка вашего интернет-магазина. В случае несоответствия следует пересмотреть подход к разработке вашего интернет-магазина. 
9. Сократите CSS
   Существуют специальные правила по минификации CSS для клиентов. Это одна из основ современной верстки сайтов. Для уменьшения объема CSS, примените инструменты YUI Compressor и cssmin.js. 
10. Сократите JavaScript
    Аналогично с CSS — необходимость сократить все JavaScript-файлы. В этом вам помогут такие инструменты как Closure Compiler, JSMin или YUI Compressor. 

Не забывайте также и про рекомендации по удобству для отображения на мобильный устройствах:

Относитесь внимательно к оптимизации ваших интернет-магазинов и это воздастся вам хорошей конверсией и высокими позициями в поисковых системах.