8 проверенных способов оптимизации скорости Shopify

Вступление

Оптимизация скорости Shopify — один из важнейших аспектов , который должны учитывать владельцы магазинов Shopify. Медленно загружаемый веб-сайт приводит к высокому показателю отказов, низкой вовлеченности пользователей, меньшему трафику и, таким образом, разнообразному влиянию на ваши продажи. Если скорость вашего сайта и производительность страницы приличные, они повышают SEO вашего сайта, улучшают взаимодействие с пользователем (UX). В конце концов, они повышают ваш рейтинг в поисковых системах.

В этой статье LitExtension — эксперт № 1 по миграции корзины покупок расскажет вам, как заставить ваш Shopify затмить другие сайты своей высокой скоростью загрузки.

Прежде чем углубляться в то, как оптимизировать работу вашего магазина Shopify, посмотрите это видео о Shopify Review, чтобы узнать больше об этой удивительной платформе!

Контрольный список для быстрой оптимизации скорости Shopify

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

1. Оптимизируйте изображения и видео

Большой объем неоптимизированных изображений и видео часто является самой популярной причиной медленной работы сайта. Есть 4 решения , которые вы можете рассмотреть для ускорения работы сайта Shopify следующим образом:

1.1. Сжимайте и объединяйте изображения

Сжатие больших изображений — один из самых эффективных способов ускорить работу сайта Shopify. В частности, TinyJPG или TinyPNG — это хорошие варианты сжатия изображений без потери качества при сжатии без потерь.

Или же, при загрузке множества разных изображений, что требует большого количества запросов изображений к серверу, вы можете выбрать консолидацию изображений. Это помогает объединить множество выдающихся значков и эскизов в один, который называется «CSS Sprites» или «CSS Image Sprites» . Впоследствии вы хорошо выполните оптимизацию скорости Shopify.

1.2 Использование изображений с отложенной загрузкой

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

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

Поскольку браузеру не нужно загружать весь контент сайта сразу, это помогает решить ваш вопрос о том, как ускорить работу сайта Shopify.

1.3 Применение отложенной загрузки видео

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

У нас есть тест скорости Shopify с использованием этой техники. Это сэкономило 2 МБ веса страницы и способствовало ускорению загрузки страницы на 0,75 секунды.

– Спидбустер, 2021 г.

1.4 Замените GIF-файлы статическими изображениями

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

Однако имейте в виду, что эти файлы особенно велики, поскольку изображение GIF содержит несколько кадров. Таким образом, чем больше продолжительность, тем больше кадров она содержит . В течение 2 секунд видео ваш GIF может содержать 20 или даже больше изображений. Эти файлы заметно увеличивают вес вашего сайта, поэтому специалисты веб-сайтов настоятельно рекомендуют по возможности переключать их на статические изображения. Запишите это, это следует рассматривать как один из самых простых и быстрых способов провести оптимизацию скорости сайта Shopify!

2. Выберите правильные шрифты

Одним из наиболее заметных факторов, который вы не можете исключить для проведения оптимизации скорости Shopify, являются правильные шрифты. Библиотека шрифтов Shopify содержит коллекцию шрифтов, таких как системные шрифты, шрифты Google и лицензионные шрифты от Monotype . Все эти шрифты можно бесплатно использовать во всех интернет-магазинах Shopify.

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

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

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

• Моно-шрифты: Menlo, Consolas, Monaco, Liberation Mono или Lucida Console.
• Шрифты без засечек: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu или Helvetica Neue.
• Шрифты с засечками : Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times или Source Serif Pro.

3. Удалите ненужные приложения Shopify

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

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

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

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

• Отключите функции приложения, которые вы больше не используете , или удалите те, которые не относятся к вашему магазину. Учитывайте особенности интернет-магазина и оптимизацию скорости.
• Если вы удаляете приложение, подумайте об удалении всего кода, который был добавлен во время процедуры установки . Некоторые приложения помогают вам в этой процедуре, заключая свой код в теги {% comment %}, содержащие имя приложения.

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

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

Примечание. Приложения только для администратора, такие как приложение Shopify Local Delivery, не влияют на скорость вашего магазина.

4. Обновите/загрузите быстрые и отзывчивые темы Shopify

Темы Shopify содержат код Liquid, HTML, CSS и JavaScript. Эти размеры файлов могут увеличиваться по мере того, как вы редактируете или настраиваете темы, и в конечном итоге влияют на скорость вашего сайта Shopify, что в конечном итоге приводит к неудачной оптимизации Shopify.

Если вы устанавливаете новую тему, всегда проверяйте следующее:

• Выберите быструю и отзывчивую тему.
• Проверьте наличие актуальной версии вашей темы, а также предварительный просмотр темы в реальном времени. Запустите страницу предварительного просмотра темы через Google PageSpeed ​​Insight, чтобы увидеть, какие улучшения можно внести для оптимизации скорости вашего сайта.

