Home Blogs Lighthouse 6,0 Score Audit: Uma lista de verificação para preparar seu site
Applications

Lighthouse 6,0 Score Audit: Uma lista de verificação para preparar seu site

About The Author

Outline

O Google Lighthouse tornou-se a ferramenta de fato para muitos sites para medir seu desempenho com uma única pontuação: O Lighthouse Performance Score. Uma nova versão, Lighthouse 6,0, está agora disponível no npm no Chrome Canary, PageSpeed Insights e GSC Console. Em meados de julho, o Lighthouse 6,0 será totalmente lançado para usuários do Chrome 84. Agora é a hora de garantir que seu site está pronto para a nova versão com uma auditoria de pontuação do Lighthouse 6,0.

O Lighthouse 6,0 vem com métricas novas e depreciadas, bem como uma nova fórmula de ponderação para calcular as pontuações de desempenho. Esta nova versão, juntamente com o anúncio de que o Core Web Metrics será adicionado ao algoritmo de classificação do Google na atualização de experiência do Google Page, são sinais claros que o gigante da pesquisa está enfatizando a velocidade percebida – a velocidade na qual um usuário percebe uma página como carregada. Quanto mais rápido os usuários perceberem o seu site para carregar, maior o seu ranking e mais conversões você receberá.

As seis métricas do Lighthouse que você precisa otimizar

O Google se preocupa com a forma como os usuários experimentam a web. Dois sites podem terminar de carregar exatamente ao mesmo tempo, mas um pode parecer carregar mais rápido, com base em como o conteúdo é exibido na página. Enquanto ambos os sites terminaram o carregamento simultaneamente, o Google favorecerá o último, o site com um desempenho mais rápido.

As pontuações do Lighthouse 6,0 são baseadas em uma média ponderada de seis métricas de velocidade centradas no usuário. O First Contentful Paint (FCP), o Speed Index (SI) e o Largest Contentful Paint (LCP) medem a velocidade de carga percebida e mantêm um peso combinado de 55% na pontuação Lighthouse de um site na versão 6. Outros 40% da pontuação são baseados em métricas que medem a capacidade de resposta, outro aspeto que impacta a perceção de velocidade de um usuário. Estes incluem o Tempo Total de Bloqueio (TBT) e o Tempo para Interativo (TTI). Os últimos 5% da pontuação são baseados em uma métrica que mede a estabilidade visual, chamada de Mudança de Layout Cumulativa (CLS).

O primeiro Paint Significativo (FMP) e o primeiro ocioso de CPU (FCI) da pontuação do Lighthouse 5,7 foram substituídos por melhores métricas para medir a velocidade de uma perspetiva centrada no usuário. Estes são os maiores Contentful Paint (LCP) e Total Blocking Time (TBT) no Lighthouse 6,0.

Farol 5,7 Peso Farol 6,0 Peso
Primeira pintura Contentful (FCP) 20% Primeira pintura Contentful (FCP) 15%
Índice de velocidade (SI) 27% Índice de velocidade (SI) 15%
Primeira pintura significativa (FMP) 7% Maior Contentful Paint (LCP) 25%
Primeira CPU ociosa (FCI) 13% Tempo total de bloqueio (TBT) 25%
Tempo para Interativo (TTI) 33% Tempo para Interativo (TTI) 15%
- - Mudança de esquema cumulativa (CLS) 5%

Aqui estão as métricas de seis velocidades para se concentrar enquanto você auditar seu site em preparação para o Lighthouse 6,0. As métricas são definidas na ordem em que são medidas à medida que a página é carregada.

Uma lista de verificação simplificada que abrange as velocidades que você deve ter como objetivo fornecer e técnicas de otimização por métrica são disponibilizadas na parte inferior deste artigo.

Primeira pintura Contentful

O FCP marca o primeiro ponto quando um usuário pode ver qualquer conteúdo de página na tela. Este conteúdo inclui texto, imagens, gráficos ou arquivos SVG. O FCP teve um peso de 20% no Lighthouse 5,7, mas apenas teve 15% de peso sobre a pontuação do Lighthouse 6,0.

