Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

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

Краткое содержание этой статьи:

• Скорость страницы влияет на данные онлайн-торговли

• Как сравнить скорость вашего сайта со скоростью конкурентов

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

Скорость страницы влияет на данные онлайн-торговли

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

Как проанализировать взаимосвязь между производительностью веб-сайта и данными о бизнес-конверсиях

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

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

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

Чем ваш сайт отличается от конкурентов?

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

ТвойКонкурентный бенчмаркинг Панель управления также позволяет детализировать информацию и сосредоточиться на таких вещах, как создание страниц. Эта страница отображается в два раза быстрее, чем ваша... что они сделали по-другому? У них больше JavaScript? меньше? Вы сделали 400 запросов, а они сделали только 80? Вот где это можно узнать.

Тесты скорости загрузки страниц — это общедоступная информационная панель, которая показывает вам моментальную картину текущей деятельности ведущих ритейлеров в США, ЕС, Великобритании и Японии.

Начало работы с оптимизацией производительности

Чтобы обеспечить отличный и быстрый онлайн-опыт, начните с того, что задайте себе два вопроса:

• Почему моя страница кажется пользователям медленной?

• Что я могу сделать?

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

Что заставляет вашу веб-страницу замедляться? Подавляющее большинство проблем с производительностью вызвано четырьмя причинами:

• Третьи лица, такие как трекеры и анализаторы.

• таблица стилей

• Пользовательский шрифт

• Размер страницы, особенно размер изображения

сторонний скрипт

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

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

Что вы можете сделать: отслеживать производительность сторонних разработчиков.

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

Невозможно исправить то, что не измерено.Вот что мы создаем в SpeedCurveВыделенные сторонние информационные панелипричины, чтобы вы могли сразу увидеть, как работают третьи стороны, отслеживать отдельные сценарии иУстановите бюджет производительности.

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

тематическое исследование: M&S совершает революцию в производительности, фокусируясь на стороннем контенте

Размер изображения и страницы

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

Помимо оптимизации изображений (чтобы гарантировать, что вы не предоставляете пользователям 1 МБ ресурсов!), вам также следует убедиться, что ваши наиболее важные изображения (например, изображение основного продукта) отображаются как можно раньше.

Что вы можете сделать: создать бюджет производительности для показателей, связанных с изображениями.

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

Для изображений следует учитывать следующие показатели:

• Максимальная прорисовка контента. Это размер самого большого визуального элемента (изображения или видео) в области просмотра. LCP от GoogleМетрики базовой сетиВо-первых, это набор показателей для алгоритма поискового ранжирования Google, поэтому полезно его отслеживать.

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

• Запросы изображений — общее количество изображений на странице.

тематическое исследование: Как Zillow стал больше, быстрее и интереснее при ограниченном бюджете

таблица стилей

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

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

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

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

• Сколько таблиц стилей имеется на моей странице и сколько из них препятствуют отображению страницы?

• Это число увеличилось или уменьшилось?

• Насколько велики запросы CSS?

• Как таблица стилей будет вести себя для каждой из моих третьих сторон?

Пользовательский шрифт

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

Некоторые шрифты требуют большого количества кода CSS, а другие требуют большого количества JavaScript или внешнего хостинга — все это может значительно замедлить рендеринг страницы.

Что вы можете сделать: отслеживать размер шрифта и скорость рендеринга.

Помимо отслеживания размера шрифта и количества запросов, вы также можете использовать SpeedCurve для измерения момента завершения рендеринга первого элемента H1. (В SpeedCurve мы называем этот индикатор Hero H1.Время рендеринга героя один. ) Если на вашем веб-сайте используются пользовательские шрифты, эти шрифты, скорее всего, будут применены к копии H1, что делает этот показатель эффективным способом измерения того, насколько быстро отображаются пользовательские шрифты.

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

тематическое исследование: NerdWallet использует метрики рендеринга H1, чтобы увеличить скорость загрузки шрифтов на 30 %.