Publicado em 19 de março de 2025
A T-Mobile é uma das principais empresas de telecomunicações dos Estados Unidos, oferecendo ampla cobertura de rede e conectividade 5G rápida.
Ao analisar as Core Web Vitals de usuários reais, a T-Mobile percebeu que as melhorias nas Core Web Vitals podem afetar significativamente a experiência do usuário e as métricas comerciais.
Em um esforço contínuo para refinar a presença digital, a T-Mobile melhorou as Core Web Vitals do site, principalmente a Largest Contentful Paint (LCP), para melhorar a experiência do usuário e, consequentemente, as principais métricas de negócios.
Aumentar a conscientização sobre a performance da Web com dados
Percebendo a necessidade crescente de garantir ótimas experiências do usuário na Web, as equipes de SEO e produto da T-Mobile iniciaram uma iniciativa conjunta para melhorar o desempenho do site. A primeira etapa foi colocar as Core Web Vitals em primeiro plano nas discussões com as partes interessadas, garantindo que elas fossem reconhecidas como uma prioridade máxima, uma dificuldade comumente enfrentada pelas equipes de desenvolvimento em muitas empresas.
Para resolver esse problema, a T-Mobile recorreu a uma estratégia baseada em dados. Sabendo que os dados de laboratório do Lighthouse e os dados dos relatórios de UX do Chrome (CrUX) só poderiam oferecer uma visão parcial da narrativa de desempenho, eles incorporaram a biblioteca JavaScript de web vitals às propriedades da Web da T-Mobile para capturar e analisar diretamente os dados de desempenho, conhecidos como dados de campo, de usuários reais.
Ao integrar os dados de Core Web Vitals do campo ao conjunto de ferramentas de análise, a T-Mobile descobriu vários pontos de dados importantes, incluindo:
- Impacto na experiência do usuário: os visitantes do T-Mobile.com têm mais probabilidade de rejeição quando as páginas demoram mais para carregar.
- Impacto para a empresa: as taxas de conversão do T-Mobile.com diminuem quando as páginas demoram mais para carregar.
Os dados mostraram claramente a correlação entre a performance do site da T-Mobile e as métricas de negócios.
Ao estimar o impacto da receita em 100 segmentos de 100 milissegundos de LCP, a equipe conseguiu chamar a atenção da liderança, iniciando uma força-tarefa multidisciplinar para melhorar o desempenho do site. Ao apresentar dados claros e medir a oportunidade, as equipes de SEO e Produto da T-Mobile comunicaram de forma eficaz a importância de melhorar as Core Web Vitals.
Como aumentar as melhorias de desempenho da Web para ter o máximo impacto
Para resolver os desafios de desempenho de forma abrangente, a equipe da T-Mobile realizou uma série de melhorias técnicas com foco na capacidade de escalonamento. Esses esforços se concentraram em otimizar componentes essenciais e aproveitar tecnologias para garantir ganhos de desempenho sustentáveis nas plataformas digitais.
Impacto na experiência do cliente
Os esforços para melhorar a performance do site resultaram em uma redução de 42% na maior exibição de conteúdo (LCP) em geral:
Essa melhoria teve vários impactos positivos na experiência do usuário, incluindo:
Impacto nos negócios
Tempos de carregamento mais rápidos também contribuíram para um fluxo de compra mais eficiente, com a taxa de conversão de visitas de possíveis clientes com intenção de compra melhorando 60% no mesmo período.
Principais melhorias de performance que impulsionaram a T-Mobile
Confira a seguir uma lista detalhada das principais iniciativas e seus respectivos impactos:
Caching e refatoração de APIs
As APIs, incluindo as APIs de produtos e promoções, foram armazenadas em cache e reestruturadas para melhorar os tempos de resposta e reduzir a carga do servidor. O descarregamento em uma rede de fornecimento de conteúdo (CDN) para otimização de armazenamento em cache contribuiu significativamente para essas melhorias.
Armazenar recursos estáticos em cache
Recursos estáticos, incluindo JavaScript, folhas de estilo e bibliotecas de cliente, foram armazenados em cache para reduzir os tempos de carregamento. O uso do armazenamento em cache da CDN e as configurações otimizadas de cache melhoraram a velocidade de entrega e reduziram a carga do servidor. Essa otimização foi fundamental para melhorar a performance geral do site.
Otimização de componentes de imagem
A equipe otimiza os componentes de imagem reduzindo os tamanhos, usando formatos modernos, como WebP, e implementando imagens responsivas para garantir a melhor qualidade com o menor tamanho de arquivo.
Pré-carregar e pré-buscar componentes
Os recursos essenciais foram pré-carregados e pré-buscados para garantir que eles estivessem disponíveis imediatamente quando necessário, o que reduziu o tempo de espera dos usuários e melhorou o tempo de carregamento da página.
Pré-conexões com domínios críticos e melhorias no script anti-flicker
A equipe implementou preconectividades em domínios críticos para estabelecer conexões antecipadas, reduzindo a latência para buscar recursos. Além disso, eles melhoraram o script anti-flicker para minimizar o piscar do conteúdo e garantir uma experiência do usuário mais tranquila.
Migração da plataforma Adobe Experience Manager (AEM)
A equipe migrou para uma versão mais recente da plataforma de front-end, que oferecia melhores recursos de performance e melhorias na infraestrutura.
Migração de componentes angulares para componentes de fábrica do AEM
Os componentes do Angular foram migrados para componentes de fábrica do Adobe Experience Manager (AEM) para simplificar a arquitetura e melhorar a performance e a manutenção.
Principais otimizações da página de destino
As melhorias incluíram a otimização de carrosséis de imagens, o uso do webSDK da Adobe, a extensão do tempo de cache para mídia dinâmica, a compactação de payloads e a atualização de designs de imagens para melhorar os tempos de carregamento e a experiência do usuário.
Redução de erros em APIs
A equipe reduziu os erros em várias páginas importantes de e-commerce, garantindo uma entrega de dados mais confiável e melhorando as interações com os usuários.
Como cultivar uma cultura de performance da Web democratizando os dados
Para garantir a excelência na performance da Web, a T-Mobile implementou várias medidas importantes em toda a organização. Essas iniciativas foram criadas para democratizar o acesso aos dados de performance, educar e engajar nossa equipe, monitorar proativamente as Core Web Vitals e aplicar os padrões de performance em todas as versões do código. As estratégias a seguir descrevem como eles estão cultivando uma cultura de desempenho da Web, tornando os dados acessíveis, promovendo o aprendizado contínuo e estabelecendo práticas de governança robustas.
Democratização dos dados das Core Web Vitals
A T-Mobile usou painéis robustos do Looker Studio para tornar os dados de performance acessíveis a todos os membros da organização. Além disso, um wiki abrangente sobre a performance da Web orienta os membros da equipe a interpretar e usar os relatórios de Core Web Vitals de maneira eficaz.
Painel do Looker Studio da T-Mobile mostrando as métricas das Core Web Vitals em tempo real. Da esquerda para a direita, isso mostra:
- Velocímetro: percentil 75 de todos os eventos de LCP capturados no período selecionado.
- Gráfico de linhas: mostra a tendência diária das pontuações do 75º percentil no período selecionado.
- Gráfico de pizza: distribuição percentual das classificações "Bom", "Melhorias necessárias" e "Ruim" no período selecionado.
- Gráfico de linhas empilhadas: tendência diária da porcentagem de distribuição das classificações "Bom", "Melhorias necessárias" e "Ruim" no período selecionado.
Educação e engajamento contínuos
O gerente de produto e SEO realiza regularmente roadshows de performance da Web e sessões de transferência de conhecimento. Essas iniciativas educam e engajam a equipe mais ampla, promovendo um compromisso contínuo com a excelência na performance da Web.
Sistema de alerta para as Core Web Vitals
Um sistema de alerta foi criado para monitorar as Core Web Vitals de vários grupos de páginas. Quando as Core Web Vitals atingem um determinado limite de referência, um alerta de e-mail é enviado automaticamente às partes interessadas relevantes.
Requisitos de performance para versões de código
A T-Mobile também estabeleceu requisitos de desempenho para lançamentos de código. As páginas precisam atender a níveis específicos de desempenho no Lighthouse antes de serem lançadas, garantindo que os altos padrões de desempenho da Web sejam mantidos.
Com a implementação dessas medidas, a T-Mobile garante que a performance da Web continue sendo uma prioridade e continua promovendo uma cultura de melhoria contínua.
Agradecimentos
Agradecemos a todos que trabalharam na performance do site da T-Mobile e neste estudo de caso: 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 e Warren McNeel.
Este estudo de caso foi desenvolvido em colaboração entre a T-Mobile e os parceiros de soluções de clientes do Google, Ilya Motamedi, Dakota Deady e Christine Zanedis, cujos insights e suporte contribuíram para o sucesso dessa iniciativa.