Логотип imagecms

Как оптимизировать интернет-магазин на 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. 

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


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

Читайте также:
Подпишитесь на еженедельную рассылку и получайте скидки на популярные e-commerce продукты
И совсем скоро Вы станете гуру в e-commerce, веб-разработке, SEO и в интернет-маркетинге! Развивайте свой бизнес с актуальной информацией, успешными кейсами и вдохновляющими примерами.
Обсуждение этого поста (Комментарии: 6)
Вы должны , чтоб присоединиться к разговору
Давайте дружить!

Узнавайте все новости, получайте обзоры, кейсы
и другие полезные материалы по e-commerce через социальные сети!

  • Пришла на почту рассылка, одно из немногих писем, которые не удалил, оставил специально... и зря...

    Статья неочем... Что нового вы в ней даете? Хоть один практический совет? Все тоже самое написано в PageSpeed...

    Сохранить
    • Добрый день, спасибо за отзыв! Данная статья в первую очередь рассчитана на пользователей ImageCMS Shop, чтобы показать, каким образом можно достичь необходимой скорости для своих сайтов.

      В целом мы много копались по различным настройкам и изучали возможности для оптимизации сайтов под этот показатель.

      В случае, если вас интересует ваш конкретный пример - можете задавать вопросы, подскажем.

      Сохранить
  • Мы делали у Вас сайт, делали анализ с помощью этого инструмента, наш сайт в оранжевой зоне, правда не в красной, но и не в зеленой как в статье. Хостинг тоже заказывали у Вас. Обращались в тех поддержку, нам объяснили, что сайт так написан, что нельзя получить 85 и больше, даже приводили примеры авторитетных сайтов, которые не дотягивают до этого показателя. Тоже очень хотим получить 85% и больше.

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

      Необходимо провести подробное тестирование, обратитесь в отдел продаж по этому поводу.

      Насколько я понимаю, сайт еще не запущен на официальный домен для теста ...

      Сохранить
  • Обращались, ответ я Вам уже писал выше. Сайт уже запущен, работает на полном ходу. http://prntscr.com/cicd5f ! Сайт брали шаблонный! судя по рекомендация, вопрос точно не к изображениям.

    Сохранить
    • Как раз, судя по вашему скрину, главная рекомендация гугла состоит в изображениях: http://prntscr.com/cikxig

      Сохранить
Консультация по ImageCMS Shop
 
Уже уходите? Еще секундочку!

Зарегистрируйтесь, и вам навсегда обеспечены скидки на популярные
e-commerce продукты! Также мы будем делиться с вами самой ценной
информацией для развития вашего бизнеса.

или