9 советов по оптимизации скорости сайта Shopify

Опубликовано: 2020-06-29

Shopify — это невероятно доступная платформа, где такие крупные компании, как Lindt, могут создать и открыть свой интернет-магазин всего за 5 дней. Легко запустить магазин и начать торговать в кратчайшие сроки, и в нем есть множество встроенных функций, облегчающих этот процесс.

Однако есть некоторые вещи, о которых должны знать продавцы, чтобы получить максимальную отдачу от своих магазинов. Скорость сайта остается одним из этих критических факторов. Медленная загрузка сайта имеет много недостатков: от низкой вовлеченности и высокого показателя отказов до меньшего трафика, более низких продаж и даже ухудшенного рейтинга в поисковых системах (Google любит страницы с быстрой загрузкой). сайт максимально быстро.

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

Как проверить текущую скорость вашего сайта Shopify

Используйте PageSpeed ​​Insights, который даст вам оценку скорости и рекомендации по улучшению. Он разделит результаты для компьютеров и мобильных устройств и даст такие рекомендации, как:

  • Оптимизируйте свои изображения
  • Минимизируйте JavaScript и CSS
  • Удалите JavaScript и CSS, блокирующие рендеринг, в верхней части страницы.
  • Используйте кеш браузера и сократите время отклика сервера
  • Избегайте перенаправлений
  • Gzip-сжатие

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

Однако есть некоторые предостережения для инструмента Insights. Хотя это полезно, стоит помнить о нескольких вещах. Он отмечает сайты, которые в значительной степени полагаются на Javascript (как это делает большинство сайтов Shopify), и оценивает сайты по техническому контрольному списку, который не принимает во внимание некоторые практические соображения. Он также может варьироваться в зависимости от того, какая полоса пропускания доступна в момент проведения теста.

Я помню клиента из другого агентства, чей балл упал с 98 до 96 после внесения некоторых изменений на сайте, и он настаивал на том, чтобы вернуть его обратно, внеся другие изменения. Чего они не понимали, так это могло сломать или подорвать другие области их сайта, и не количество баллов было решающим фактором, а удобство использования и скорость самого сайта в реальном мире.

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

Вы также можете использовать Pingdom или GTmetrix для оценки скорости вашей страницы — попробовав несколько разных инструментов, вы получите более широкий обзор производительности скорости, проблем и действий по исправлению.

Как увеличить скорость вашего сайта

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

1 Используйте AMP, чтобы сделать страницы быстрее

AMP (ускоренные мобильные страницы) помогает повысить скорость загрузки страниц на мобильных устройствах. Предпосылка состоит в том, чтобы обслуживать веб-страницы в стандартном формате (определенном Google), чтобы уменьшить размер страницы и время загрузки. Например, весь контент страницы загружается сразу, и браузеры заранее знают макет страниц AMP.

Хотя Shopify не предлагает AMP-версии своих магазинов в стандартной комплектации, в магазине приложений доступны такие приложения, как RocketAmp, которые будут создавать AMP-версии страниц вашего магазина от вашего имени. Имейте в виду, что если вы пойдете по этому пути и прекратите использовать приложение позже, это может вызвать проблемы с ошибками страницы.

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

Сжатие изображений важно для более быстрой загрузки веб-страниц, особенно на сайтах электронной коммерции.

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

Shopify позволяет использовать следующие форматы изображений:

  • JPEG или JPG
  • Прогрессивный JPEG
  • PNG
  • гифка

Изображения PNG полезны, если вам нужны прозрачные пиксели на изображении (вы часто будете видеть их с сеткой на фоне, обозначающей прозрачную часть), но они обычно занимают больше места, чем JPEG, поэтому рассмотрите возможность использования JPEG в качестве стандарта, если вы может.

Существует два уровня сжатия:

  • «сжатие без потерь», которое дает вам небольшой файл без снижения качества изображения
  • «сжатие с потерями», что приводит к еще меньшему размеру файла, НО приносит в жертву качество изображения

Оба варианта доступны для вас, но для сайта электронной коммерции, продающего продукты, вполне вероятно, что изображения являются важной частью убеждения клиентов покупать. В недавнем опросе 1500 онлайн-покупателей, проведенном Eastside Co, 37,8% респондентов заявили, что, по их мнению, изображения продуктов «очень или чрезвычайно влияют» на их решения о покупке. Имея это в виду, рассмотрите возможность использования сжатия без потерь для небольших файлов, но без снижения качества.

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

3 Используйте быструю и отзывчивую тему

Если вы используете стандартную тему, а не услуги эксперта Shopify, такого как Eastside Co, убедитесь, что вы выбрали быструю и отзывчивую. Это означает, что они будут изменять элементы на вашем веб-сайте в зависимости от размеров устройства, используемого для его просмотра, что сделает работу пользователей лучше и быстрее.

4 Просмотрите приложения, установленные в вашем магазине.

Зайдите в панель администратора вашего магазина Shopify и просмотрите все установленные вами приложения и удалите те, которые вам не нужны или которые вы не используете. Часто причиной более медленной скорости сайтов Shopify является количество запущенных на них приложений: каждое устанавливаемое вами приложение — это больше кода на вашем сайте и больше элементов для загрузки.

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

5 Уменьшите количество HTTP-запросов

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

Существует ряд технических шагов, которые вы можете предпринять, чтобы уменьшить количество HTTP-запросов. В этой статье приведены 9 действий, которые помогут вам сделать это и увеличить скорость вашего сайта.

6 Минимизируйте битые ссылки и редиректы

Неработающие ссылки могут увеличить ваши HTTP-запросы (см. пункт 5), и вы не хотите, чтобы ваши посетители переходили по ним, поскольку это увеличивает вероятность того, что они покинут ваш магазин и совершат покупки в другом месте.

Ненужные перенаправления (например, страница A указывает на страницу B, которая указывает на страницу C, где посетитель наконец попадает) означают, что посетителю требуется больше времени, чтобы добраться до него, и снижает общую скорость сайта.

В магазине приложений Shopify доступны приложения для выявления неработающих ссылок и перенаправлений и помощи в их постоянном исправлении.

7 Избавьтесь от слайдеров и карусельных изображений

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

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

Вместо этого используйте одно изображение «героя» (оптимизированное, как описано). Это все, что вам нужно.

8 Поместите весь код отслеживания через Диспетчер тегов Google (GTM)

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

9 Ленивая загрузка

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

Это отличный «обман» для оптимизации скорости на страницах с большим количеством изображений или видео ниже. По сути, вы извлекаете элементы только по мере необходимости, а не загружаете все одновременно. Ознакомьтесь с этим подробным руководством о том, как реализовать ленивую загрузку из CSS Tricks.

Итак, у вас есть это: 9 практических моментов, о которых следует помнить, чтобы убедиться, что вы делаете все возможное для увеличения скорости вашего сайта. Если вам нужна помощь с вашим магазином Shopify, от скорости сайта до увеличения продаж, напишите нам!