Скорость загрузки магазина Shopify — это техническое требование для поддержания функциональной витрины, которая помогает посетителям просматривать товары без разочарования. Улучшение скорости вашего магазина включает в себя анализ производительности ваших шаблонов Liquid, управление приложениями и обеспечение оптимизации ваших визуальных ресурсов для Интернета. Используя встроенные отчеты, предоставляемые Shopify, вы можете определить конкретные области вашего магазина, требующие технического внимания, и применить изменения, чтобы сократить время, необходимое для того, чтобы ваши страницы стали интерактивными для типичного клиента.
Как можно использовать отчет о скорости интернет-магазина Shopify?
Shopify рекомендует использовать отчет о скорости интернет-магазина для выявления проблем с производительностью, которые могут влиять на ваши коэффициенты конверсии. Этот отчет находится в вашей панели администратора Shopify в разделе «Аналитика». Он предоставляет оценку, которая показывает, как ваш магазин работает по сравнению с другими магазинами на платформе. Когда вы открываете этот отчет, он отображает линию тренда с течением времени, позволяя вам увидеть, привели ли ваши недавние обновления или установки приложений к снижению производительности. Распространенная закономерность заключается в том, что скорость магазина колеблется после серьезных изменений дизайна или добавления пользовательских функций, поэтому проверка этого отчета после каждого крупного обновления является хорошей практикой для владельцев магазинов.
Отчет классифицирует вашу оценку скорости как быструю, среднюю или медленную на основе отраслевых стандартов производительности веб-сайтов. Он специально рассматривает, как код вашей темы и приложения взаимодействуют с браузером. Если ваш магазин показывает статус «медленный», отчет часто предоставляет конкретную информацию о том, какие компоненты способствуют задержке. Регулярно просматривая эти данные, вы можете перестать гадать, какие части вашей витрины работают медленно, и вместо этого сосредоточить свои усилия на конкретных элементах, которые Shopify определил как узкие места. Этот отчет — первое место, куда вам следует заглянуть, когда вы решите улучшить технические основы вашего магазина.
Нужно ли оптимизировать изображения для улучшения скорости загрузки магазина Shopify?
Да, Shopify предлагает оптимизировать размеры изображений для улучшения времени загрузки страниц как один из самых эффективных способов обеспечения того, чтобы ваш сайт оставался адаптивным. Фотографии товаров в высоком разрешении необходимы для электронной коммерции, но они могут легко стать самыми тяжелыми ресурсами на вашей странице, если они не отформатированы должным образом. Если вы загружаете изображения размером в несколько мегабайт, браузеру требуется значительно больше времени для загрузки и рендеринга этих файлов, что напрямую способствует более медленному воспринимаемому времени загрузки для ваших пользователей.
Чтобы управлять этим, рассмотрите следующую стратегию оптимизации изображений:
- Измените размер ваших изображений перед загрузкой в Shopify, чтобы они соответствовали размерам, в которых они будут фактически отображаться на экране.
- Используйте современные форматы файлов, такие как WebP или сжатые JPEG, которые предлагают меньшие размеры файлов без существенной потери визуального качества.
- Избегайте использования неоправданно больших изображений в настройках вашей темы, таких как полноширинные баннеры, превышающие 2000 пикселей в ширину.
- Используйте встроенные функции обработки изображений Shopify, которые автоматически предоставляют наиболее подходящий размер изображения в зависимости от устройства посетителя.
Почему сторонние приложения влияют на производительность вашего магазина?
Каждое приложение, которое вы добавляете в свой магазин Shopify, обычно внедряет дополнительные скрипты в код вашей темы. Хотя эти приложения предлагают такие функции, как отзывы, программы лояльности или всплывающие окна, они также требуют, чтобы браузер загружал дополнительные файлы, прежде чем страница будет готова. В типичной учетной записи мы видим, что наличие двадцати или более активных приложений может привести к заметному снижению скорости загрузки. Некоторые приложения загружают свои файлы JavaScript синхронно, что блокирует рендеринг остальной части страницы до тех пор, пока этот конкретный скрипт приложения не завершит загрузку.
Если вас беспокоит скорость вашего магазина, проводите регулярный аудит установленных приложений. Удалите все приложения, которые вы больше не используете активно, чтобы уменьшить количество внешних запросов, которые делает ваш магазин. Для приложений, которые вы должны сохранить, проверьте, предоставляет ли разработчик настройки для асинхронной загрузки скриптов или для загрузки приложения только на определенных страницах, таких как страницы товаров или оформления заказа. Этот целевой подход гарантирует, что ваш магазин выполняет код только там, где это абсолютно необходимо.
Как Alien Road применяет оптимизацию производительности
В Alien Road мы подходим к производительности магазина, сначала устанавливая базовый уровень с помощью отчета о скорости интернет-магазина Shopify. Мы не полагаемся на догадки; вместо этого мы смотрим на конкретные показатели, предоставляемые платформой, чтобы понять текущее состояние сайта клиента. Во время типичного взаимодействия мы просматриваем код активной темы, чтобы убедиться, что рендеринг Liquid эффективен и что никакие избыточные скрипты не вызываются повторно. Мы фокусируемся на устранении технического долга, который накапливается с течением времени, например, устаревших фрагментов, оставленных удаленными приложениями.
Например, если клиент приходит к нам с медленно загружающимся магазином, мы начинаем с проверки размера изображений его товаров и количества приложений, работающих на витрине. Затем мы создаем план по замене тяжелых функций на основе приложений встроенной функциональностью темы, где это возможно. Мы также проводим аудит пользовательских файлов JavaScript и CSS темы, чтобы убедиться, что они минимизированы и эффективно обслуживаются. Наша цель — сбалансировать потребность в маркетинговых функциях с техническим требованием к быстрому, адаптивному пользовательскому опыту, который поддерживает вовлеченность посетителей.
Какова роль вашей темы в скорости магазина?
Ваша тема Shopify — это основа визуального дизайна вашего магазина, и она часто определяет, насколько быстро может загружаться ваш сайт. Некоторые темы созданы с множеством встроенных функций, в то время как другие минималистичны. Тема, которая сильно перегружена анимациями, большими видео и множеством сложных разделов, может значительно увеличить общий вес страницы. При выборе или обновлении темы подумайте, необходимы ли предоставляемые функции для вашей бизнес-модели. Магазину, продающему простые аксессуары, не нужна тема, разработанная для продавца с большим объемом продаж и сложной фильтрацией товаров.
Если вы обнаружите, что ваша текущая тема является основным источником низкой оценки скорости, у вас есть несколько вариантов для рассмотрения. Во-первых, поищите настройки в редакторе вашей темы, которые позволяют отключать неиспользуемые разделы или функции. Многие современные темы Shopify позволяют отключать определенные скрипты или функции, такие как масштабирование продукта, бесконечная прокрутка или ненужные ленты социальных сетей. Упростив конфигурацию темы, вы часто можете увидеть немедленное улучшение того, как быстро витрина становится интерактивной.
Как определить проблемные скрипты приложений?
Определение того, какое приложение вызывает задержку, требует методичного подхода. Начните с проверки инструментов разработчика вашего браузера, особенно вкладки «Сеть», которая показывает все файлы, которые ваш браузер загружает при загрузке вашего сайта. Ищите файлы, которые долго загружаются или, по-видимому, поступают из внешних доменов. Эти файлы часто соответствуют приложениям, которые вы установили. Если вы видите большой скрипт от приложения, которое вы редко используете, это явный признак того, что приложение может быть кандидатом на удаление.
Выполните следующие шаги для проведения базового аудита ваших приложений:
- Откройте инструменты разработчика вашего браузера на вашей домашней странице.
- Обновите страницу и наблюдайте за диаграммой водопада на вкладке «Сеть».
- Определите скрипты, которые имеют длительное время ожидания или большой размер файла.
- Сверьте эти скрипты с вашим списком установленных приложений.
- Протестируйте скорость вашего сайта с отключенным приложением, чтобы увидеть, есть ли измеримая разница.
С чего начать на этой неделе?
Начните свою работу по оптимизации с открытия отчета о скорости интернет-магазина Shopify в вашей панели администратора. Сделайте скриншот вашей текущей оценки, чтобы использовать его в качестве базового уровня для будущих сравнений. Как только у вас будет это число, сначала сосредоточьтесь на ваших графических ресурсах, так как их обычно легче всего исправить, и они дают наиболее немедленный эффект. Убедитесь, что все фотографии ваших товаров сжаты и изменены до соответствующих размеров. После того, как вы разобрались с изображениями, переходите к аудиту установленных приложений, удалив те, которые не вносят непосредственный вклад в ваши цели конверсии.
Наконец, просмотрите настройки вашей темы, чтобы отключить любые функции, которые в настоящее время не используются. Не пытайтесь изменить всю свою тему или удалить все свои приложения сразу, так как это может нарушить функциональность вашего магазина. Вместо этого применяйте по одному изменению за раз, проверяйте производительность вашего сайта после каждого шага и убедитесь, что ваш магазин по-прежнему работает должным образом. Предпринимая эти небольшие, последовательные действия, вы можете улучшить скорость загрузки вашего магазина Shopify и обеспечить лучший опыт для ваших клиентов без необходимости выполнения сложной технической работы.
Читать далее: Электронная коммерция · Электронная коммерция