Опубликовано: 19 марта 2025 г.
T-Mobile — ведущая телекоммуникационная компания в США, предлагающая обширное сетевое покрытие и быстрое подключение 5G.
Анализируя веб-показатели реальных пользователей, компания T-Mobile поняла, что улучшения в Core Web Vitals могут существенно повлиять как на пользовательский опыт, так и на бизнес-показатели.
В постоянных усилиях по совершенствованию своего цифрового присутствия компания T-Mobile улучшила основные веб-показатели своего веб-сайта, в частности, крупнейшую содержательную отрисовку (LCP) , чтобы улучшить взаимодействие с пользователем и, следовательно, улучшить ключевые бизнес-показатели.
Повышение осведомленности о производительности Интернета с помощью данных
Признавая растущую потребность в обеспечении отличного пользовательского опыта в Интернете, команды SEO и продуктов T-Mobile приступили к совместной инициативе, направленной на повышение производительности своего веб-сайта. Первым шагом было выдвинуть Core Web Vitals на передний план обсуждений с заинтересованными сторонами, гарантируя, что они будут признаны главным приоритетом — трудность, с которой обычно сталкиваются команды разработчиков во многих компаниях.
Чтобы решить эту проблему, T-Mobile обратилась к стратегии, основанной на данных. Полностью осознавая, что лабораторные данные Lighthouse и данные Chrome UX Reports (CrUX) могут дать лишь частичное представление о производительности , они включили библиотеку JavaScript web-vitals в веб-ресурсы T-Mobile, чтобы напрямую собирать и анализировать данные о производительности — известные как полевые данные — от реальных пользователей.
Интегрировав данные Core Web Vitals с мест со своим аналитическим пакетом, T-Mobile получила несколько важных данных, в том числе:
- Влияние на пользовательский опыт: посетители T-Mobile.com более склонны отказываться от посещения сайта, когда страницы загружаются дольше.
- Влияние на бизнес: коэффициент конверсии T-Mobile.com снижается, когда страницы загружаются дольше.
Данные ясно показали, как коррелируют производительность веб-сайта T-Mobile и его бизнес-показатели.
Оценив влияние на доход по 100-миллисекундным сегментам LCP, команда смогла привлечь внимание руководства и создать межфункциональную рабочую группу для улучшения производительности веб-сайта. Предоставляя четкие данные и оценивая возможности, команды SEO и продуктов T-Mobile эффективно донесли до нас важность улучшения основных веб-показателей.
Масштабирование улучшений веб-производительности для максимального эффекта
Чтобы комплексно решить проблемы с производительностью, команда T-Mobile предприняла ряд технических улучшений с учетом масштабируемости. Эти усилия были сосредоточены на оптимизации критически важных компонентов и использовании технологий для обеспечения устойчивого роста производительности на всех цифровых платформах.
Влияние на качество обслуживания клиентов
Усилия по улучшению производительности сайта привели к общему снижению показателя Largest Contentful Paint (LCP) на 42 %:
Это усовершенствование оказало несколько положительных эффектов на взаимодействие с пользователем, в том числе:
Влияние на бизнес
Более быстрая загрузка страниц также способствовала более эффективному потоку покупок: коэффициент конверсии потенциальных посещений с покупательским намерением за тот же период увеличился на 60%.
Ключевые улучшения производительности, которые продвинули T-Mobile вперед
Ниже приводится подробный список ключевых инициатив и их соответствующих последствий:
Кэширование и рефакторинг API
API-интерфейсы, включая API-интерфейсы продуктов и рекламных акций, были кэшированы и реорганизованы для улучшения времени отклика и снижения нагрузки на сервер. Разгрузка в сеть доставки контента (CDN) для оптимизации кэширования существенно способствовала этим улучшениям.
Кэширование статических ресурсов
Статические ресурсы, включая JavaScript, таблицы стилей и клиентские библиотеки, кэшировались для сокращения времени загрузки. Использование кэширования CDN и оптимизированных настроек кэша повысило скорость доставки и снизило нагрузку на сервер. Эта оптимизация сыграла решающую роль в повышении общей производительности сайта.
Оптимизация компонентов изображения
Команда оптимизировала компоненты изображений, уменьшив их размеры, используя современные форматы изображений, такие как WebP, и внедрив адаптивные изображения, чтобы обеспечить наилучшее качество при минимальном размере файла.
Предварительная загрузка и предварительная выборка компонентов
Критически важные ресурсы были предварительно загружены и предварительно выбраны, чтобы обеспечить их немедленную доступность в случае необходимости, что сократило время ожидания для пользователей и улучшило время загрузки страниц.
Предварительное подключение к критическим доменам и улучшения скриптов, предотвращающих мерцание
Команда внедрила предварительное подключение к критическим доменам для установления ранних подключений, сокращая задержку при получении ресурсов. Кроме того, они улучшили сценарий борьбы с мерцанием, чтобы минимизировать мигание контента и обеспечить более плавное взаимодействие с пользователем.
Миграция платформы Adobe Experience Manager (AEM)
Команда перешла на более новую версию своей интерфейсной платформы, которая предлагала более высокую производительность и улучшенную инфраструктуру.
Миграция компонентов angular на заводские компоненты AEM
Компоненты Angular были перенесены в заводские компоненты Adobe Experience Manager (AEM) для оптимизации архитектуры, повышения производительности и удобства обслуживания.
Ключевые оптимизации целевой страницы
Улучшения включали оптимизацию каруселей изображений, использование Adobe webSDK, увеличение времени кэширования для динамических мультимедиа, сжатие полезных данных и обновление дизайна изображений для увеличения времени загрузки и удобства работы пользователей.
Сокращение ошибок в API
Команда сократила количество ошибок на нескольких ключевых страницах электронной торговли, обеспечив более надежную доставку данных и улучшенное взаимодействие с пользователем.
Культивирование культуры веб-производительности путем демократизации данных
Чтобы гарантировать, что они остаются приверженными повышению производительности в Интернете, T-Mobile внедрила несколько ключевых мер во всей организации. Эти инициативы призваны демократизировать доступ к данным о производительности, обучать и вовлекать нашу команду, активно отслеживать основные веб-показатели и обеспечивать соблюдение стандартов производительности для всех выпусков кода. Следующие стратегии описывают, как они культивируют культуру веб-производительности, делая данные доступными, способствуя постоянному обучению и внедряя надежные методы управления.
Демократизация данных Core Web Vitals
T-Mobile использовала надежные информационные панели Looker Studio , чтобы сделать данные о производительности доступными для всех членов организации. Кроме того, комплексная вики-страница по веб-производительности помогает членам команды эффективно интерпретировать и использовать отчеты Core Web Vitals.
Панель инструментов Looker Studio от T-Mobile, демонстрирующая основные показатели веб-показателей в режиме реального времени. Слева направо это показывает:
- Спидометр : 75-й процентиль всех событий LCP, зафиксированных за выбранный диапазон дат.
- Линейный график : дневная тенденция показателей 75-го процентиля в выбранном диапазоне дат.
- Круговая диаграмма : процентное распределение оценок «Хорошо», «Требует улучшения» и «Плохо» за выбранный диапазон дат.
- Составной линейный график : дневная тенденция процентного распределения оценок «Хорошо», «Требует улучшения» и «Плохо» в выбранном диапазоне.
Постоянное образование и участие
Менеджер по продуктам и SEO регулярно проводит роуд-шоу по веб-производительности и сеансы передачи знаний. Эти инициативы обучают и вовлекают более широкую команду, способствуя постоянному стремлению к совершенству веб-производительности.
Система оповещений для основных веб-показателей
Была создана система оповещений для мониторинга основных веб-показателей для различных групп страниц. Когда основные веб-показатели достигают определенного базового порога, соответствующим заинтересованным сторонам автоматически отправляется оповещение по электронной почте.
Требования к производительности для выпусков кода
T-Mobile также установила требования к производительности для выпусков кода. Перед запуском страницы должны соответствовать определенным уровням производительности в Lighthouse, что обеспечивает поддержание высоких стандартов веб-производительности.
Реализуя эти меры, T-Mobile может гарантировать, что производительность Интернета останется приоритетом, и продолжит способствовать развитию культуры постоянного совершенствования.
Благодарности
Спасибо тем, кто работал над работой веб-сайта T-Mobile и над этим практическим примером: Кевину Лау, Моник Мисрахи, Биллу Дингеру, Лауре Матисен, Сурешу Гунду, Дюку Фонгу, Амиру Мохаммади, Лян Йе, Дженнифер Панке, Джулии Эдгар, Эджазу Малику, Дэймону Джокуму, Уиллу Фрэли, Джину МакКенне, Винаяку Хегде и Уоррену МакНилу.
Этот практический пример был разработан в сотрудничестве T-Mobile и их партнеров по решениям для клиентов из Google, Ильи Мотамеди, Дакоты Дэди и Кристин Занедис, чьи идеи и поддержка способствовали успеху этой инициативы.