Как Renault улучшила показатели отказов и конверсий, измерив и оптимизировав метод Largest Contentful Paint.

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

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

Измерение влияния Core Web Vitals на бизнес

Измерение в Google Analytics

Работая со своим глобальным партнером по обработке данных fifty-five, Renault создала библиотеку web-vitals, которая позволяет отправлять в Google Analytics все показатели Web Vitals от реальных пользователей таким образом, чтобы они точно соответствовали тому, как они измеряются Chrome и передаются в отчеты. другие инструменты Google.

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

Оптимизированный LCP сильно коррелирует с вовлеченностью пользователей и бизнес-метриками.

Команды выявили особенно сильную корреляцию между низким значением параметра Largest Contentful Paint (LCP),  показателями отказов и коэффициентами конверсии, как показано на графике ниже.

Набор данных фиксирует более 10 миллионов посещений в 33 странах за четыре месяца и показывает, как более низкие показатели LCP коррелируют с:

• Более низкими показателями отказов
• Более высокой конверсией (заполненением лид-формы)

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

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

Улучшение LCP на 1 секунду может привести к снижению показателя отказов на 14 процентных пунктов (ppt) и увеличению конверсии на 13%.

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

Подход Renault к масштабной оптимизации Core Web Vitals

С начала 2020 года на пяти ведущих европейских рынках бренда количество посетителей, у которых наблюдается быстрый LCP (менее 2,5 с), увеличилось в среднем на 22 п.п. для доменов Renault (с 51% до 73%).

С точки зрения платформы производительность была приоритетом в течение многих лет, и включение Core Web Vitals (CWV) в качестве ключевых показателей было гладким процессом. Центральные команды установили комплексное решение для мониторинга (с Google Lighthouse и Chrome UX Report API) и установили культуру производительности во всей организации. Было несколько стратегий оптимизации их одностраничного приложения, в том числе:

• Рендеринг на стороне сервера (SSR) для обеспечения быстрой первой отрисовки содержимого (FCP).
• Разделение кода для доставки только фрагментов JS и CSS, необходимых для целевой страницы (для улучшения LCP и FID).
• CDN с высоким уровнем кэширования ресурсов (включая Lambda@Edge для сортировки и удаления ненужных параметров запроса). Это помогло избежать недостатков SSR (более медленное время TTFB из-за серверных вычислений) и доставить контент ближе к конечному пользователю (для лучшего TTFB и LCP).
• Оптимизация сжатия с помощью brotli для уменьшения размера кода.
• HTTP2 для мультиплексирования запросов и ответов.
• Использование адаптивных изображений с поддержкой WebP и атрибутами srcset и size для предоставления пользователям наиболее подходящего размера и формата изображения.
• Отложенная загрузка изображений, видео и фреймов с использованием IntersectionObserver и FPO (маленькие миниатюры размером 1 КБ).
• Удаление блокирующих скриптов и настройка транспиляции для целей браузера, чтобы уменьшить размер файлов JS (избегая ненужных полифиллов).
• Уменьшение размера контейнера Диспетчера тегов Google для загрузки сторонних скриптов только тогда, когда это необходимо.
• Сокращение количества пользовательских шрифтов, использование форматов woff/woff2 с unicode-range и font-display:swap для уменьшения размеров файлов шрифтов и скорейшего отображения текста, даже если пользовательские шрифты еще не доступны.
• Предварительная загрузка основных изображений, которые часто являются элементами LCP.
• Команда все еще работает над будущими улучшениями, такими как:
• Server Push для улучшения FCP за счет более быстрой доставки CSS. (В режиме ожидания из-за отсутствия поддержки AWS и предложения об устаревании.
• Прогрессивная гидратация для улучшения FID.
• Поддержка модуля ES6 для обеспечения более быстрой работы за счет использования сборок ES6 для современных браузеров.

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

Это известные ограничения, которые исследуются командами разработчиков Chrome. Обновление метрики CLS уже выпущено для улучшения измерения SPA.

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

Местные правила, продвигающие оптимизацию производительности как общую ответственность

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

• Оптимизируйте локальный контейнер Диспетчера тегов Google, чтобы повысить производительность сайта. например, условно запускать определенные теги.
• Ограничьте размер видеоконтента, сжав его с помощью внутренних инструментов или разместив на внешней платформе (например, на YouTube).
• Не загружайте изображения через Диспетчер тегов Google.

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

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