Если вы обнаружите в своей теме что-то, что замедляет работу вашего интернет-магазина, выполните следующие действия:

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

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

• Наймите профессионала Shopify, чтобы помочь вам определить неэффективный или неиспользуемый код.
• Используйте Shopify Theme Inspector для Chrome, чтобы найти строки кода, которые замедляют работу страниц в вашем интернет-магазине.

5. Используйте AMP

Другим решением для оптимизации скорости Shopify является Mobile Accelerated Pages или AMP, стандартная структура , которая позволяет продавцам разрабатывать веб-страницы, удобные для мобильных устройств , с быстрой загрузкой.

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

Взгляните на статистику (обновленную Statista) ниже, чтобы увидеть, насколько важно улучшить пользовательский интерфейс для мобильных посетителей:

• В 2021 году количество подписок на смартфоны во всем мире превысило 6 миллиардов, и ожидается, что в ближайшие годы они увеличатся на несколько сотен миллионов.
• По прогнозам, мобильная коммерция будет генерировать 72,9% всей розничной электронной торговли в 2021 году по сравнению с 58,9% в 2017 году.

Поэтому владельцам магазинов Shopify пора задуматься об AMP. Если ваш веб-сайт не загружается быстро и не работает на мобильных устройствах, вы можете потерять множество потенциальных клиентов. Благодаря этому фреймворку клиенты смогут посещать ваш сайт гораздо быстрее. Многие приложения, такие как 4-звездочные рейтинги FireAMP или RocketAMP , доступны в магазине приложений Shopify, чтобы помочь вам в создании страниц AMP. Или же вы можете рассмотреть возможность создания Shopify API для разработки этих страниц AMP. Эти приложения идеально ответят на ваш вопрос о том, как ускорить работу сайта Shopify.

6. Организуйте все коды отслеживания с помощью Google Tag Manager

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

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

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

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

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

7.1. Для редиректов

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

Неработающая ссылка 404/301 Redirect — это разумное решение, разработанное Giraffly. Это помогает:

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

7.2. Для битых ссылок

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

Битые ссылки вредят SEO. Когда пользователь попадает на недоступную страницу, он нажимает кнопку «Назад» в своем браузере. Это увеличивает показатель отказов сайта.

8. Проверьте производительность вашего магазина с помощью Google Pagespeed Insights

Прежде чем перейти к решению, давайте ответим на вопрос: что такое хороший показатель скорости Shopify? Ваша оценка скорости Shopify основана на том, насколько хорошо ваш магазин работает в тестовой среде Google Lighthouse. Более 50 считается респектабельным показателем скорости Shopify, а более 70 считается отличным !

Мы рекомендуем проверить производительность вашего магазина с помощью Google PageSpeed ​​Insights, чтобы оценить ваши веб-страницы и найти части вашего веб-сайта, которые увеличивают время загрузки, а затем работать над предоставленными предложениями , чтобы минимизировать время загрузки и повысить скорость и производительность веб-сайта.

Google PageSpeed ​​Insights выявляет следующие ключевые факторы для мобильных и настольных веб-сайтов:

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

Использование Google PageSpeed ​​для анализа производительности вашего веб-сайта может быть лучшим сервисом оптимизации скорости Shopify , который поможет вам найти аспекты, замедляющие работу вашего сайта.

Почему Shopify скорость страницы имеет значение?

Успех электронной коммерции зависит от скорости вашего сайта. А с предстоящими изменениями в поисковом рейтинге Google в мае 2021 года производительность в Интернете станет еще более важным конкурентным преимуществом.

Рассмотрим следующие факторы:

• Увеличить конверсию

Более низкие показатели отказов и увеличение конверсии были связаны с веб-сайтами с высокой конверсией. По данным Google, увеличение скорости сайта на одну секунду может повысить мобильную конверсию на 27%. Поскольку 70% покупателей совершают покупки на своих мобильных устройствах, скорость сайта, безусловно, оказывает значительное влияние на ваш потенциальный доход.

Увеличение скорости сайта на одну секунду может повысить мобильную конверсию на целых 27%.

• Повысьте лояльность клиентов

Возможно, вы слышали: «Дешевле убедить существующих потребителей совершить повторную покупку, чем привлечь новых клиентов».

Здесь важна скорость сайта. По данным Skilled, 79% клиентов менее склонны совершать повторные покупки в онлайн-бизнесе, если они «недовольны» скоростью сайта (т. е. если ваш сайт работает быстро, у вас больше шансов получить постоянных клиентов).

• Улучшить позиции в поиске Google

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

Shopify Оптимизация скорости – часто задаваемые вопросы

Вывод

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

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

Если вы в настоящее время используете Shopify или другие платформы электронной коммерции и можете столкнуться с проблемами скорости, LitExtension — служба миграции корзины № 1 здесь, чтобы помочь! Наша команда поможет вам добиться идеальной оптимизации скорости Shopify! Пожалуйста, свяжитесь с нами, мы всегда здесь для помощи.

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