Novidades do Lighthouse 6.0

Novas métricas, atualização da pontuação de desempenho, novas auditorias e muito mais.

Connor Clark

Hoje estamos lançando o Lighthouse 6.0.

O Lighthouse é uma ferramenta automatizada de auditoria de sites que ajuda desenvolvedores com oportunidades e diagnósticos para melhorar a experiência do usuário nos sites. Ele está disponível no Chrome DevTools, npm (como um módulo de nó e uma CLI) ou como uma extensão de navegador (no Chrome e Firefox). Ela é usada em vários serviços serviços, incluindo web.dev/measure e PageSpeed Insights.

O Lighthouse 6.0 já está disponível no npm e no Chrome Canary Outros serviços do Google que usam o Lighthouse para receber a atualização até o final do mês. Ela será lançada no Chrome Stable no Chrome 84 (meados de julho).

Para testar a CLI do Node do Lighthouse, use os seguintes comandos: bash npm install -g lighthouse lighthouse https://www.example.com --view

Esta versão do Lighthouse vem com diversas mudanças, listados no registro de alterações da versão 6.0. Vamos abordar os destaques deste artigo.

• Novas métricas
• Atualização da pontuação de desempenho
• Novas auditorias
• CI do Lighthouse
• Painel do Chrome DevTools renomeado
• Emulação de dispositivos móveis
• Extensão do navegador
• Orçamentos
• Links dos locais de origem
• No horizonte
• Atenciosamente,

Novas métricas

O Lighthouse 6.0 apresenta três novas métricas ao relatório. Duas dessas novas métricas: as O Contentful Paint (LCP) e a Cumulative Layout Shift (CLS) são implementações do laboratório Core Web Android vitals.

Maior exibição de conteúdo (LCP)

A Maior exibição de conteúdo (LCP) é uma medida do carregamento percebido do usuário. Ele marca o ponto durante o carregamento da página em que o conteúdo principal, ou "maior", é carregado e fica visível para o usuário. A LCP é um complemento importante da First Contentful Paint (FCP), que só registra o início da experiência de carregamento. A LCP indica aos desenvolvedores como rapidamente um usuário é capaz de ver o conteúdo de uma página. Uma pontuação de LCP abaixo de 2,5 segundos é considerado "Bom".

Para mais informações, assista esta análise detalhada sobre a LCP (em inglês) de Paul Ireland.

Cumulative Layout Shift (CLS)

A Cumulative Layout Shift (CLS) é uma medida de estabilidade visual. Ela quantifica quanto o conteúdo de uma página muda visualmente. Uma pontuação de CLS baixa é um sinal desenvolvedores de que seus usuários não estão passando por mudanças indevidas no conteúdo; uma pontuação de CLS abaixo de 0,10 é considerado "Bom".

A CLS em um ambiente de laboratório é medida até o fim do carregamento da página. Enquanto que, no campo, você pode medir a CLS até a primeira interação do usuário ou incluir toda a entrada do usuário.

Para mais informações, assista esta análise detalhada sobre CLS (em inglês) de Annie Sullivan.

Tempo total de bloqueio (TBT)

O tempo total de bloqueio (TBT, na sigla em inglês) quantifica a capacidade de resposta da carga, medindo a tempo total em que a linha de execução principal ficou bloqueada por tempo suficiente para impedir a capacidade de resposta da entrada. A TBT mede o tempo total entre a First Contentful Paint (FCP) e o tempo para interação da página (TTI). É uma métrica complementar à TTI e traz mais nuances para quantificar a atividade da linha de execução principal. que bloqueia a capacidade de um usuário de interagir com sua página.

Além disso, o TBT se correlaciona bem com a métrica de campo First Input Delay. (FID, na sigla em inglês), que é uma das Core Web Vitals.

Atualização da pontuação de desempenho

A pontuação de desempenho no Lighthouse é calculada com base em uma combinação ponderada de várias métricas para resumir a velocidade de uma página. A fórmula da pontuação de desempenho de 6,0 segue.

Embora três novas métricas tenham sido adicionadas, três antigas foram removidas: First Meaningful Paint, Primeira CPU inativa e FID potencial máximo. As ponderações das métricas restantes foram modificadas para enfatizem a interatividade da linha de execução principal e a previsibilidade do layout.

