7 способов оптимизировать скорость вашего магазина Shopify

Почти 1/4 посетителей покидают сайт, если он загружается более 4 секунд. 46% из них никогда не возвращаются на сайт из-за плохой работы сайта. Медленный сайт приводит к ухудшению качества обслуживания клиентов и отталкивает клиентов.

Вы когда-нибудь ждали 15 секунд только для того, чтобы веб-сайт загрузил свой контент? Вы моментально покидаете сайт и ищете другие магазины. Таким образом, медленный сайт снижает посещаемость сайта и увеличивает показатель отказов. И то, и другое негативно влияет на потенциальную клиентскую базу.

Скорость сайта зависит не только от технического обслуживания. Это напрямую влияет на доход. Итак, как мы исправим скорость вашего магазина Shopify? Сегодня мы рассмотрим 7 советов по оптимизации скорости сайта магазина Shopify.

1. Оптимизация изображения
2. Анализируйте сторонние приложения
3. Внедрите AMP (ускоренные мобильные страницы)
4. Выберите правильные темы и функции
5. Ленивые загрузчики
6. Избегайте всплывающих окон
7. Уменьшите количество переадресаций и неработающих ссылок
8. Shopify Тест скорости сайта магазина

Shopify предоставляет оценку скорости сайта на самой панели инструментов. Этот показатель измеряет скорость загрузки вашего сайта на основе показателей производительности маяка Google. Средняя оценка скорости сайта Shopify составляет 50. Все, что выше 70, — это отличная оценка скорости.

Если оценка вашего сайта ниже 50, вы должны использовать эту тактику для повышения производительности сайта. Кроме того, вы должны получить профессиональную помощь по техническим нюансам, таким как минимизация сценариев Java и HTML или блокировка рендеринга CSS и Javascript. Сайты Shopify активно работают с HTML, CSS, Javascript и т. д., что замедляет работу сайта. Итак, если ни один из приведенных ниже советов не работает, проверьте свои коды и серверную часть сайта.

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

Начните с основ: изображений. Изображения с высоким разрешением могут замедлить скорость сайта. И если в вашем магазине есть несколько HD-изображений, графики и видео, ваш сайт будет сильно отставать. Вот 5 способов оптимизировать изображения и повысить скорость сайта:

Загрузить сжатые изображения

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

Избегайте ползунков и выбирайте макет героя

Только 1% посетителей проходят через слайдеры. Таким образом, вместо того, чтобы выбирать 4-7 HD-изображений, используйте 1 изображение с высоким разрешением.

Избегайте GIF-файлов или видео.

Если для вашего продукта требуется несколько изображений, используйте 3-4 изображения с высоким разрешением. Высококачественный GIF или видео может отставать и долго загружаться в систему посетителя.

Используйте отложенный загрузчик

Если вы не можете отказаться от загрузки большого количества изображений, видео или GIF-файлов, в этом случае сайт загружает только контент, доступный на экране пользователя. Таким образом, пока пользователь не откроет слайдер или не дойдет до видео, оно не будет загружено. В результате не только ограничивается загрузка контента, но и сайт работает быстрее.

Придерживайтесь статических изображений

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

2. Анализируйте сторонние приложения

Установка стороннего приложения является стандартной практикой для владельцев магазинов Shopify. Они добавляют их для повышения производительности, добавления функций, автоматизации и многого другого. Однако получение слишком большого количества приложений также влияет на код. Это приводит к низкой скорости. Так?

• Определите приложения, которые не служат никакой цели и бесполезны.
• Удалите эти приложения. Если некоторые функции приложения неэффективны, удалите их.
• Отключение функций или удаление приложений не удаляет интеграцию кода. Таким образом, вам нужно удалить их вручную.

Удалите неиспользуемые приложения. Кроме того, ищите альтернативы приложениям, которые мешают скорости сайта.

3. Внедрите AMP (ускоренные мобильные страницы)

В 2020 году 61% трафика веб-сайтов в США приходился на мобильные устройства. Более половины пользователей проверяют ваш магазин с телефонов. Но телефону требуется больше времени, чтобы загрузить обычный веб-сайт на ПК. Таким образом, оптимизация вашего сайта для телефонов не подлежит обсуждению.