Na tira de filme acima, o FCP para o carregamento da primeira página é medido em 0,6 segundos. É quando o conteúdo aparece pela primeira vez na página inicial do TheTieBar.com, mas você notará que não é quando todo o conteúdo estiver visível. Esta é uma distinção importante entre a primeira e a maior pintura contenciosa. O LCP é medido em 0,9 segundos quando o conteúdo acima da dobra é exibido.

À medida que você passar pela auditoria de pontuação do Lighthouse 6,0, certifique-se de que suas páginas tenham uma média de FCPs de 2 segundos ou menos, pois esse é o limite da métrica para o percentil 75 e é considerado rápido pelo Google. As FCPs entre 2 e 4 segundos são consideradas velocidades moderadas, e as FCPs superiores a 4 segundos caem abaixo do percentil 50 e são classificadas como lentas.

Se você achar que os FCPs estão carregando muito lentos, isso pode ser devido a um ou mais dos seguintes:

  1. Demasiados recursos de bloqueio de renderização
  2. Grandes arquivos CSS
  3. Falta de conexões seguras com origens de terceiros
  4. Tempos de resposta longos do servidor
  5. Redirecionamentos de várias páginas
  6. Recursos estáticos não armazenados em cache
  7. Tamanho excessivo do DOM

Para otimizar seu FCP, considere o seguinte:

  1. Recursos críticos inline, adie recursos não críticos e remova qualquer coisa não utilizada para reduzir o impactos de URLs de bloqueio de renderização.
  2. Remova todos os carateres desnecessários do CSS para diminuir o tamanho dos arquivos.
  3. Use o preconnect para estabelecer conexões antecipadas com origens importantes de terceiros.
  4. Reduza os tempos de resposta do servidor otimizando a lógica do aplicativo do servidor ou atualizando o hardware do servidor para ter mais memória.
  5. Evite mais de um redirecionamento de 1 páginas.
  6. Use o cache HTTP para armazenar em cache recursos estáticos.
  7. Tem menos de 1 500 nós no total, uma profundidade de menos de 32 nós e um nó pai com menos de 60 nós filhos para diminuir o tamanho do DOM.

Índice de velocidade

Si mede a progressão visual de uma carga de página e calcula uma pontuação geral para a rapidez com que o conteúdo é pintado. No Lighthouse 5,7, o SI tinha 27% de peso sobre o Performance Score de um site. No Lighthouse 6,0, isso é semi-diminuído, influenciando 15% do índice de desempenho de uma página. O Google ainda vê isso como uma métrica percetiva chave, já que uma página com uma exibição de imagem lenta pode ser percebida como janky.

O Lighthouse mede o SI capturando uma tira de filme de uma página à medida que carrega no navegador e analisando a progressão visual quadro a quadro. O tempo médio em que partes visíveis da página são exibidas determina o SI. Essa métrica será diferente com base nos tamanhos de tela do dispositivo.

À medida que você passar por sua auditoria de pontuação do Lighthouse 6,0, aponte para SIS em 4.3s ou menos. Essa velocidade está no percentil 75 e é considerada rápida pelo Google. As páginas com SIS entre 4,3 e 5,8 segundos são moderadas, e o SIS mais lento que 5,8 segundos caem abaixo do percentil 50 e são consideradas lentas.

Os tempos de SI mais lentos tendem a derreter-se dos seguintes:

  1. Os tempos de carga na rosca principal excedem 4 segundos
  2. O tempo de execução do JavaScript excede 3,5 segundos
  3. Arquivos de fonte grandes causam um flash de texto invisível (FOIT).

Para reduzir os tempos do SI, considere o seguinte:

  1. Implemente a divisão de código, remova o código não utilizado e comprima o código para reduzir a carga no thread principal e o tempo de execução do JavaScript.
  2. Certifique-se de que o texto permaneça visível durante o carregamento do Webfont para evitar FOIT.

