1. Как скорость страницы влияет на электронную коммерцию?
2. Аналитика для повышения производительности сайта и скорости страницы
3. 1. Используйте быстрый и надежный хостинг
4. Торговый центр: Бомбас
5. 2. Используйте сеть доставки контента (CDN)
6. Как работает CDN от Shopify
7. 3. Организуйте свое отслеживание с помощью Google Tag Manager
8. Внимательно рассмотрите каждый инструмент, который вы добавляете в Google Tag Manager
9. 4. Приоритетное тестирование и оптимизация производительности вашего мобильного телефона
10. (A) Проверьте и оптимизируйте скорость вашего мобильного сайта электронной коммерции
11. Торговый Центр: Мерчология
12. (B) Затем проверьте скорость страницы рабочего стола
13. (C) Получите накопительный балл
14. (D) Оцените эффективность своего сайта по оставшейся оптимизации
15. Улучшение скорости на Shopify Plus
16. 5. Используйте всплывающее окно быстрого просмотра Windows экономно
17. обнаружение
18. Решение
19. 6. Остерегайтесь чрезмерных петель жидкости
20. Решение
21. 7. Уменьшить размер миниатюрного изображения
22. Решение
23. Расширенные настройки
24. 8. Облегчить на главной странице слайды героя
25. Решение
26. 9. Взвесьте преимущества установки другого приложения
27. Решение
28. 10. Сжимайте и уменьшайте изображения
29. 11. Сократите свой код
30. 12. Уменьшите перенаправления и неработающие ссылки
31. Заключительные мысли по улучшению производительности сайта электронной коммерции

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

• Шопифи Плюс помогла за несколько дней до самого напряженного отпуска ААР улучшить время загрузки, удвоить коэффициент конверсии и прибыль
• Прежде чем быть представленным в журнале O , гляделки переформатировал, сэкономил 100 тыс. долл., оптимизировал скорость сайта и увеличил конверсию на 25-30%
• Mava Sports достигнут коэффициент конверсии ~ 7% и 3-кратное увеличение затрат на рекламу в Facebook после увеличения скорости страниц в 5 раз

Хотите узнать о похожих результатах? Продолжайте читать ... или запланировать демонстрацию Shopify Plus сегодня ,

В соответствии с Гарри Шум , бывший исследователь-специалист по скорости в Microsoft: «Двести пятьдесят миллисекунд, медленнее или быстрее, сейчас близки к магическому числу для конкурентного преимущества в Интернете».

Ставки высоки, и поэтому мы собрали почти исчерпывающий ресурс, чтобы помочь вам ...

12 способов повысить производительность сайта электронной коммерции и скорость страниц:

1. Используйте быстрый и надежный хостинг
2. Использование сети доставки контента (CDN)
3. Организуйте свое отслеживание с помощью Google Tag Manager
4. Приоритетное тестирование и оптимизация производительности вашего мобильного телефона
5. Используйте всплывающее окно быстрого просмотра Windows экономно
6. Остерегайтесь чрезмерных петель жидкости
7. Уменьшить размер миниатюрного изображения
8. Облегчить на главной странице слайды героя
9. Взвесьте преимущества установки другого приложения
10. Сжатие и уменьшение изображений
11. Минимизируйте свой код универсально
12. Уменьшить перенаправления и удалить неработающие ссылки

Скачать все 12 шагов в качестве руководства

Как скорость страницы влияет на электронную коммерцию?

Скорость страницы (или время загрузки) относится к общему количеству времени, которое требуется для загрузки содержимого по определенному URL-адресу. Скорость сайта, напротив, представляет собой среднее значение различных служб времени загрузки, таких как Google, для оценки сайта в совокупности.

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

Когда дело доходит до ожиданий клиентов и производительности сайта:

• 79% клиентов, которые «недовольны» эффективностью веб-сайта, реже покупают с этого сайта
• 64% пользователей смартфонов ожидают загрузки сайта за четыре секунды или меньше
• 47% онлайн-покупателей ожидают, что веб-страницы будут загружаться в течение двух секунд или меньше

Возможно, еще более поразительная разница в электронной коммерции:

• Если сайт зарабатывает 100 000 долларов в день, улучшение за одну секунду приносит дополнительно 7 000 долларов в день.
• Одна секунда задержки времени загрузки обычно равна потере 11% просмотров страниц.
• Задержка в одну секунду также означает общее снижение конверсии на 7%.

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