Para comparação, veja a pontuação da versão 5:

Alguns destaques das mudanças de pontuação entre as versões 5 e 6 do Lighthouse:

• O peso do TTI foi reduzido de 33% para 15%. Isso foi uma resposta direta ao usuário feedback sobre a variabilidade de TTI, bem como inconsistências nas otimizações de métrica, levando a melhorias na experiência do usuário. O TTI ainda é um indicador útil para quando uma página estiver totalmente interativo, mas com a TBT como do complemento: a variabilidade é reduzida. Com essa mudança na pontuação, esperamos que os desenvolvedores sejam incentivados a otimizar interatividade do usuário.
• O peso da FCP foi reduzido de 23% para 15%. Medir somente quando o primeiro pixel está pintado (FCP, na sigla em inglês) não forneceu uma imagem completa. Combinando isso com a medição de quando os usuários podem para conferir o que é mais importante para eles (LCP) refletir melhor a experiência de carregamento.
• O uso de "Max Potential FID" foi descontinuado. Ele não aparece mais no relatório, mas ainda disponíveis no JSON. Agora é recomendável usar a TBT para quantificar sua interatividade em vez de mpFID.
• A First Meaningful Paint foi descontinuada. Essa métrica era muito variante e não teve caminho para a padronização, já que a implementação é específica para a renderização interna do Chrome. algumas equipes acharem que o momento da FMP vale a pena no site, a métrica não receberá melhorias adicionais.
• A primeira CPU inativa foi descontinuada porque não é diferente o suficiente de TTI. TBT e TTI são as principais métricas para interatividade.
• O peso do CLS é relativamente baixo, embora esperemos aumentá-lo em uma versão principal futura.

Mudanças nas pontuações

Como essas mudanças afetam as pontuações dos sites reais? Publicamos um análise das mudanças de pontuação usando dois conjuntos de dados: um conjunto geral de sites e conjunto de sites estáticos criado com o Eleventy. Em resumo, cerca de 20% dos sites têm um aumento visivelmente maior em média, cerca de 30% têm praticamente qualquer mudança e cerca de 50% observam uma diminuição de pelo menos cinco pontos.

As mudanças na pontuação podem ser divididas em três componentes principais:

• Pontuação de mudanças de peso
• correções de bugs em implementações de métricas subjacentes
• mudanças na curva de pontuação individual

As mudanças de peso da pontuação e a introdução de três novas métricas geraram a maior parte da pontuação geral. mudanças. Novas métricas que os desenvolvedores ainda não otimizaram para terem um peso significativo na versão 6 pontuação de desempenho. Embora a pontuação de desempenho média do corpus de teste na versão 5 tenha sido de cerca de 50, as pontuações médias nas novas métricas "Tempo total de bloqueio" e "Maior exibição de conteúdo" foram em torno de 30. Juntas, essas duas métricas representam 50% do peso na pontuação de desempenho da versão 6 do Lighthouse. Portanto, naturalmente, uma grande porcentagem dos sites teve reduções.

As correções de bugs no cálculo da métrica podem resultar em pontuações diferentes. Isso afeta relativamente poucos sites, mas que pode ter um impacto considerável em determinadas situações. No geral, cerca de 8% dos sites tiveram uma melhoria de pontuação devido a alterações na implementação de métricas, e cerca de 4% dos sites tiveram uma pontuação devido a alterações na implementação de métricas. Cerca de 88% dos sites não foram afetados por essas correções.

As mudanças na curva de pontuação individual também afetaram a pontuação geral, embora muito levemente. Qa garantir periodicamente que a curva de pontuação se alinhe com as métricas observadas no HTTPArchive no conjunto de dados. Exclusão de sites afetados por grandes mudanças de implementação, pequenas ajustes na curva de pontuação para métricas individuais melhoraram as pontuações de cerca de 3% dos sites e diminuiu as pontuações de cerca de 4% dos sites. Cerca de 93% dos sites não foram afetados por essa mudança.

Calculadora de pontuação