Maior Contentful Paint

O LCP é uma nova métrica adicionada ao Lighthouse 6,0 e recebe 25% de peso no Performance Score de um site. O LCP substitui a Primeira Pintura Significativa (FMP) do Farol 5,7. Embora ambas as métricas meçam o tempo em que o maior elemento de conteúdo é exibido, o FMP é notório por produzir resultados inconsistentes e só pode ser padronizado em determinados navegadores da Web.

O LCP mede quando o maior elemento de conteúdo está totalmente visível no ecrã. Os elementos de conteúdo medidos incluem elementos de nível de bloco, imagens (incluindo imagens dentro de arquivos SVG) e vídeos. Essa é uma métrica extremamente importante para sites de comércio eletrônico, pois marca o ponto no tempo em que a maioria dos usuários percebe a página como totalmente carregada e é mais provável que faça uma compra.

No exemplo acima, o LCP é de 0,9 segundos, quando a imagem principal é totalmente pintada. Essa métrica captura um momento distinto quando um usuário percebe uma página totalmente carregada, mas o conteúdo ainda pode estar sendo carregado abaixo da dobra.

Sites de alto desempenho, como os do Layer0 (agora Edgio), entregam LCPs em menos de 1 segundo. LCPs até 2,5 segundos são considerados rápidos e ranqueados no percentil 75 para essa métrica. Os LCPs entre 2,5 segundos e 4 segundos são considerados moderados, necessitando de melhora, e os LCPs superiores a 4 segundos caem abaixo do percentil 50 e são considerados lentos pelo Google.

LCPs lentos geralmente decorre de um ou mais dos seguintes:

  1. Tempos de resposta lentos do servidor
  2. Bloqueio de renderização JavaScript e CSS
  3. Longos tempos de carregamento de recursos
  4. Problemas de renderização do lado do cliente

Se você encontrar mais lento do que os LCPs desejados durante sua auditoria de pontuação do Lighthouse 6,0, considere o seguinte:

  1. Otimize os tempos de resposta do servidor roteando o tráfego para a CDN mais próxima disponível, armazenando ativos em cache, servindo primeiro cache de páginas HTML e estabelecendo conexões de terceiros.
  2. Reduza o CSS removendo CSS desnecessário, adie CSS não crítico e CSS crítico em linha. Reduza o tempo de bloqueio de JavaScript compactando arquivos JavaScript.
  3. Para reduzir os tempos de carregamento de recursos, otimize e comprima arquivos de imagem e texto e pré-carregue recursos importantes.
  4. Otimize a renderização do lado do cliente usando renderização e pré-renderização do lado do servidor.

    Agende 1 uma conversa consultiva agora para saber como Layer0 (agora Edgio) pode ajudá-lo a obter cargas de páginas de sub-segundos 1 . Clique aqui!

Tempo total de bloqueio

O TBT substitui o FCI do Farol 5,7, que costumava conter 13% de peso. No Lighthouse 6,0, o TBT mede a capacidade de resposta da página e será responsável por 25% de um Performance Score. O TBT mede a gravidade de como uma página não interativa é antes de se tornar interativa de forma confiável.

Você conhece esses casos dolorosos: Você está esperando que uma página carregue e, finalmente, ela parece pronta. Você toca no produto que deseja ver, mas nada acontece. Toca novamente? Este período de espera é conhecido por literalmente causar estresse nosconsumidores. Essencialmente, TBT é o período de tempo que um consumidor sente esse estresse devido à não interatividade de uma página.

Fonte: web.dev

Esta métrica é medida calculando a soma total de tempo “bloqueado” (tarefas que demoram mais de 50 ms) entre o primeiro elemento de conteúdo exibido (FCP) e quando um usuário pode interagir totalmente com a página (TTI). Por exemplo, na imagem acima, há cinco tarefas ocorrendo no thread principal, mas apenas três delas excedem 50ms. O primeiro por 200ms, o segundo por 40ms, e o terceiro por 105ms. O TBT é (200 a 40 a 105) de 345ms.

