Um estudo de caso das mudanças que a equipe da Web do YouTube fez para melhorar o desempenho, aumentar as taxas de aprovação nas Core Web Vitals e melhorar as principais métricas de negócios.
A equipe do Chrome costuma falar sobre "como construir uma Web melhor", mas o que isso significa? As experiências na Web precisam ser rápidas, acessíveis e usar recursos do dispositivo no momento em que os usuários mais precisam. O dogfood faz parte da cultura do Google. Por isso, a equipe do Chrome fez uma parceria com o YouTube para compartilhar as lições aprendidas ao longo do caminho em uma nova série chamada "Como construir uma Web melhor". A primeira parte da série abordará como o YouTube criou uma experiência na Web mais rápida.
Como criar uma Web mais rápida
No YouTube, a performance está relacionada à velocidade de carregamento de vídeos e outros conteúdos, como recomendações e comentários, nas páginas da Web. A performance também é medida pela rapidez com que o YouTube responde a interações do usuário, como pesquisa, controle do player, marcações "Gostei" e compartilhamentos.
Mercados em ascensão, como Brasil, Índia e Indonésia, são importantes para o YouTube na Web para dispositivos móveis. Como muitos usuários nessas regiões têm dispositivos mais lentos e largura de banda de rede limitada, garantir uma experiência rápida e perfeita é um objetivo essencial.
Para oferecer uma experiência inclusiva a todos os usuários, o YouTube melhorou as métricas de desempenho, como as Core Web Vitals, usando o carregamento lento e a modernização de código.
Como melhorar as Core Web Vitals
Para identificar áreas de melhoria, a equipe do YouTube usou o Chrome User Experience Report (CrUX, na sigla em inglês) para analisar como usuários reais estavam interagindo com as páginas de exibição de vídeos e de resultados da pesquisa em dispositivos móveis em campo. Eles perceberam que as Core Web Vitals tinham muito espaço para melhorias, e a métrica de Maior exibição de conteúdo (LCP, na sigla em inglês) atingia entre 4 e 6 segundos em alguns casos. Isso foi substancialmente maior do que a meta de 2,5 segundos.
Para identificar áreas de melhoria, a equipe recorreu ao Lighthouse para fazer auditoria das páginas de exibição do YouTube, revelando uma pontuação baixa do Lighthouse (laboratório) com uma Primeira exibição de conteúdo (FCP, na sigla em inglês) de 3,5 segundos e uma LCP de 8,5 segundos.
Para otimizar a FCP e a LCP, a equipe do YouTube mergulhou em vários experimentos, resultando em duas grandes descobertas.
A primeira descoberta foi que eles poderiam melhorar o desempenho movendo o HTML do player de vídeo para cima do script que torna o player interativo. Os testes de laboratório indicaram que isso pode melhorar a FCP e a LCP de 4,4 segundos para 1,1 segundo.
A segunda descoberta foi que a LCP considera apenas imagens do pôster do elemento
<video>, não frames do stream de vídeo. Tradicionalmente, o YouTube otimiza o tempo até o início do vídeo. Então, para melhorar a LCP, a equipe também começou a otimizar a velocidade de exibição da imagem do pôster. Eles testaram algumas variações de imagens de pôsteres e escolheu a que teve a melhor pontuação nos testes com usuários. Como resultado desse trabalho, tanto a FCP quanto a LCP apresentaram uma melhora significativa, com a LCP de campo melhorando de 4,6 segundos para 2,0 segundos.
Embora essas otimizações tenham melhorado a LCP, a equipe percebeu que a definição atual da métrica de LCP não estava capturando totalmente, do ponto de vista do usuário, quando o "conteúdo principal" da página havia sido carregado, que é a meta da LCP.
Para lidar com essas preocupações, membros da equipe do YouTube fizeram uma parceria com a equipe do Chrome para descobrir como a métrica da LCP poderia ser melhorada para atender aos casos de uso. Depois de considerar a viabilidade e o impacto de algumas opções, as equipes encontraram uma proposta para considerar o tempo de exibição do primeiro frame de um elemento de vídeo como um candidato à LCP.
Quando essa mudança chegar ao Chrome, a equipe do YouTube vai continuar o trabalho de otimização para a LCP. Com a versão atualizada da métrica, essas otimizações terão um impacto mais direto nas experiências dos usuários reais.
Modularização com carregamento lento
As páginas do YouTube continham vários módulos que foram carregados com rapidez. Para otimizar a forma como mais de 50 componentes eram renderizados, a equipe criou um componente para o mapa do módulo JS que informaria ao cliente quais módulos carregar. Quando os componentes são marcados como lentos, os módulos JS são carregados mais tarde, o que reduz o tempo de carregamento inicial da página e a quantidade de JavaScript não utilizado enviada ao cliente.
No entanto, após a implementação do carregamento lento, a equipe percebeu um efeito de cascata em que os componentes desse tipo e as dependências correspondentes seriam carregados em momentos abaixo do ideal.
Para resolver esse problema, a equipe determinou o conjunto mínimo de componentes necessários em uma visualização e os agrupou em uma única solicitação de rede. Os resultados foram melhorias na velocidade da página, redução do tempo de análise do JavaScript e tempos de renderização inicial melhores.
Gerenciamento de estado em componentes
O YouTube estava enfrentando problemas de desempenho devido aos controles do player, especialmente em dispositivos mais antigos. A análise de código mostrou que o player, que permite que os usuários controlem recursos como a velocidade e o progresso da reprodução, ficou em excesso ao longo do tempo.
Cada evento de toque/movimento da barra de progresso acionou dois recálculos de estilo extras e levou 21,17ms durante as execuções de teste de desempenho no laboratório. À medida que novos controles eram adicionados ao longo do tempo, o padrão de controle descentralizado muitas vezes causava dependências circulares e vazamentos de memória, afetando negativamente o desempenho da página de exibição.
Para corrigir os problemas causados pelo controle descentralizado, a equipe atualizou a interface do jogador para sincronizar todas as atualizações, essencialmente refatorando o jogador para um componente de nível superior que transmitiria dados aos filhos dele. Isso garantiu apenas um ciclo de atualização (renderização) da interface para qualquer mudança de estado, eliminando atualizações encadeadas O novo evento de toque de movimento da barra de progresso do jogador não tem recálculos de estilo durante a execução do JavaScript e agora requer apenas 25% do tempo do jogador antigo.
Essa modernização de código também resultou em outras melhorias de desempenho, como tempos de carregamento do relógio em dispositivos antigos, menos reproduções abandonadas e número reduzido de erros não fatais.
Conclusão
Como resultado do investimento do YouTube em performance, as páginas de exibição carregam muito mais rápido. 76% dos URLs de sites para dispositivos móveis do YouTube agora ultrapassam os limites de métricas das Core Web Vitals em campo. Em computadores, a LCP do laboratório para a página de exibição foi reduzida de aproximadamente 4,6 segundos para 1,6 segundo. O desempenho da interação e da renderização do site, especialmente no player de vídeo do YouTube, está recebendo até 75% menos tempo gasto na execução do JavaScript do que antes.
As melhorias no desempenho do YouTube na Web no último ano também melhoraram as métricas de negócios, incluindo o tempo de exibição e os usuários ativos por dia. Com base nesse sucesso, planejamos continuar explorando outras maneiras de otimizar no futuro.
Na segunda parte desta série, "Como construir uma Web acessível", você vai ler como o YouTube tornou o site mais acessível para usuários de leitores de tela.
Um agradecimento especial a Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra e pelas equipes do YouTube e do Chrome pelas contribuições deles a este trabalho.