Encontrar oportunidades para melhorar a experiência do usuário com as ferramentas da Web do Chrome.
Hoje, vamos abordar os novos recursos de ferramentas no Lighthouse, PageSpeed e DevTools para ajudar a identificar como seu site pode melhorar nas Métricas da Web.
Para relembrar sobre as ferramentas, o Lighthouse é uma ferramenta automatizada de código aberto para melhorar a qualidade das páginas da Web. Você pode encontrá-lo no Chrome DevTools (em inglês) de ferramentas de depuração e executar em qualquer página da Web, pública ou que exija autenticação. O Lighthouse também está em PageSpeed Insights, CI e WebPageTest (em inglês).
O Lighthouse 7.x inclui novos recursos, como capturas de tela de elementos, para facilitar a inspeção visual dos partes da interface que afetam as métricas de experiência do usuário (por exemplo, quais nós contribuem para o layout) mudar).
Também incluímos o suporte para capturas de tela de elementos no PageSpeed Insights, o que permite a você a detectar facilmente problemas de execuções únicas de páginas com desempenho.
Medir as Core Web Vitals
O Lighthouse sabe medir sintéticamente As métricas das Core Web Vitals, incluindo Largest Contentful Paint, Cumulative Layout Shift e Total Blocking Time (um proxy do laboratório para First Input Delay). Essas métricas refletem o carregamento, a estabilidade do layout e a prontidão para interação. Outras métricas, como First Contentful Paint destacada no futuro da As Core Web Vitals também estão disponíveis.
As "Métricas" do relatório do Lighthouse inclui versões de laboratório dessas métricas. Você pode usar isso é uma visão resumida dos aspectos da experiência do usuário que exigem sua atenção.
Métricas de campo, como as encontradas na UX do Chrome Denunciar ou RUM, não tenho limitação e são um complemento valioso aos dados de laboratório, porque refletem a experiência de usuários reais ter. Os dados de campo não oferecem os tipos de informações de diagnóstico que você recebe no laboratório, então eles de mãos dadas.
identificar onde você pode melhorar nas Métricas da Web
Identificar o elemento Largest Contentful Paint
A LCP é uma medição da experiência de carregamento percebida. Marca o ponto durante o carregamento da página em que o ou o "maior" conteúdo foi carregado e está visível para o usuário.
O Lighthouse tem um "elemento Maior exibição de conteúdo" de auditoria que identifique qual elemento foi "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 desta imagem. O Lighthouse inclui várias auditorias de otimização de imagens para ajudar você a entender se suas imagens pudessem ser melhor compactadas, redimensionadas ou entregues em uma imagem moderna mais otimizada .
Você também pode encontrar a LCP Favoritelet de Annie Sullivan é útil para identificar rapidamente o elemento da LCP com um retângulo vermelho com apenas um clique.
Pré-carregue imagens descobertas tardiamente para melhorar a LCP
Para melhorar a Maior exibição de conteúdo, pré-carregue o herói principal imagens caso elas sejam descobertas com atraso pelo navegador. Uma descoberta tardia pode acontecer O pacote JavaScript precisa ser carregado antes que a imagem seja detectável.
Há algumas perguntas comuns sobre o pré-carregamento de imagens da LCP que também podem valer a pena falando rapidamente.
É 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é-carregue 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 por um CSS? do plano de fundo? Sim.
Qualquer imagem sinalizada como LCP, seja pelo plano de fundo do CSS ou <img>, será candidata se for
descobertos em uma profundidade de cachoeira de três ou mais.
Carregamento lento de imagens fora da tela e evitando 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 perto dela, 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:
Imagens críticas acima da dobra, como a imagem da Largest Contentful Paint, não devem ser carregadas lentamente. Isso pode atrasar o carregamento da imagem LCP. O Lighthouse vai destacar se uma imagem LCP estiver sendo carregada lentamente de forma incorreta pela mensagem "A imagem da Maior exibição de conteúdo foi carregada lentamente". auditoria:
Identificar contribuições de CLS
A Cumulative Layout Shift é uma medida de estabilidade visual. Ela quantifica o quanto uma página o conteúdo muda visualmente. O Lighthouse tem uma auditoria para depurar a CLS chamada "Evite grandes trocas de layout".
Esta auditoria destaca os elementos DOM que mais contribuem para as mudanças da página. No elemento à esquerda, você verá a lista desses elementos DOM e, à direita, seus CLS gerais contribuição.
Graças ao novo recurso de capturas de tela de elementos do Lighthouse, podemos ter uma prévia da elementos-chave observados na auditoria, bem como clique para aplicar zoom, para uma visualização mais clara:
Para CLS pós-carregamento, pode haver valor na visualização persistente com retângulos quais elementos contribuíram mais para o CLS. Esse é um recurso que pode ser encontrado em ferramentas de terceiros, como Painel de Core Web Vitals do SpeedCurve e que adoro usar o GIF do Defaced's Layout Shift Gerador para:
Para ter uma visão geral dos problemas de troca de layout em todo o site, perco muita milhagem da principal do Search Console Relatório de Métricas da Web Isso me permite ver os tipos de páginas no meu site com CLS alto (nesse caso, ajudar a identificar qual modelo parciais nas quais preciso dedicar tempo):
Como identificar a CLS de imagens sem dimensões
Para limitar a Cumulative Layout Shift causada por imagens sem dimensões, inclua atributos de tamanho de largura e altura nas imagens e nos elementos de vídeo. Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento durante o carregamento da imagem.
Consulte É importante definir alturas e larguras de imagens Mais uma vez, uma boa descrição sobre a importância de pensar sobre as dimensões e a proporção da imagem.
Identificar a CLS com base em anúncios
O Publisher Ads for Lighthouse permite Encontrar oportunidades para melhorar a experiência de carregamento de anúncios na sua página, incluindo contribuições à mudança de layout e a tarefas longas que podem aumentar a velocidade de usabilidade da página para os usuários. Em Lighthouse. É possível ativar esse recurso nos plug-ins da comunidade.
Lembre-se de que os anúncios são um maiores colaboradores para mudanças de layout na Web. É importante:
- Tenha cuidado ao colocar anúncios não fixos perto da parte superior da janela de visualização
- Eliminar as mudanças reservando o maior tamanho possível para o espaço do anúncio
Evitar animações não compostas
Animações não compostas podem ficar instáveis em dispositivos mais simples se forem pesadas. As tarefas do JavaScript estão mantendo a linha de execução principal ocupada. Essas animações podem introduzir mudanças de layout.
Se o Chrome descobrir que não é possível compor uma animação, ele vai informá-la a um rastro do DevTools. O Lighthouse faz leituras, e permite listar quais elementos com animações não foram compostos e para qual o motivo. Você pode encontrá-los no artigo Evitar consultas animações.
Depuração de First Input Delay / tempo total de bloqueio / tarefas longas
A “Primeira entrada” mede o tempo a partir da primeira interação de um usuário com uma página (por exemplo, quando ele clica em um tocar em um botão ou usar um controle personalizado com tecnologia JavaScript) até o momento em que o navegador pode começar a processar manipuladores de eventos em resposta a essa interação. JavaScript longo As tarefas 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 as tarefas mais longas na linha de execução principal. Isso pode ser útil para identificar os piores colaboradores de atraso de entrada. Na coluna da esquerda, podemos ver o URL dos scripts responsáveis por uma linha de execução principal longa. tarefas.
À direita, podemos ver a duração dessas tarefas. Como lembrete, as tarefas longas são tarefas que por mais de 50 milissegundos. Isso é considerado para bloquear a linha de execução principal por tempo suficiente para afetar o frame rate ou a latência de entrada.
Se estiver considerando serviços de terceiros para monitoramento, também gosto bastante da execução da linha de execução principal linha do tempo visual que o Calibre tem para visualizar esses custos, destacando as tarefas pai e filho que contribuem para tarefas que afetam a interatividade.
Bloqueie solicitações de rede para conferir o impacto "antes/depois" no Lighthouse
O Chrome DevTools oferece suporte ao bloqueio de solicitações para ver o impacto da remoção ou indisponibilidade de recursos individuais. Isso pode ser útil para entender o custo que os scripts individuais (por exemplo, incorporações ou rastreadores de terceiros) têm em 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 Relatório do Lighthouse para um site. A pontuação de desempenho é 63/100, com um TBT de 400 ms. Ao analisar o código, descobrimos que este site carrega um polyfill do Intersection Observer no Chrome, o que não é necessário. Vamos bloqueie!
Podemos clicar com o botão direito do mouse em um script no painel Network do DevTools e clicar em Block Request URL para bloquear
reimplantá-lo. Aqui, faremos isso para o polyfill do Intersection Observer.
Em seguida, execute o Lighthouse novamente. Desta vez, nossa pontuação de desempenho melhorou (70/100) conforme tem tempo total de bloqueio (400 ms => 300 ms).
Substituir incorporações caras de terceiros por uma fachada
É comum usar recursos de terceiros para incorporar vídeos, postagens de mídia social ou widgets em páginas de destino. Por padrão, a maioria das incorporações carrega prontamente e pode vir com payloads caros que impactar negativamente a experiência do usuário. Isso será um desperdício se o terceiro não for essencial (por exemplo, o usuário precisa rolar a tela para vê-lo).
Um padrão para melhorar o desempenho desses widgets é o carregamento lento nos usuários interativa. Isso pode ser feito renderizando visualização leve do widget (uma fachada) e só carregar a versão completa se um usuário interagir a ele. O Lighthouse tem uma auditoria que recomenda recursos de terceiros que podem ser carregado lentamente com uma fachada, como incorporações de vídeos do YouTube.
O Lighthouse vai 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 talvez valham mais a pena adiar ou o carregamento lento se o que eles renderizarem exigir rolagem para vê-los.
Além das Core Web Vitals
Além de destacar as Core Web Vitals, as versões recentes do Lighthouse e do PageSpeed Insights também tente fornecer orientações concretas que você pode seguir para melhorar a rapidez com que a Web com JavaScript aplicativos poderão ser carregados se os mapas de origem estiverem ativados.
Isso inclui um conjunto crescente de auditorias para reduzir o custo de JavaScript na sua página, como reduzindo a dependência de polyfills e cópias que podem não ser necessárias para a experiência do usuário.
Para mais informações sobre as ferramentas das Core Web Vitals, acompanhe o Lighthouse. equipe do Twitter e O que há de novo no DevTools (em inglês).