Uma tarefa que demore mais de 50ms será longa o suficiente para que um usuário perceba e perceba a página como lenta, ou pior, inativa, e levá-los a sair. Para evitar isso, procure que um TBT abaixo de 300 ms seja considerado rápido. TBTs entre 300ms e 600ms são considerados velocidades moderadas e precisam de melhoria. Os TBTs mais lentos do que 600ms caem abaixo do percentil 50 e são considerados lentos.

Tarefas longas são normalmente causadas por um ou mais dos seguintes:

  1. Código de terceiros que bloqueia o thread principal por 250ms ou mais
  2. O tempo de execução do JavaScript leva mais de 3,5 segundos
  3. A rosca principal está ocupada por mais de 4 segundos durante a carga
  4. Um alto volume de solicitações de rede e grandes tamanhos de transferência

Para melhorar essa métrica, considere o seguinte:

  1. Carregue com eficiência JavaScript de terceiros usando os atributos assíncronos ou adiar em tags de script, estabeleça conexões iniciais com origens importantes de terceiros e use o lazy-loading.
  2. Para acelerar a execução do JavaScript e reduzir a carga na thread principal, implemente a divisão de código, remova o código não utilizado e comprima o código.
  3. Otimize CSS e JavaScript para reduzir contagens de recursos e tamanhos de transferência.

Tempo para Interativo

O TTI é a terceira métrica transportada do Lighthouse 5,7, mas o Google reduziu seu peso de 33% para 15% no Lighthouse 6,0. O TTI é uma métrica complementar do TBT, medindo quanto tempo uma página leva para se tornar confiável ou totalmente interativa. O Lighthouse considera uma página interativa de forma confiável quando o primeiro elemento de conteúdo é exibido, seus scripts iniciais (se houver) foram carregados e pode responder à entrada do usuário dentro de 50ms.

Para um usuário, TTIs lentos podem sentir que uma página está inativa ou quebrada. Embora uma página pareça interativa, não é porque o thread principal está bloqueado (medido pelo TBT). À medida que você auditar seu site para o Lighthouse 6,0, procure TTIs em 5,2 segundos ou menos para ser considerado rápido. TTIs entre 5,2 e 7,3 segundos são consideradas velocidades moderadas, e TTIs mais lentas do que 7,3 segundos são consideradas lentas e impactam a vontade dos consumidores de permanecer no local.

Se a sua auditoria de pontuação do Lighthouse 6,0 mostrar velocidades de TTI fracas, pode ser devido a uma ou mais das seguintes:

  1. Grandes tamanhos de carga útil e tempo de análise de script longo
  2. Longos tempos de carregamento de recursos
  3. Código de terceiros bloqueia o thread principal por 250ms ou mais
  4. Cadeias de pedidos críticas
  5. Velocidade lenta do thread principal e tempo de execução do JavaScript
  6. Altas contagens de recursos ou grandes tamanhos de transferência

Reduzir o tempo de TTI pode ser feito otimizando seu JavaScript. Isso inclui:

  1. Reduza e comprima arquivos JavaScript para reduzir o tamanho da carga útil e o tempo de análise do script.
  2. Solicitações de pré-carga e/ou adicionar pré-conexão para tempos de carregamento mais rápidos.
  3. Carregue eficientemente JavaScript de terceiros usando os atributos async ou defer em tags de script e usando lazy-loading.
  4. Reduza o efeito das cadeias de solicitação críticas no desempenho, reduzindo o número de recursos críticos e otimizando a ordem em que os recursos restantes são carregados.
  5. Implemente a divisão de código, remova o código não utilizado e comprima o código para reduzir a carga no thread principal e o tempo de execução do JavaScript.
  6. Otimize CSS e JavaScript para reduzir contagens de recursos e tamanhos de transferência.

