Главная / Блог / Электронная коммерция / Как оптимизировать интернет-магазин на ImageCMS Shop под PageSpeed Insights

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

06 сентября 16
Reading Time: 2 minutes
6 комментариев
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes)

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

На сегодня 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. 

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


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

Comments (6)
  • Артем:

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

    1. ivikk:

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

  • Артем:

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

    1. ivikk:

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

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

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

  • Roma:

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

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

    1. ivikk:

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Более 3000 запущенных проектов

Вместе с нами многие уже развивают свой бизнес! Смотреть все отзывы
Хочу выразить большую благодарность коллективу компании "ImageCMS" а именно Ивану и Марии! Во время выбора компании проводил переговоры с 7 различными организациями, Иван единственный кто смог адекватно объяснить и подсказать всю необходимую информацию для принятия решения. В итоге результат более чем на 100% соответствует ожиданиям, а во много их даже превосходит!
Перепробовав много CMS (opencart, Битрикс) и др. Мы увидим, как много в каждой из них недостатков. Где-то или очень сложно или очень дорого кастомизировать. Работая маркетологом, могу заверить, что в ImageCMS большинство нужны "фич" реализовано из коробки, без дополнительных надстроек. Посмотрев демо версию новой версии движка, был приятно удивлен скоростью работы (ооочень важно).
За время сотрудничества компания показала себя в качестве ответственного подрядчика, быстро воплотив в жизнь удобный интернет-магазин с учетом всех наших пожеланий.
Работой доволен. Отвечают всегда быстро и по сути, остаются только приятные впечатления от общения. Пара слов о новом движке: Быстро, красиво и интуитивно понятно. Полностью оправдывает вложенные средства. Рекомендую.
Доволен. Скрипт считаю перспективным. Считаю, что ваш коллектив работает на опережение: ваше предложение было оптимальным по цене/качеству.
Опертивная и четкая работа, своевременое предоставление дополнительных консультаций по работе с административной частью. Созданным магазином довольна. Рекомендую этот движок!