Encontrar oportunidades de melhorar a experiência do usuário com as ferramentas da Web do Chrome.
Hoje, abordaremos novos recursos de ferramentas no Lighthouse, no PageSpeed e no DevTools para ajudar a identificar como seu site pode melhorar nas Métricas da Web.
Como uma atualização sobre as ferramentas, o Lighthouse é uma ferramenta automatizada de código aberto que melhora a qualidade das páginas da Web. É possível encontrá-la no pacote de ferramentas de depuração Chrome DevTools e executá-la em qualquer página da Web, pública ou que exija autenticação. O Lighthouse também pode ser encontrado no PageSpeed Insights, CI e WebPageTest.
O Lighthouse 7.x inclui novos recursos, como capturas de tela de elementos, para facilitar a inspeção visual de partes da IU que afetam as métricas de experiência do usuário (por exemplo, quais nós estão contribuindo para a mudança de layout).
Também disponibilizamos suporte para capturas de tela de elementos no PageSpeed Insights, possibilitando uma forma mais fácil de identificar problemas em páginas com desempenho único.
Medir as Principais métricas da Web
O Lighthouse pode medir sintéticamente as Principais métricas da Web, incluindo Maior exibição de conteúdo, Mudança de layout cumulativa e Tempo total de bloqueio (um proxy de laboratório para Latência na primeira entrada). Essas métricas refletem o carregamento, a estabilidade do layout e a prontidão para interação. Outras métricas, como a Primeira exibição de conteúdo, destacadas no futuro das Principais métricas da Web, também estão disponíveis.
A seção "Métricas" do relatório do Lighthouse inclui versões de laboratório dessas métricas. Use isso como uma visão resumida de quais aspectos da experiência do usuário precisam da sua atenção.
As métricas de campo, como as encontradas no Relatório de UX do Chrome ou no RUM, não têm essa limitação e são um complemento valioso para os dados de laboratório, porque refletem a experiência dos usuários reais. Os dados de campo não podem oferecer os tipos de informações de diagnóstico que você consegue no laboratório, então os dois andam de mãos dadas.
Identificar onde as Métricas da Web podem ser melhoradas
Identificar o elemento Maior exibição de conteúdo
A LCP é uma medida da experiência de carregamento percebida. Ele marca o ponto durante o carregamento da página em que o conteúdo principal (ou "maior") foi carregado e fica visível para o usuário.
O Lighthouse tem uma auditoria "Maior elemento de exibição de conteúdo", que identifica qual elemento foi a maior exibição de conteúdo. Passe o cursor sobre o elemento para destacá-lo na janela principal do navegador.
Se esse elemento for uma imagem, essa informação será uma dica útil para otimizar o carregamento dessa imagem. O Lighthouse inclui várias auditorias de otimização de imagens para ajudar você a entender se é possível compactar, redimensionar ou entregar em um formato de imagem moderno mais ideal.
O LCP favoritelet de Annie Sullivan também pode ser útil para identificar rapidamente o elemento LCP com um retângulo vermelho em apenas um clique.
Pré-carregue imagens descobertas tardias para melhorar a LCP
Para melhorar a Maior exibição de conteúdo, pré-carregue as imagens principais críticas se elas forem descobertas com atraso pelo navegador. Uma descoberta tardia poderá ocorrer se um pacote JavaScript precisar ser carregado antes que a imagem possa ser detectada.
Há algumas perguntas comuns que nos fazem sobre o pré-carregamento de imagens LCP, que podem ser abordadas de forma breve.
É possível pré-carregar imagens responsivas? Sim.
Digamos que temos uma imagem principal responsiva, conforme especificado, usando srcset e sizes abaixo:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
Graças aos atributos imagesrcset e imagesizes adicionados ao atributo link, podemos
pré-carregar uma imagem responsiva usando a mesma lógica de seleção de imagem usada por srcset e sizes:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
A auditoria também destacará as oportunidades de pré-carregamento se a imagem LCP for definida em um segundo plano de CSS? Sim.
Qualquer imagem sinalizada como a imagem LCP, seja por segundo plano CSS ou <img>, será candidata se for
descoberta em uma profundidade de hierarquia de três ou mais.
Carregamento lento de imagens fora da tela e evita isso para LCP
As imagens fora da tela que não são essenciais para a experiência inicial do usuário podem ser carregadas lentamente. Essa é uma técnica que adia o download de uma imagem até que o usuário role a tela até ela, o que pode reduzir a contenção de rede para recursos críticos e, em alguns casos, melhorar a LCP. A auditoria Adiar imagens fora da tela pode ajudar neste caso:
Imagens críticas acima da dobra, como a Maior exibição de conteúdo, não podem ser carregadas lentamente. Isso pode atrasar o carregamento da imagem LCP. O Lighthouse destaca se uma imagem LCP está sendo carregada lentamente de modo incorreto com a auditoria "A maior imagem de exibição de conteúdo foi carregada lentamente":
Identificar contribuições de CLS
A Mudança de layout cumulativa é uma medida de estabilidade visual. Ela quantifica quanto o conteúdo de uma página muda visualmente. O Lighthouse tem uma auditoria para depurar CLS chamada "Evite grandes mudanças de layout".
Esta auditoria destaca os elementos do DOM que mais contribuem para as mudanças da página. Na coluna "Elemento" à esquerda, você vai ver a lista desses elementos DOM e, à direita, a contribuição geral de CLS deles.
Graças ao novo recurso de capturas de tela do elemento do Lighthouse, é possível ter uma prévia dos principais elementos observados na auditoria e clicar para aplicar zoom e ter uma visão mais clara:
Para a CLS pós-carregamento, pode haver valor na visualização persistente com retângulos quais elementos contribuíram mais para a CLS. Esse é um recurso disponível em ferramentas de terceiros, como o painel Core Web Vitals do SpeedCurve e que eu adoro usar o Defaced's Layout Shift GIF Generator para:
Para ter uma visão geral dos problemas de mudança de layout, aproveito muito o relatório de Principais métricas da Web do Search Console. Assim, posso ver os tipos de páginas no meu site com uma CLS alta. Nesse caso, consigo identificar quais elementos do modelo precisam ser usados:
Identificar CLS em imagens sem dimensões
Para limitar a mudança de layout cumulativa causada por imagens sem dimensões, inclua atributos de tamanho de largura e altura nos elementos de vídeo e imagens. Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento enquanto a imagem está carregando.
Consulte Configurar a altura e a largura em imagens é importante novamente para ler um bom artigo sobre a importância de considerar as dimensões e proporções de imagens.
Como identificar a CLS em anúncios
Com o Publisher Ads for Lighthouse, você encontra oportunidades de melhorar a experiência de carregamento de anúncios na sua página, incluindo contribuições para a mudança de layout e tarefas longas que talvez afetem a rapidez do acesso à página aos usuários. No Lighthouse, é possível ativar esse recurso nos plug-ins da comunidade.
Lembre-se de que os anúncios são um dos maiores impactos das mudanças de layout na Web. É importante:
- Tenha cuidado ao posicionar anúncios não fixos perto da parte superior da janela de visualização
- Eliminar mudanças reservando o maior tamanho possível para o espaço de anúncio
Evitar animações não compostas
Animações que não são compostas podem apresentar-se instáveis em dispositivos mais simples se as tarefas JavaScript pesadas estiverem mantendo a linha de execução principal ocupada. Essas animações podem introduzir mudanças de layout.
Se o Chrome descobrir que uma animação não pode ser composta, ela a informará a uma leitura de rastros do DevTools do Lighthouse, permitindo que ele liste quais elementos com animações não foram compostos e por motivo. Você pode encontrá-los na auditoria Evitar animações não compostas.
Depurar a latência na primeira entrada / Tempo total de bloqueio / Tarefas longas
"Primeira entrada" mede o tempo entre a primeira interação do usuário com uma página (por exemplo, quando ele clica em um link, toca em um botão ou usa um controle personalizado com JavaScript) até o momento em que o navegador pode começar a processar manipuladores de eventos em resposta a essa interação. Tarefas JavaScript longas podem afetar essa métrica e o proxy dela, o tempo total de bloqueio.
O Lighthouse inclui uma auditoria Evitar tarefas longas da linha de execução principal, que lista as tarefas mais longas na linha de execução principal. Isso pode ser útil para identificar os piores contribuintes para o atraso de entrada. Na coluna da esquerda, é possível ver o URL dos scripts responsáveis por tarefas longas da linha de execução principal.
À direita, podemos ver a duração dessas tarefas. Como lembrete, Tarefas longas são tarefas executadas por mais de 50 milissegundos. Considera-se que isso bloqueia a linha de execução principal por tempo suficiente para impactar o frame rate ou a latência de entrada.
Se estiver considerando serviços de terceiros para monitoramento, também gosto da linha do tempo de execução da linha de execução principal (link em inglês) que o Calibre tem para visualizar esses custos, que destaca as tarefas mãe e filha que contribuem para tarefas longas que afetam a interatividade.
Bloqueie solicitações de rede para ver o impacto antes/depois no Lighthouse
O Chrome DevTools oferece suporte ao bloqueio de solicitações de rede para ver o impacto de recursos individuais que são removidos ou ficam indisponíveis. Isso pode ser útil para entender o custo que scripts individuais (por exemplo, incorporações ou rastreadores de terceiros) têm em métricas como Tempo total de bloqueio (TBT, na sigla em inglês) e Tempo para interação da página.
O bloqueio de solicitações de rede também funciona com o Lighthouse. Vamos dar uma olhada rápida no relatório do Lighthouse de um site. A pontuação de desempenho é 63/100, com um TBT de 400 ms. Analisando o código, descobrimos que este site carrega um polyfill do Intersection Observer no Chrome, o que não é necessário. Vamos bloquear!
Clique com o botão direito do mouse em um script no painel "Rede" do DevTools e clique em Block Request URL para
bloquear. Aqui, vamos fazer isso para o polyfill Intersection Observer.
Em seguida, podemos executar o Lighthouse novamente. Desta vez, notamos que nossa pontuação de performance melhorou (70/100) porque o tempo total de bloqueio (400 ms => 300 ms) aumentou.
Substituir incorporações dispendiosas de terceiros por uma fachada
É comum usar recursos de terceiros para incorporar vídeos, postagens de mídias sociais ou widgets em páginas. Por padrão, a maioria das incorporações é carregada imediatamente e pode vir com payloads caros que afetam negativamente a experiência do usuário. Isso é um desperdício se o terceiro não for essencial, por exemplo, se o usuário precisar rolar a tela antes de vê-lo.
Um padrão para melhorar o desempenho desses widgets é carregá-los lentamente na interação do usuário. Isso pode ser feito renderizando uma visualização leve do widget (uma fachada) e só carregue a versão completa se um usuário interagir com ela. O Lighthouse tem uma auditoria que recomenda recursos de terceiros que podem ser carregados lentamente com uma fachada, como incorporações de vídeos do YouTube.
Como lembrete, o Lighthouse destacará o código de terceiros que bloqueia a linha de execução principal por mais de 250 ms. Isso pode expor todos os tipos de scripts de terceiros (incluindo aqueles de autoria do Google) que valem a pena ser adiados ou de carregamento lento se o processamento exigir rolagem para visualização.
Além das Principais métricas da Web
Além de destacar as Principais métricas da Web, as versões recentes do Lighthouse e do PageSpeed Insights também tentam fornecer orientações concretas que você pode seguir para melhorar a velocidade de carregamento de aplicativos da Web com uso intenso de JavaScript se os mapas de origem estiverem ativados.
Isso inclui uma coleção cada vez maior de auditorias para reduzir o custo de JavaScript na sua página, como reduzir a dependência de polyfills e cópias que talvez não sejam necessárias para a experiência do usuário.
Para mais informações sobre as ferramentas das Principais métricas da Web, fique de olho na conta do Twitter da equipe do Lighthouse e nas Novidades do DevTools.
Imagem principal por Mercedes Mehling em Unsplash (links em inglês).