Во-первых, медленные сайты производят медленные целевые страницы. Медленные целевые страницы снижают показатель качества Google. А более низкие показатели качества Google означают более высокую цену за клик.

Со вторым, что эксперты SEO давно подозревали относительно органического рейтинга, Google недавно обнародовал то, что они назвали «Обновление скорости» :

«Несмотря на то, что в течение некоторого времени при ранжировании использовалась скорость, этот сигнал был сфокусирован на поиске на рабочем столе. Сегодня мы объявляем, что, начиная с июля 2018 года, скорость страницы станет фактором ранжирования для мобильных поисков ».

С чего начать?

Аналитика для повышения производительности сайта и скорости страницы

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

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

Итак, что вы можете сделать, чтобы увеличить производительность и скорость сайта электронной коммерции?

Скачать все 12 шагов в качестве руководства

1. Используйте быстрый и надежный хостинг

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

Список фирменных ритейлеров, испытывающих сбои на сайтах электронной коммерции во время Черной пятницы - таких как Best Buy, Lowes, Macy's и т. Д. - продолжает расти с каждым годом. Помимо плохой рекламы, потерянные продажи из-за простоя могут быть болезненными для восприятия.

По словам ITIC опрос :

81% респондентов указали, что 60 минут простоя обходятся их бизнесу в 300 000 долларов.

Некоторые факторы, которые следует учитывать при исследовании требования к платформе хостинга включают:

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

Зачем начинать с хостинга? Так как …

Торговый центр: Бомбас

когда Bombas впервые стали показывать на таких громких телешоу, как Shark Tank нагрузка на сайт электронной коммерции быстро возросла с 500 ежедневных транзакций до 5000.

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

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

Перепрофилирование в Shopify Plus придало команде Bombas уверенность в том, что сайт электронной коммерции будет масштабироваться и постоянно работать и работать во время резких скачков трафика, таких как будущие перезапуски Shark Tank.

Что касается «Черной пятницы», то в понедельник Дэвид Хит, один из основателей Bombas, объясняет:

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

Делаем ли мы 500 или 5000 заказов в день, Shopify Plus автоматически масштабируется вместе с нами, и нам не нужно делать ничего лишнего.

Чем объясняется разница?

Благодаря своей облачной инфраструктуре - в отличие от локального подхода Magento - Shopify Plus не только поддерживает 99,98% общего времени безотказной работы, но и загружает наши витрины 2.97X быстрее, чем другие платформы SaaS, такие как BigCommerce и аналитики предполагают Оформление заказа до 40% быстрее ,

Кроме того, продавцы в Shopify обрабатывали 1,1 млн. Долл. США в минуту на пике Black Friday Cyber ​​Monday.

Для полной проверки BFCM, проверьте наш Праздничная инфографика онлайн-покупок: данные и выводы из Черной пятницы, Кибер понедельника в этом году и в последующий период

Как Грег Меррелл, соучредитель упрощенный - Партнеры по решениям Shopify Plus, специализирующиеся на продажах флэш-памяти в больших объемах и с большим трафиком, - говорит:

«Shopify Plus является единственной платформой, которой мы доверяем, чтобы справляться с огромными скачками трафика и транзакций, приходящими из Доброго утра Америки, The View и других флеш-продаж, транслируемых на национальном уровне»

«Имея более тысячи успешных продаж флэш-памяти, мы можем однозначно порекомендовать Shopify Plus для всех ваших нужд с высоким трафиком».

2. Используйте сеть доставки контента (CDN)

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

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

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

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

Shopify предоставляет продавцам CDN мирового класса Fastly без каких-либо дополнительных затрат. Это позволяет магазинам Shopify появляться практически мгновенно в любой точке мира, особенно в США, Великобритании, регионе APAC (Азия, Австралия и Новая Зеландия), а также в Южной Америке и на юге Африки.

Вместо того, чтобы создавать тысячи маленьких рассеянных точек присутствия (POP) - как это делали старые CDN в эпоху коммутируемого доступа - быстро использует принципиально иной подход:

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

Изображение через Fastly Network Map (март 2018)

В качестве резервирования Shopify также предоставляет доступ к CDN Akamai, которую компания называет «Media Delivery Network»:

CDN - это как увеличение скорости, так и снижение затрат. Как объясняет владелица Red Dress Boutique Диана Харбор:

«Годовая лицензия на Magento Enterprise начинается примерно с 50 000 долларов и увеличивается. Хостинг стоил нам еще 6000 долларов в месяц, а CDN - 2000 долларов в месяц. Получение нашей лицензии, хостинга и CDN от Shopify Plus позволило нам сэкономить около 100 000 долларов в год по сравнению с Magento ».

