Привет!

Как улучшить скорость оптимизации в Shopify?

Artur ShevchenkoArtur Shevchenko

Здесь не будет бесполезных рецептов, только реальные способы улучшения скорости, которые вы можете применить для вашего Shopify магазина.
Если страница грузится дольше 8 секунд на смартфоне, то даем гарантию что с продажами на этом сайте не супер.
Каким образом скорость загрузки влияет на продажи?

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

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

Анализ

Традиционным сервисом анализа скорости загрузки сайтов является Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/ . Добавляем свой сайт и ждем, пока отобразятся данные.

Вы получили список рекомендаций:

  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы (Eliminate render-blocking JavaScript and CSS in above-the-fold content). Вам нужно собрать все стили темы Shopify в один файл, а затем их минифицировать*. То же нужно сделать со скриптами. Google рекомендует загружать стили на страницу inline. Разберем это подробно ниже.
  • Используйте кеш браузера (Leverage browser caching). Google настаивает на том, чтобы указывать в заголовках HTTP дату или срок действия статических ресурсов. Но Shopify не дает доступа к Back-end, поэтому этот пункт выполнить нельзя.
  • Оптимизируйте изображения (Minify JavaScript). Это пункт мы подробно разберем ниже. Скажем только, что оптимизация изображений может сократить вес вашей страницы на 10-50%.
  • Включите сжатие (Enable compression). Нужно включить gzip сжатие. По-умолчанию каждый Shopify магазин уже обладает сжатием.
  • Сократите время ответа сервера (Reduce server response time). Этот пункт нет смысла оптимизировать, Shopify дают каждому магазину CDN, а их серверы имеют высокие показатели отклика (response).

Как видите, часть пунктов уже сделана. Вам осталось выполнить только 3: минификация стилей и скриптов, inline стилей и оптимизация картинок.

Скрипты и стили

Рекомендуем настраивать сборку в Gulp. Если вы не можете этого сделать, советуем обратиться к квалифицированным Shopify разработчикам.

Собираем и минифицируем стили. Вы можете столкнуться с тем, что некоторые стили имеют .liquid расширения файла. Это связано с тем, что в этом стиле используются liquid переменные, которые берутся из админ панели магазина. Зачастую они касаются типа шрифта, размера и цветов. Можно смело сделать их статичными, скопировав значения из админ панели в файл стиля.

Следующим шагом будет inline стилей.

Вы создаете liquid сниппет critical-styles.liquid, в котором размещаете тег <style></style>, внутри которого вставляете собранные и минифицированые стили. Подключаете сниппет через {% include ‘critical-styles’ %} в <head> тег.

Скрипты вам нужно собрать в один файл, минифицировать, а затем подключить в самый низ страницы, до закрывающего </body>. Все это тоже делается через Gulp.

Отслеживание процесса загрузки страницы

Берем за основу сервис webpagetest.org.
Вводим адрес вашего сайта и ждем результатов.

Выбираем вкладку Details. Здесь вы увидите процесс загрузки вашей страницы, файл за файлом. Обратите внимание на красный цвет строки таблицы. Это значит что данный файл или ресурс не подгрузился. Вам нужно это исправить. Это может быть картинка, которой давно уже нет, но в коде ее еще не убрали, а может быть и сервис статистики, который в принципе вам уже не нужен. Удаляем или восстанавливаем.

На вкладке Content breakdown вы сможете увидеть диаграмму веса вашей страницы. Обратите внимание на соотношение. Для типичного Shopify магазина вес картинок должен быть больше веса скриптов и стилей. Если ваши скрипты весят больше картинок, то либо в у вас веб-приложение и сложный функционал, либо ваш сайт “оброс” библиотеками, которые возможно вообще не используются.

Оптимизация изображений

Google PageSpeed Insights вам уже давал ссылки на список картинок, которые не оптимизированы. Закидываем их все в https://tinypng.com/. Скачиваем и загружаем обратно на ваш сайт.

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

Кроме того, можете воспользоваться сервисом webpagetest.org, который мы указали выше. Вкладка Image Analysis. Здесь вам подскажут насколько можно снизить размеры конкретных изображений, в какие форматы можно изображения переконвертировать.

Верим, что статья максимально доступно описала процесс оптимизации скорости. Если нет, то команда MAKEBECOOL с радостью поможет вашему сайту достигнуть космической скорости загрузки и увеличить ваши продажи!

We know how to develop ecommerce projects

Спасибо!
Ваша заявка отправлена