Ваша техническая команда может помочь вам с мобильной оптимизацией. Однако вы можете добавить некоторые приложения из каталога третьих приложений Shopify в DIY. Такие приложения, как FireAMP и Shopsheriff, помогают в AMP. Для их настройки требуется значительное количество времени. Тем не менее, таким образом вы можете привлечь гораздо большую аудиторию.

4. Выберите правильные темы и функции

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

• Обязательно добавьте адаптивную тему . Проверьте, не замедляет ли тема работу сайта, а затем замените ее.
• Проанализируйте, все ли добавленные функции используются или нет. В случае, если функция бесполезна, удалите/отключите их.
• Выбирайте системные шрифты : моно, с засечками и без засечек. Избегайте причудливых шрифтов, которые системе пользователя приходится загружать в первую очередь. В таких случаях загрузка шрифта, загрузка шрифта и загрузка веб-сайта занимает много времени. Несмотря на то, что Shopify предлагает множество вариантов шрифтов, использование базовых системных шрифтов работает хорошо.

Все темы и функции сильно зависят от CSS/HTML, что влияет на скорость сайта. Выбирайте их с умом и избегайте ненужных элементов.

5. Ленивые загрузчики

Ленивая загрузка — это метод оптимизации, при котором страница загружает только ограниченный контент. Если пользователь находится в определенной части магазина/сайта, он загружает только эту конкретную часть. Это похоже на отложенную загрузку видео. Если это не требуется, страница будет загружать только те элементы, с которыми взаимодействует пользователь.

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

6. Избегайте всплывающих окон

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

• Избавьтесь от больших всплывающих окон, которые занимают всю страницу. Они увеличивают время загрузки и приводят к лагам/зависаниям сайта. Кроме того, пользователю может быть неудобно получать всплывающее окно, охватывающее всю страницу.
• Используйте всплывающие окна на определенных страницах с высокой ценностью. Вам не нужно добавлять всплывающие окна на каждую страницу сайта/магазина. Проанализируйте требования и используйте их соответствующим образом.
• Покажите всплывающее окно через несколько секунд после того, как пользователь наведется на ваш сайт. Пользователь, который входит и выходит с вашего сайта, не будет взаимодействовать с вашим всплывающим окном. Итак, добавьте всплывающее окно через 7-15 секунд после того, как пользователь зашел в ваш магазин. Они более эффективны и имеют лучший рейтинг кликов.

7. Уменьшите количество переадресаций и неработающих ссылок

Магазин может иметь различные редиректы или битые ссылки. Однако они лагают сайт, и скорость значительно снижается. Вы можете исправить это непосредственно через панель инструментов Shopify, выполнив перенаправление 404.

В качестве альтернативы вы можете добавить перенаправление 301, которое перенаправляет пользователя на новый URL-адрес. Кроме того, вы можете удалить эти ссылки с помощью технической команды. Они удалят все неработающие ссылки и сократят количество переадресаций.

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

Но сколько в среднем должен загружаться ваш сайт? Давайте посмотрим на некоторые тесты.

8. Shopify Тест скорости сайта магазина

Хорошая скорость магазина Shopify, доступная на панели инструментов, может превышать 50. Но есть и другие инструменты, которые вы можете использовать для проверки скорости вашего сайта.

Среднему сайту требуется около 3,8 секунды, чтобы загрузить первое изображение, и 22,1 секунды, чтобы стать интерактивным. Ваш сайт занимает больше времени? Проверьте скорость загрузки сайта для вашего магазина Shopify.

Вот диаграмма, демонстрирующая средние значения и лучшие показатели скорости магазина Shopify.

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

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

Часто задаваемые вопросы

Какая лучшая скорость для магазина Shopify?

Оценка скорости Shopify отображается на самой приборной панели. Магазины должны попытаться получить оценку выше 50. Оценка скорости 70 считается отличной для магазина Shopify.

Какие элементы чаще всего замедляют работу веб-сайта, особенно веб-сайта Shopify?

Наиболее распространенными элементами, влияющими на скорость работы магазина, являются изображения и тяжелые внутренние коды. Изображения, видео и GIF-файлы с высоким разрешением загружаются и становятся интерактивными. С другой стороны, темы, функции и сторонние приложения увеличивают код веб-сайта, что снижает скорость работы магазина.