Mudança de esquema cumulativa

CLS é a terceira nova métrica introduzida no Lighthouse 6,0, e é a única a não substituir nenhuma métrica do Lighthouse 5,7. O CLS representa os últimos 5% da sua pontuação no Lighthouse 6,0 e mede a estabilidade visual.

Essa métrica mede a frequência com que os usuários experimentam mudanças inesperadas de layout. Você já experimentou isso antes: Você está prestes a tocar em um produto, e bam, de repente, você toca em outra coisa na página porque os elementos mudaram. Essas experiências podem ser bastante irritantes e vistas como janky para um usuário.

O CLS é medido pela soma total de todas as pontuações de deslocamento de layout individuais para cada deslocamento inesperado de layout que ocorre durante toda a vida útil da página. Um bom CLS é inferior a 0,1 e está no percentil 75 para o desempenho. Um CLS entre 0,1 e 0,25 é considerado moderado, e qualquer medida maior que 0,25 cai abaixo do percentil 50 e é considerado lento pelo Google.

Se você encontrar um CLS ruim durante a sua auditoria de pontuação do Lighthouse 6,0, provavelmente é devido a um dos seguintes:

  1. Uma imagem ou redimensionamento de vídeo em si
  2. Uma fonte que carrega tarde e é exibida maior ou menor do que o pretendido

Para melhorar essa métrica, considere o seguinte:

  1. Inclua dimensões exatas em suas imagens e elementos de vídeo
  2. Evite anúncios pop-up ou banners
  3. Evite fontes que causam FOIT/FOUT

As pontuações do Farol mostram o que o Google pensa do seu site

A pontuação de desempenho do Lighthouse Performance de uma página indica como o Google percebe a página em termos de velocidade. Cada métrica no Lighthouse 6,0 reflete a melhor tentativa do Google de medir como os usuários percebem a velocidade. Se uma pontuação ficar abaixo dos padrões, ela será percebida como lenta, não apenas pelos usuários, mas pelo próprio gigante da busca, resultando em impactos negativos na receita e no SEO.

O Google classifica os sites mais rápido e mais alto na página de resultados do mecanismo de busca. Além do SEO, a velocidade do site tem impactos significativo nas conversões e nas receitas. A Amazon, por exemplo, descobriu que um atraso de 1 segundos no carregamento de páginas poderia custar à empresa uma perda de 1.6B porano.

Linha inferior

Esta versão mais recente do Lighthouse demonstra a ênfase do gigante de busca em métricas de velocidade percetiva. As métricas de pontuação no Lighthouse 6,0 tentam medir a rapidez com que os visitantes percebem sua página como totalmente carregada (mesmo que ainda esteja executando processos em segundo plano).

Três métricas, o primeiro Contentful Paint, o índice de velocidade e o maior Contentful Paint, medem a velocidade de carga percebida e representaram 55% da sua Pontuação de desempenho. Aponte para FCPs de 2 segundos, LCPs de 2,5 e SIS de 4,3 segundos ou menos.

Outros 40% de um Performance Score são baseados em métricas percetivas que medem a capacidade de resposta de uma página. Estes incluem tempo total de bloqueio e tempo para Interativo. Uma rápida auditoria de pontuação do Lighthouse 6,0 mostrará um TBT em menos de 300ms e TTI em menos de 5,2 segundos, ou um usuário perceberá seu site como janky.

Finalmente, ninguém gosta de texto ou imagens entrando e saindo da tela. A Mudança de Layout Cumulativa é a sexta métrica a ser contabilizada na sua auditoria do Lighthouse 6,0. Aponte para medições de CLS inferiores a 0,1, e você receberá 5% do peso que ele detém na sua Pontuação de desempenho.

Para receber uma lista de verificação simples cobrindo as velocidades que você deve ter como objetivo entregar em sua auditoria Lighthouse 6,0 Score, juntamente com técnicas de otimização por métrica, preencha o formulário abaixo.