Как работает CDN от Shopify

Shopify сообщает CDN, что ваши активы - такие как изображения, JS и CSS - менялись всякий раз, когда вы делаете это со своей стороны.

Что касается визуального контента, который часто является причиной низкой производительности, Shopify использует фильтр asset_url и автоматически добавляет номера версий ко всем генерируемым URL-адресам. Например, номер версии, добавленный в конец URL-адреса, может выглядеть следующим образом:? V = 1384022871

Если вы ссылаетесь на изображение без использования фильтра asset_url и загружаете новую версию того же контента, то ваш интернет-магазин может не перейти на новую версию в течение дня или дольше. Если вы ссылаетесь на контент непосредственно в своем CSS, то URL-адрес будет статическим и не будет содержать версию ресурса, которая автоматически обновляется Shopify.

Чтобы обновления происходили автоматически, измените синтаксис CSS, чтобы включить asset_url фильтр. Для получения информации обо всех фильтрах URL, которые используются для извлечения ресурсов, ознакомьтесь с обзором на Shopify Справочный центр ,

Стандартизированная CDN позволяет продавцам Shopify Plus использовать «бэкэнд для автопилота» своего веб-сайта, чтобы они могли сосредоточиться на других бизнес-приоритетах, таких как максимизация продаж и успешный маркетинг. Вали Ветан, соучредитель Mava Sports говорит это лучше всего:

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

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

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

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

Кроме того, ваши разработчики, ИТ-специалисты или специалисты по маркетингу также тратят время и ресурсы на развертывание, тестирование и мониторинг тегов в вашей системе MarTech. Как nChannel объясняет:

«Добавление, обновление и поддержание всех этих тегов стало обременительным для разработчиков, поэтому такие поставщики, как Google, создали системы управления тегами для упрощения работы. Менеджер тегов Google упрощает применение JavaScript на вашем сайте ».

Система управления тегами (TMS), такая как Google Tag Manager, объединяет все ваши теги MarTech в один запрос JavaScript.

В соответствии с Инспектор тегов это помогает «уменьшить количество требуемых внешних вызовов… и делает этот запрос асинхронным (в фоновом режиме, позволяя загружать остальную часть вашего сайта независимо от результата ответа)». Аналогично, если сбой тега приводит к тому, что ваш сайт переходит вниз, наличие TMS позволяет быстро удалить метку, что сэкономит вам часы разочарования и, возможно, миллионы долларов.

диаграмма из ConversionXL ниже приведена визуализация того, как TMS может ускорить загрузку вашей страницы:

Перед использованием Google Tag Manager, Раньше Airbnb занимало два-три дня его развертывание тегов и процесс обеспечения качества. «С помощью диспетчера тегов Google требуется около часа от получения тега до тестирования, от тестирования до развертывания. Это экспоненциально лучше », - говорит Мона Ганди, инженер-программист в Airbnb. Airbnb теперь может похвастаться «8% улучшением времени загрузки страницы».

Внимательно рассмотрите каждый инструмент, который вы добавляете в Google Tag Manager

Креативное агентство, Цифровой предупреждает что, хотя Google Tag Manager чрезвычайно полезен для экономии вашего времени и ускорения работы вашего сайта электронной коммерции, важно «задавать вопросы каждому добавленному инструменту, чтобы следить за тем, как он влияет на скорость вашей страницы и пользовательский опыт».

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

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

Точно так же, чтобы его сайт загружался почти в 5 раз быстрее, Шопифи Плюс купец Мава Спортс «Удалил как можно больше приложений и плагинов, не ставя под угрозу пользовательский опыт ».

Хорошая новость - один фрагмент кода - все, что вам нужно для управления всеми вашими тегами магазина Shopify Plus в одном месте с помощью Google Tag Manager. Чтобы узнать больше, обратитесь к рекомендации в справочном центре Shopify Plus , Если вам нужна визуальная демонстрация, Мера Школа предоставляет бесплатное практическое руководство:

4. Приоритетное тестирование и оптимизация производительности вашего мобильного телефона

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

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

Google недавно обучил глубокую нейронную сеть - «компьютерную систему по образцу человеческого мозга и нервной системы» - и обнаружил…

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

Над Черная пятница Кибер понедельник На Shopify приходилось 64% всех продаж, что на 10% больше по сравнению с аналогичным периодом прошлого года. Эта тенденция будет продолжаться в будущем, с Ожидается, что продажи мобильной коммерции к 2020 году достигнут 250 миллиардов долларов в год. ,

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

