Улучшите мобильную электронную коммерцию: ускорьте работу своего веб-сайта

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

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

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

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

Оптимизируйте изображения для лучшего опыта мобильной электронной коммерции

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

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

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

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

В то время как стандартные инструменты дизайна, такие как Photoshop, позволяют дизайнерам оптимизировать изображения, существует ряд доступных сторонних сервисов, которые могут автоматически оптимизировать изображения на вашем веб-сайте. И Akamai, и Ampliance предлагают услуги по управлению изображениями, которые оптимизируют ваши изображения на основе набора настроенных правил. Они даже могут преобразовывать файлы jpeg в изображения WebP для поддержки браузеров, чтобы размеры файлов были как можно меньше.

В Envoy мы недавно опробовали менеджер изображений Akamai на веб-сайте клиента и увидели среднее уменьшение размера файла изображений PLP на 80% без заметного ухудшения визуального качества. Это привело к значительному снижению общего веса страниц PLP (страницы со списком продуктов) и немедленному резкому скачку их показателей Google Pagespeed. Если вы не хотите использовать для этого стороннюю службу, вы можете реализовать инструмент с открытым исходным кодом, такой как Thumbor, который является службой, которую вы устанавливаете локально на своих веб-серверах. Подобные инструменты автоматически оптимизируют ваши изображения на лету, а затем кэшируют их в репозитории.

Используйте CDN

Сети доставки контента (CDN) — это службы, которые кэшируют ваш контент в сети серверов, широко известной как периферия. Эти серверы обычно размещаются глобально во многих местах, чтобы гарантировать, что ваш контент кэшируется в месте, которое физически ближе к пользователям, чем ваши исходные серверы. Хотя CDN часто используются только для кэширования изображений, css, JavaScript и видео, вы также можете использовать их для кэширования полных HTML-страниц.

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

CDN также могут значительно снизить нагрузку на исходные серверы. Страница PLP часто является ресурсоемкой страницей, которую ваше веб-приложение может генерировать на лету. Он может содержать большое количество продуктов и аспектов, и все они требуют большой обработки. В большинстве случаев страница PLP не меняется от часа к часу, поэтому кэширование этой страницы на один час вполне возможно. Вместо того, чтобы потенциально создавать эту страницу тысячи раз в течение часа, ваш исходный сервер должен будет сделать это один раз. На самом деле это не совсем так, поскольку многие CDN будут иметь несколько независимых кэшей, но вы все равно можете ожидать разгрузку около 60%. Это означает, что исходные серверы и приложения будут получать на 60 % меньше запросов, чем без CDN.

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

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

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

Сведите к минимуму использование сторонних скриптов

Большинство веб-сайтов электронной коммерции B2C содержат множество сторонних ресурсов, начиная от сценариев отслеживания партнерской сети и заканчивая тестами MVT. Они могут содержать ленту Twitter, отслеживание Facebook или даже внешние шрифты. Эти внешние ресурсы могут значительно замедлить работу веб-сайта, если ими не управлять очень тщательно.

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

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

Гугл АМП

Проект Google Accelerated Mobile Pages — это технология веб-публикаций с открытым исходным кодом, целью которой является повышение скорости и производительности контента, специально доставляемого на мобильные устройства. Технология AMP, разработанная Google и запущенная в 2015 году, изначально предназначалась для доставки новостного контента. Страницы AMP очень легкие и, как правило, используют примерно в 10 раз меньше данных, чем их эквивалентные аналоги без AMP, и часто загружаются менее чем за 1 секунду. Однако есть большой улов. Страницы AMP поддерживают очень ограниченный набор функций и поэтому не подходят для многих приложений, особенно для богатых и функциональных веб-сайтов электронной коммерции.

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

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

Адаптируйтесь

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

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

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

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

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

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