Команда проанализировала данные 10 миллионов посещений целевых страниц и обнаружила сильную корреляцию между крупнейшей содержательной краской и коэффициентом конверсии.
Groupe Renault — французский многонациональный производитель автомобилей, присутствующий более чем в 130 странах. Для такой автомобильной группы, как Renault, эффективные брендовые сайты, привлекающие больше пользователей и повышающие конверсию, означают рост бизнеса. Все фирменные сайты компании направлены на обеспечение наилучшего пользовательского опыта в любом масштабе, сохраняя при этом гибкость контента и функций для локализованных сайтов. В этом контексте мониторинг производительности является ключевым моментом для команды по работе с клиентами, которая отвечает за разработку и поддержку глобальной платформы.
Измерение влияния Core Web Vitals на бизнес
Измерение в Google Analytics
Сотрудничая со своим глобальным партнером по данным пятьдесят пять, Renault создала библиотеку веб-показателей , которая позволяет отправлять в Google Analytics все показатели веб-показателей от реальных пользователей таким образом, чтобы они точно соответствовали тому, как они измеряются Chrome и передаются в Google. другие инструменты Google.
Следующий анализ демонстрирует набор данных, собранный с помощью этих инструментов за четыре месяца с декабря 2020 года по март 2021 года.
Оптимизированный LCP тесно коррелирует с вовлеченностью пользователей и бизнес-показателями.
Команды выявили особенно сильную корреляцию между низким показателем наибольшего количества контента (LCP) и благоприятными показателями отказов и показателями конверсии, как показано на визуализации ниже.
Набор данных охватывает более 10 миллионов посещений в 33 странах за четыре месяца и показывает, как более низкие показатели LCP коррелируют с:
- Более низкие показатели отказов
- Больше конверсий (заполненные формы для потенциальных клиентов)
Интересно, что, поскольку веб-сайт работает как одностраничное приложение (SPA), все эти показатели фиксируются только на целевых страницах. Данные показывают, что стоит оптимизировать сайт до тех пор, пока LCP не станет ниже 1 секунды. Сайты брендов группы никогда не могут быть слишком оптимизированы!
Этот набор данных не только показывает отрицательную корреляцию между LCP и бизнес-показателями, но также подчеркивает различия в производительности среди наиболее эффективных целевых страниц. В контексте этого веб-сайта значение LCP менее 1 секунды приводит к значительному увеличению конверсий и снижению количества отказов.
Эджа Ракотоариманана, консультант, пятьдесят пять лет.
Улучшение LCP на 1 секунду может привести к снижению показателя отказов на 14 процентных пунктов и увеличению конверсий на 13%.
| Улучшение LCP за 1 секунду | Результат |
|---|---|
| LCP около 1 с | +13% CVR |
| LCP менее 1,6 с | -14% отказов |
| LCP выше 1,6 с | -5 п.п. показатель отказов |
Подход Renault к масштабной оптимизации Core Web Vitals
С начала 2020 года на пяти крупнейших европейских рынках бренда количество посетителей, испытывающих быструю LCP (менее 2,5 с), увеличилось в среднем на 22 п.п. для доменов Renault (с 51% до 73%).
Вот как они к этому подошли.
Централизованная оптимизация SPA
С точки зрения платформы, производительность была приоритетом на протяжении многих лет, и включение Core Web Vitals в качестве ключевых показателей прошло гладко. Центральные команды создали комплексное решение для мониторинга (с помощью Google Lighthouse и Chrome UX Report API ) и установили культуру производительности во всей организации. Существовало несколько стратегий оптимизации одностраничного приложения, в том числе:
- Рендеринг на стороне сервера (SSR) для обеспечения быстрой первой отрисовки контента (FCP).
- Разделение кода для доставки только фрагментов JS и CSS, необходимых для целевой страницы (для улучшения LCP и FID).
- CDN с высоким уровнем кэширования ресурсов (включая Lambda@Edge для сортировки и удаления ненужных параметров запроса). Это помогло избежать недостатков SSR (более медленный TTFB из-за вычислений сервера) и доставить контент ближе к конечному пользователю (для улучшения TTFB и LCP).
- Оптимизация сжатия с помощью brotli для уменьшения размера кода.
- HTTP2 для включения мультиплексирования запросов и ответов.
- Использование адаптивных изображений с поддержкой WebP и атрибутами
srcsetиsizesдля предоставления пользователям наиболее подходящего размера и формата изображения. - Ленивая загрузка изображений, видео и iframe с помощью
IntersectionObserverи FPO (небольшие миниатюры размером 1 КБ). - Удаление блокирующих скриптов и настройка транспиляции для целей браузера , чтобы уменьшить размеры файлов JS (избегая ненужных полифилов).
- Уменьшение размера контейнера Диспетчера тегов Google, чтобы сторонние скрипты загружались только там и тогда, когда это необходимо.
- Уменьшение количества пользовательских шрифтов , использование форматов woff/woff2 с unicode-range и
font-display:swapдля уменьшения размеров файлов шрифтов и отображения текста как можно скорее, даже если пользовательские шрифты еще недоступны. - Предварительная загрузка главных изображений , которые часто являются элементами LCP.
Команда все еще работает над будущими улучшениями, такими как:
- Сервер стремится улучшить FCP за счет более быстрой доставки CSS. (В режиме ожидания из-за отсутствия поддержки AWS и предложения по прекращению поддержки .
- Прогрессивная гидратация для улучшения FID.
- Поддержка модулей ES6 для ускорения работы за счет использования сборок ES6 для современных браузеров.
Подход SPA может быть полезен для повышения производительности, поскольку при переходе между страницами пользователям не требуется полная перезагрузка страницы. При этом текущие методологии измерения Core Web Vitals в SPA могут восприниматься как недостаток, поскольку переходы маршрутов не измеряются; следовательно, сравнительно более быстрая загрузка страниц в течение сеанса из-за кэширования пользовательского интерфейса не учитывается. Это также затрудняет сравнение основных веб-показателей с веб-сайтом конкурента многостраничного приложения, где теплый кэш снижает показатели на каждой странице, которую пользователь просматривает во время сеанса. Для получения более подробной информации прочтите часто задаваемые вопросы по Web Vitals SPA .
Это известные ограничения , которые изучаются группами разработчиков Chrome . Обновление метрики CLS уже выпущено для улучшения измерения SPA.
Производительность требует постоянного мониторинга, поскольку на нее могут влиять различные технические команды. Несмотря на ограничения в том, как они измеряются в SPA, Core Web Vitals позволяют нам отслеживать влияние действий, предпринимаемых нашими командами. Надеемся, что переходы маршрутов будут приняты во внимание в ближайшее время!
Седрик Базюро, технический руководитель Renault
Местные правила, пропагандирующие оптимизацию производительности как общую ответственность
Результативность сообщается как о глобальной (центральной), так и о локальной ответственности. Команды собрали ряд лучших практик, которым должны следовать владельцы местного контента. Вот несколько примеров из этих рекомендаций:
- Оптимизируйте локальный контейнер Диспетчера тегов Google, чтобы повысить производительность сайта. например, условно запускать определенные теги.
- Ограничьте размер видеоконтента, сжимая его с помощью внутренних инструментов или размещая на внешней платформе (например, YouTube).
- Не загружайте изображения через Диспетчер тегов Google.
Глубокое понимание нашей цифровой эффективности является ключом к обеспечению постоянной оптимизации сайтов наших брендов. Подход нашей команды по работе с клиентами заключается в предоставлении глобальной платформы, которая положительно влияет на бизнес-результаты местных команд, одновременно предоставляя этим командам рекомендации и лучшие практики для поддержания производительности на высоком уровне.
Александр Перрюш, руководитель отдела производительности Renault
В заключение отметим, что производительность веб-сайта всегда была приоритетом для Renault, и платформа веб-сайта постоянно оптимизируется. Измерение основных веб-жизненных показателей наряду с бизнес-показателями позволило им продвигать эту тему как глобальную ответственность, а местные рекомендации дают командам возможность участвовать в этом полезном начинании.