(A) Проверьте и оптимизируйте скорость вашего мобильного сайта электронной коммерции

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

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

Торговый Центр: Мерчология

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

«Разве не было бы замечательно, если бы заказ с мобильного устройства был таким же быстрым и простым, как заказ с настольного компьютера или планшета?» - спросил вице-президент по маркетингу Нолан Гудман из своей команды.

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

Через два месяца после запуска обновленного мобильного сайта в сентябре 2016 года Merchology достигла впечатляющих результатов:

• Увеличение прибыли на 340% в годовом сопоставлении с каждого мобильного устройства
• 40% увеличение их конверсии мобильных

«Простота стимулирует продажи независимо от устройства. Мы упростили заказ и оформление заказа независимо от того, использует ли клиент настольный компьютер, планшет или мобильное устройство ».

Нолан Гудман, вице-президент по маркетингу в Merchology

(B) Затем проверьте скорость страницы рабочего стола

PageSpeed ​​Insights также предоставит вам отчет для рабочего стола с похожими - хотя и не идентичными - предложениями. Опять же, не забудьте сравнить эффективность своего сайта с показателями ваших главных конкурентов.

Помните, что 0,25 секунды - это все, что составляет конкурентное преимущество.

(C) Получите накопительный балл

GTMetrix дает вашему сайту оценку от А до F с точки зрения скорости, объединяя данные из Yslow и PageSpeed ​​Insights. Он также предлагает отчет о производительности, который поможет вам проанализировать ключевые проблемы, требующие оптимизации.

(D) Оцените эффективность своего сайта по оставшейся оптимизации

Pingdom.com должен быть ваш последний тест. Он будет оценивать эффективность вашего сайта (от 0 до 100%).

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

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

Улучшение скорости на Shopify Plus

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

Следующие советы были созданы специально для продавцов Shopify Plus Джонатаном Синклером из команды Merchant Success Team.

Сторонние инструменты, такие как GTMetrix и PageSpeed, настроены по-разному. Инструменты, которые обеспечивают синхронизацию «загрузки страницы», должны выбирать один конкретный временной маркер - например, «время до первого байта» (TTFB) - в своих результатах.

Тем не менее, они не все выбирают одну и ту же конечную точку. Таким образом, в то время как один инструмент может сказать вам 5,14 секунды, другой может сказать, что это 11,80 секунды. Вот почему использование различных измерений имеет решающее значение.

Кроме того, эти инструменты не были специально созданы для сканирования и анализа сайта Shopify.

Давайте подробнее рассмотрим некоторые наиболее распространенные проблемы со скоростью страниц в магазинах Shopify и обсудим, как их исправить:

Скачать все 12 шагов в качестве руководства

5. Используйте всплывающее окно быстрого просмотра Windows экономно

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

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

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

Проблема с этим подходом состоит в том, что он может фактически препятствовать работе клиента на вашем сайте электронной коммерции:

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

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

Часто быстрый просмотр всплывающих реализаций (встроенных в тему или из приложения) будет предварительно загружать всю информацию со всей страницы продукта на случай, если посетитель нажмет кнопку «Быстрый просмотр».

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

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

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

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

обнаружение

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

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

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

Решение

• Используйте AJAX, чтобы получить информацию о продукте, как только посетитель нажмет на всплывающую кнопку «Быстрый просмотр», или
• Сохраните ограниченный набор информации о продукте в качестве атрибутов данных в элементе сетки продукта, затем создайте HTML и динамически открывайте его с помощью JavaScript

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

6. Остерегайтесь чрезмерных петель жидкости

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

Итерация цикла for является одним из тех примеров, которые могут повлиять на продавцов Shopify Plus. Это происходит, когда системе приходится зацикливать (или сканировать, или искать) все продукты в коллекции, чтобы найти определенное условие, будь то тег, цена и т. Д.

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

Эта проблема обычно встречается в двух случаях:

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

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

Итак, еще раз, просто знайте, как они используются и как они влияют на время загрузки.

Решение

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

Далее технологический партнер Shopify Plus Findify обнаружил способы обеспечения расширенной фильтрации коллекций без ущерба для времени загрузки.

Вот как компания сократила время загрузки коллекции из 30 000 продуктов с 15 секунд до 2,5, что привело к колоссальному увеличению конверсии на 20% для клиентов Shopify Plus:

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

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

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

Это много движущихся частей!