Publicamos uma calculadora de pontuação para ajudar a pontuação de desempenho. A calculadora também mostra uma comparação entre o Lighthouse versão 5 e 6 pontuações. Quando você executa uma auditoria com o Lighthouse 6.0, o relatório vem com um link para a calculadora com os resultados preenchidos.

Novas auditorias

JavaScript não utilizado

Estamos aproveitando o código do DevTools cobertura em uma nova auditoria: Não utilizado JavaScript.

Essa auditoria não é totalmente nova: ela foi adicionada em meados de 2017, mas devido ao overhead de desempenho, ele foi desativado por padrão para manter a velocidade do Lighthouse sempre que possível. A coleta desses dados de cobertura é muito mais eficiente agora, então nos sentimos confortáveis para por padrão.

Auditorias de acessibilidade

O Lighthouse usa a maravilhosa biblioteca axe-core para alimentar o categoria de acessibilidade. Adicionamos as seguintes auditorias no Lighthouse 6.0:

• aria-hidden-body (link em inglês)
• aria-hidden-focus (link em inglês)
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order (ordem de cabeçalho)
• Duplicate-id-active (link em inglês)
• duup-id-aria (link em inglês)

Ícone mascarável

Os ícones mascaráveis são um novo formato que cria ícones para seu PWA têm uma ótima aparência em todos os tipos de dispositivos. Para ajudar seu PWA a ter a melhor aparência possível, introduzimos uma nova auditoria para verificar se o manifest.json é compatível com esse novo formato.

Declaração de conjunto de caracteres

O elemento meta charset declara qual codificação de caracteres deve ser usada para interpretar um documento HTML. Se esse elemento estiver ausente ou se for declarado posteriormente na documento, os navegadores empregam uma série de heurísticas para adivinhar qual codificação deve ser usada. Se um navegador adivinha incorretamente e um elemento meta charset tardio é encontrado, o analisador geralmente lança todo o trabalho feito até agora e começa de novo, levando a experiências ruins para o usuário. Essa nova audita verifica se a página tem uma codificação de caracteres válida e se ela foi definida antecipadamente.

Lighthouse CI

No CDS de novembro passado anunciamos o Lighthouse CI, o nó de código aberto A CLI e o servidor que rastreia os resultados do Lighthouse em cada commit na sua integração contínua pipeline, e avançamos muito desde o lançamento da versão Alfa. O Lighthouse CI agora tem suporte para vários provedores de CI, incluindo Travis, Circle, GitLab e GitHub Actions. Pronto para implantar docker images tornam a configuração uma muito fácil, e uma reformulação abrangente do painel revela tendências em todas as categorias e métricas no Lighthouse para uma análise detalhada.

Comece a usar o Lighthouse CI no seu projeto hoje mesmo seguindo nossa guia de primeiros passos.

Painel do Chrome DevTools renomeado

O painel Auditorias agora se chama Lighthouse. Chega de falar!

Dependendo do tamanho da janela do DevTools, o painel provavelmente está atrás do botão ». Você pode arrastar a guia para alterar a ordem.

Para revelar rapidamente o painel com o comando Command menu:

1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
2. Pressione Control+Shift+P (ou Command+Shift+P no Mac) para abra o menu Comando.
3. Comece a digitar "Lighthouse".
4. Pressione Enter.

Emulação de dispositivo móvel

O Lighthouse segue uma mentalidade voltada para dispositivos móveis. Problemas de desempenho são mais aparentes em ambientes condições móveis, mas os desenvolvedores geralmente não testam nessas condições. É por isso que o padrão no Lighthouse aplica a emulação de dispositivos móveis. A emulação consiste em:

• Simulação de condições de rede e CPU lentas (com um mecanismo de simulação chamado Lanterna).
• Emulação de tela do dispositivo (a mesma encontrada no Chrome DevTools).

Desde o início, o Lighthouse usa o Nexus 5X como dispositivo de referência. Nos últimos anos, a maioria engenheiros de performance têm usado o Moto G4 para testes. Agora o Lighthouse está acompanhando e mudou o dispositivo de referência para o Moto G4. Na prática, essa mudança não é muito perceptível, mas aqui estão todas as alterações detectáveis por uma página da Web:

• O tamanho da tela mudou de 412 x 660 para 360 x 640 pixels.
• A string do user agent é pequena, a parte do dispositivo que era Nexus 5 Build/MRA58N. agora será Moto G (4).

A partir do Chrome 81, o Moto G4 também está disponível na lista de emulação de dispositivos do Chrome DevTools.

Extensão do navegador

A Extensão do Chrome para o Lighthouse tem sido uma forma conveniente de executar o Lighthouse localmente. Infelizmente, o suporte era complicado. Achamos que, como o painel Lighthouse do Chrome DevTools é uma experiência melhor (o relatório se integra a outros painéis), poderíamos reduzir o trabalho de engenharia simplificando o processo .

Em vez de executar o Lighthouse localmente, a extensão agora usa a ferramenta PageSpeed Insights API. Reconhecemos que isso não ser suficiente para alguns de nossos usuários. Estas são as principais diferenças:

• O PageSpeed Insights não pode auditar sites não públicos, já que é executado por meio de um sistema remoto. e não na sua instância local do Chrome. Se for preciso auditar um site que não é público, use pelo painel Lighthouse do DevTools ou pela CLI do nó.
• Não há garantia de que o PageSpeed Insights usará a versão mais recente do Lighthouse. Se você quiser usar a versão mais recente, use a CLI do Node. A extensão do navegador receberá a atualização de uma a duas semanas após o lançamento.
• O PageSpeed Insights é uma API do Google. O uso dela consiste em aceitar os Termos de Serviço. Se você não quiser ou não aceitar os Termos de Serviço, use o painel Lighthouse do DevTools. ou a CLI do Node.

A boa notícia é que simplificar a história do produto nos permitiu focar em outras áreas de engenharia para solucionar problemas fáceis e de produção. Por isso, lançamos o Lighthouse Firefox .

Orçamentos

O Lighthouse 5.0 lançou os orçamentos de performance, que é possível adicionar limites para quanto de cada tipo de recurso (como scripts, imagens ou css) que uma página pode exibir.

Adições do Lighthouse 6.0 suporte para métricas de orçamento, Agora é possível definir limites para métricas específicas, como a FCP. No momento, os orçamentos estão disponíveis apenas à CLI do Node e ao Lighthouse CI.

Links do local de origem

Alguns dos problemas que o Lighthouse encontra em uma página podem ser rastreados até uma linha específica de código-fonte e o relatório indicará o arquivo e a linha exatos relevantes. Para facilitar explorar no DevTools, clicar nos locais especificados no relatório abrirá os arquivos relevantes no painel Origens.

No horizonte

O Lighthouse começou a testar a coleta de mapas de origem para potencializar novos recursos, como:

• Detecção de módulos duplicados em pacotes JavaScript.
• Detecção de excesso de polyfills ou transformações no código enviado para navegadores modernos.
• Aumentando a auditoria de JavaScript não usado para fornecer granularidade no nível do módulo.
• Visualizações de mapa de árvore destacando os módulos que exigem ação.
• Mostrar o código-fonte original para itens de relatório com um "local de origem".

Esses recursos serão ativados por padrão em uma versão futura do Lighthouse. Por enquanto, você pode ver Auditorias experimentais do Lighthouse com a seguinte flag de CLI:

lighthouse https://web.dev --view --preset experimental

Obrigada!

Agradecemos por usar o Lighthouse e enviar seu feedback. Seu feedback nos ajuda a melhorar o Lighthouse e esperamos que o Lighthouse 6.0 facilite o aprimoramento do desempenho de seus e sites.

O que você pode fazer agora?

• Abra o Chrome Canary e teste o painel Lighthouse.
• Use a CLI de nó: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• Coloque o Lighthouse CI em execução com o seu projeto.
• Leia a documentação de auditoria do Lighthouse.
• Divirta-se tornando a Web melhor!

Somos apaixonados pela Web e trabalhamos com a comunidade de desenvolvedores para desenvolver ferramentas que ajudam a melhorar a Web. O Lighthouse é um projeto de código aberto e agradecemos muito a todos e colaboram em várias áreas, como correções de erros de digitação, refatoração de documentações e novidades auditorias. Quer contribuir? Acesse o repositório do GitHub do Lighthouse.