Fecha de publicación: 19 de marzo de 2025
T-Mobile es una empresa de telecomunicaciones líder en Estados Unidos que ofrece una amplia cobertura de red y una conectividad 5G rápida.
Cuando analizó los indicadores web esenciales de los usuarios reales, T-Mobile se dio cuenta de que las mejoras en las Métricas web esenciales pueden tener un impacto significativo en la experiencia del usuario y las métricas empresariales.
En un esfuerzo continuo por definir mejor su presencia digital, T-Mobile mejoró las Métricas web esenciales de su sitio web, en particular la pintura más grande del contenido (LCP), para mejorar la experiencia del usuario y, en consecuencia, las métricas comerciales clave.
Aumenta el conocimiento del rendimiento web con datos
Reconociendo la necesidad creciente de garantizar experiencias del usuario excelentes en toda la Web, los equipos de SEO y Producto de T-Mobile se embarcaron en una iniciativa conjunta para mejorar el rendimiento de su sitio web. El primer paso fue llevar las métricas web esenciales al frente de las conversaciones con las partes interesadas, lo que garantizaba que se reconociera como una prioridad principal, una dificultad que suelen enfrentar los equipos de desarrollo en muchas empresas.
Para abordar este problema, T-Mobile recurrió a una estrategia basada en datos. Sabiendo que los datos de laboratorio de Lighthouse y los datos de los informes de UX de Chrome (CrUX) solo podían ofrecer una vista parcial de la narrativa de rendimiento, incorporaron la biblioteca de JavaScript de web-vitals en las propiedades web de T-Mobile para capturar y analizar directamente los datos de rendimiento, conocidos como datos de campo, de usuarios reales.
Cuando integró los datos de las Métricas web esenciales del campo con su paquete de análisis, T-Mobile descubrió varios datos valiosos, como los siguientes:
- Impacto en la experiencia del usuario: Los visitantes de T-Mobile.com tienen más probabilidades de abandonar la página cuando las páginas tardan más en cargarse.
- Impacto en la empresa: Los porcentajes de conversiones de T-Mobile.com disminuyen cuando las páginas tardan más en cargarse.
Los datos fueron claros en cuanto a cómo se correlacionan el rendimiento del sitio web de T-Mobile y sus métricas comerciales.
Cuando estimó el impacto en los ingresos en segmentos de 100 milisegundos de la LCP, el equipo pudo captar la atención de los líderes y, así, iniciar un equipo de trabajo multifuncional para mejorar el rendimiento del sitio web. Cuando presentaron datos claros y midieron la oportunidad, los equipos de SEO y Producto de T-Mobile comunicaron de manera eficaz la importancia de mejorar las Métricas web esenciales.
Escala las mejoras de rendimiento web para obtener el máximo impacto
Para abordar de forma integral los desafíos de rendimiento, el equipo de T-Mobile realizó una serie de mejoras técnicas teniendo en cuenta la escalabilidad. Estos esfuerzos se enfocaron en optimizar los componentes críticos y aprovechar las tecnologías para garantizar mejoras continuas en el rendimiento de sus plataformas digitales.
Impacto en la experiencia del cliente
Los esfuerzos por mejorar el rendimiento del sitio generaron una disminución del 42% en el procesamiento de imagen con contenido más grande (LCP) en general:
Esta mejora tuvo varios impactos positivos en la experiencia del usuario, como los siguientes:
Impacto en el negocio
Los tiempos de carga de página más rápidos también contribuyeron a un flujo de compra más eficiente, ya que el porcentaje de conversiones de las visitas de clientes potenciales con intención de compra mejoró un 60% durante el mismo período.
Mejoras clave en el rendimiento que impulsaron a T-Mobile
A continuación, se incluye una lista detallada de las iniciativas clave y sus respectivos impactos:
Caching y refactorización de la API
Las APIs, incluidas las de Productos y Promociones, se almacenaron en caché y se refactorizaron para mejorar los tiempos de respuesta y reducir la carga del servidor. La transferencia de carga a una red de distribución de contenidos (CDN) para la optimización del almacenamiento en caché contribuyó significativamente a estas mejoras.
Almacenamiento en caché de recursos estáticos
Los recursos estáticos, incluidos JavaScript, los diseños de página y las bibliotecas de clientes, se almacenaron en caché para reducir los tiempos de carga. El uso del almacenamiento en caché de CDN y la configuración de caché optimizada mejoraron la velocidad de entrega y redujeron la carga del servidor. Esta optimización fue fundamental para mejorar el rendimiento general del sitio.
Optimización de componentes de imagen
El equipo optimizó los componentes de imagen reduciendo los tamaños, usando formatos de imagen modernos como WebP y, además, implementando imágenes responsivas para garantizar la mejor calidad con el tamaño de archivo más pequeño.
Precarga y carga previa de componentes
Los recursos críticos se precargaron y se recuperaron previamente para garantizar que estuvieran disponibles de inmediato cuando fuera necesario, lo que redujo el tiempo de espera de los usuarios y mejoró los tiempos de carga de la página.
Conexiones previas a dominios críticos y mejoras en la secuencia de comandos contra el parpadeo
El equipo implementó preconexiones a dominios esenciales para establecer conexiones anticipadas, lo que redujo la latencia de recuperación de recursos. Además, mejoraron la secuencia de comandos antiparpadeo para minimizar el parpadeo del contenido y garantizar una experiencia del usuario más fluida.
Migración de la plataforma de Adobe Experience Manager (AEM)
El equipo migró a una versión más reciente de su plataforma de frontend, que ofrecía mejores capacidades de rendimiento y mejoras en la infraestructura.
Migración de componentes angulares a componentes de fábrica de AEM
Los componentes de Angular se migraron a componentes de fábrica de Adobe Experience Manager (AEM) para optimizar la arquitectura y mejorar el rendimiento y la capacidad de mantenimiento.
Optimizaciones clave de la página de destino
Entre las mejoras, se optimizaron los carruseles de imágenes, se usó Adobe webSDK, se extendió el tiempo de caché para el contenido multimedia dinámico, se comprimieron las cargas útiles y se actualizaron los diseños de las imágenes para mejorar los tiempos de carga y la experiencia del usuario.
Reducción de errores en las APIs
El equipo redujo los errores de varias páginas clave de comercio electrónico, lo que garantiza una entrega de datos más confiable y mejores interacciones de los usuarios.
Cómo cultivar una cultura de rendimiento web mediante la democratización de los datos
Para garantizar que se mantenga el compromiso con la excelencia del rendimiento web, T-Mobile implementó varias medidas clave en toda la organización. Estas iniciativas están diseñadas para democratizar el acceso a los datos de rendimiento, educar y motivar a nuestro equipo, supervisar de forma proactiva las métricas web esenciales y aplicar estándares de rendimiento para todas las versiones de código. En las siguientes estrategias, se describe cómo cultivan una cultura de rendimiento web haciendo que los datos sean accesibles, fomentando el aprendizaje continuo y estableciendo prácticas de gobernanza sólidas.
Democratización de los datos de Core Web Vitals
T-Mobile usó paneles sólidos de Looker Studio para que todos los miembros de la organización pudieran acceder a los datos de rendimiento. Además, un wiki integral de rendimiento web guía a los miembros del equipo para interpretar y utilizar los informes de Métricas web esenciales de manera eficaz.
Panel de Looker Studio de T-Mobile que muestra las métricas de Métricas web esenciales en tiempo real. De izquierda a derecha, se muestra lo siguiente:
- Velocímetro: Es el percentil 75 de todos los eventos de LCP capturados durante el período seleccionado.
- Gráfico de líneas: Es la tendencia diaria de las puntuaciones del percentil 75 en el período seleccionado.
- Gráfico circular: Muestra la distribución porcentual de las calificaciones Bueno, Necesita mejoras y Bajo en el período seleccionado.
- Gráfico de líneas apiladas: Es la tendencia diaria de la distribución porcentual de las calificaciones Buena, Debe mejorar y Mala en el período seleccionado.
Educación y participación continuas
El gerente de productos y SEO organiza con frecuencia presentaciones sobre el rendimiento web y sesiones de transferencia de conocimiento. Estas iniciativas educan y atraen al equipo más amplio, lo que fomenta un compromiso continuo con la excelencia del rendimiento web.
Sistema de alertas para las métricas web esenciales
Se estableció un sistema de alertas para supervisar las Métricas web esenciales de varios grupos de páginas. Cuando las Métricas web esenciales alcanzan un cierto umbral de referencia, se envía automáticamente una alerta por correo electrónico a las partes interesadas relevantes.
Requisitos de rendimiento para las versiones de código
T-Mobile también estableció requisitos de rendimiento para las versiones de código. Las páginas deben cumplir con niveles de rendimiento específicos en Lighthouse para que se puedan lanzar, lo que garantiza que se mantengan altos estándares de rendimiento web.
Con la implementación de estas medidas, T-Mobile puede garantizar que el rendimiento web siga siendo una prioridad y siga fomentando una cultura de mejora continua.
Agradecimientos
Agradecemos a quienes trabajaron en el rendimiento del sitio web de T-Mobile y en este caso de éxito: Kevin Lau, Monique Misrahi, Bill Dinger, Laura Mathisen, Suresh Gundu, Duke Fong, Amir Mohammadi, Liang Yeh, Jennifer Panke, Julia Edgar, Ejaz Malik, Damon Jochum, Will Fraley, Gene McKenna, Vinayak Hegde y Warren McNeel.
Este caso de éxito se desarrolló en colaboración entre T-Mobile y sus socios de soluciones para clientes en Google, Ilya Motamedi, Dakota Deady y Christine Zanedis, cuyas estadísticas y asistencia contribuyeron al éxito de esta iniciativa.