Лучшим решением является использование простого product.options_with_values петля. Для более подробного объяснения того, как работают язык шаблонов и жидкие циклы Shopify, проверить этот пост ,

7. Уменьшить размер миниатюрного изображения

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

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

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

Решение

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

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

Расширенные настройки

Ваша тема также может быть настроена на использование:

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

8. Облегчить на главной странице слайды героя

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

Решение

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

Если вам абсолютно необходимо использовать ползунок, то обязательно следуйте UX лучшие практики чтобы извлечь из них как можно больше пользы, сделайте так, чтобы максимум от двух до трех слайдов, и используйте srcset или же Ленивая нагрузка в качестве всеобъемлющего.

9. Взвесьте преимущества установки другого приложения

Большинство файлов сценариев / CSS для приложений, загружаемых с помощью администратора Shopify Plus, вставляются в <head> вашего файла theme.liquid в {{content_for_header}}.

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

Проблема заключается в том, что иногда приложение создается таким образом, что странице требуется загрузить код (в основном JavaScript и CSS), прежде чем оно сможет продолжить загрузку содержимого, расположенного далее вниз по странице (т. Е. Изображений и текста).

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

«Ориентируясь на эту разницу между более быстрой загрузкой в ​​сравнении с практической и коммерческой ценностью приложений, - объясняет Джейсон Боуман, инженер по решениям и руководитель группы APAC в Shopify Plus, - вот почему мы выполняем асинхронную загрузку сценариев, добавленных с помощью API-интерфейса тега сценария, поэтому загрузка страницы не требуется». Я остановился

«Однако <scripts>, добавленный непосредственно в <head>, часто оказывает непосредственное влияние на производительность».

Главный вопрос, который вы должны задать себе, когда речь идет о каждом и каждом устанавливаемом вами приложении: перевесит ли добавленная стоимость этого приложения возможное замедление скорости загрузки?

Решение

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

Тем временем приложение работает в фоновом режиме, что снижает производительность вашего сайта электронной коммерции.

Пройдите и удалите все приложения, которые вы не используете. Затем запустите тесты скорости страницы с помощью таких инструментов, как GTmetrix или PageSpeed ​​Insights, или даже ручной тест с использованием инструментов разработчика Chrome - просто перейдите на вкладку «Сеть» и перезагрузите страницу.

Команда Plus Merchant Success настоятельно рекомендует вам обратиться за помощью к разработчику, чтобы найти и удалить ненужное и оскорбительное приложение.

10. Сжимайте и уменьшайте изображения

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

Для новых изображений ...

Разработчики Shopify также рекомендуют использовать TinyJPG или же TinyPNG для этой задачи.

Для лишних изображений ...

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

Также обратите внимание на пустые источники изображений - <img src = ''> - в вашем коде. Это вызывает чрезмерную нагрузку на браузер для отправки еще одного запроса на ваши серверы.

Простое решение, которое вы можете использовать, называется « спрайтов ”, Которые объединяют несколько изображений, таких как значки, в одно, ограничивая количество запросов к изображениям на сервере и повышая скорость вашей страницы. Загрузка ваших изображений в бесплатный инструмент, такой как SpritePad быстро создаст спрайты и предоставит код для вас.

11. Сократите свой код

Плохо закодированные HTML, CSS и JavaScript на вашей веб-странице могут серьезно снизить производительность вашего сайта.

Для простого исправления разработчики Google создали процесс, известный как «минификация», и предлагают список HTML, CSS и специфичные для JavaScript ресурсы помогать. Более подробное руководство предоставлено Кангакс / HTML-минификатор на GitHub :

Примечание: Shopify автоматически обрабатывает минификацию SCSS.liquid. Мы также предлагаем управляющие теги пробельные символы чтобы помочь разработчикам темы убрать некоторые помехи в отображаемом HTML.

12. Уменьшите перенаправления и неработающие ссылки

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

Для перенаправлений ...

Хотя перенаправления полезны для отправки посетителей на новые URL-адреса, их следует использовать с осторожностью. 302 перенаправления, которые указывают, что страница была временно перемещена, могут повредить вашему SEO, вызвать дополнительные HTTP-запросы и задержать передачу данных. Вместо этого используйте « кэшируемый редирект »Или встроенную функцию переадресации Shopify - по умолчанию 301 - на панели навигации.

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

За неработающие ссылки ...

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

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

Заключительные мысли по улучшению производительности сайта электронной коммерции

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

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

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

Скачать все 12 шагов в качестве руководства

Похожие

Комментарии