Vamos ver como você pode usar o Lighthouse para encontrar os problemas exatos com os quais você pode estar lidando.
Olhando para os vitais essenciais da Web no Lighthouse
Para abrir o Lighthouse, clique com o botão direito em qualquer lugar da página da web e selecione Inspecionar .
Nike.com Vá para o relatório Lighthouse e procure as Oportunidades que ele lista. Eles informam onde você pode otimizar a velocidade da página por meio do desenvolvimento.
Inspecionando o LCP
Role para baixo para encontrar onde diz Exibir rastreamento original . Isso o levará para a linha do tempo, onde você pode encontrar quando o Core Web Vitals foi registrado.
Na captura de tela abaixo, você pode ver FP (primeira pintura), FCP (primeira pintura com conteúdo) e LCP listados nas temporizações.
Uma vez na linha do tempo, você pode aumentar o zoom para ver a imagem. Isso ajuda você a entender qual elemento o Lighthouse marca como o maior.
Nesse caso, é um marcador de posição para uma imagem grande. Este espaço reservado é uma boa prática para otimizar o LCP.
Abaixo está mais um exemplo de como examinar o LCP. Observe a lacuna de quanto tempo levou para esta imagem carregar-resultando em uma métrica LCP ruim.
Edition.cnn. com Novamente, o Lighthouse mostrará suas oportunidades recomendadas e diagnósticos sobre o desempenho do site para que você possa encontrar maneiras de melhorar o LCP
Este é um bom lugar para salvar uma captura de tela para o seu desenvolvedor e compartilhe as recomendações.
Performance Insights do Semrush
Outro lugar para obter ideias é no Semrush.
Do ferramenta Site Audit , a ferramenta Site Performance , em> relatório oferecerá uma visão sobre como corrigir quaisquer problemas relacionados à velocidade que foram vistos no rastreamento.
Para cada problema, você pode veja exatamente onde ocorreu e receba ideias sobre como você pode melhorar suas métricas de LCP.
Aqui você verá um relatório sobre quaisquer problemas envolvendo JavaScript, velocidades lentas de carregamento de página e HTML que podem ser otimizados.
Se você não é tão experiente em tecnologia como sua equipe de desenvolvimento, pode ser difícil decidir o que corrigir primeiro.
Uma boa maneira de fazer isso é coletar o máximo de informações específicas possível e fornecê-las aos desenvolvedores para que eles possam oferecer uma solução do ponto de vista deles.
Inspecionando FID/TBT
Em seguida, é hora de analisar o primeiro atraso de entrada-quanto tempo leva para um usuário interagir com a página.
De acordo com o web.dev artigo, “Longos primeiros atrasos de entrada normalmente ocorrem entre First Contentful Paint (FCP) e Time to Interactive (TTI).”
Para medir isso por meio de simulação, ferramentas como Semrush e Lighthouse usam o Total Blocking Time (TBT), uma métrica recomendada pelo Google em substituição ao FID.
O TBT mede o tempo total entre o First Contentful Paint (FCP) e Time to Interactive (TTI) e se correlaciona com FID, capturando problemas que afetam a interatividade e podem ser obtidos em condições de laboratório.
Para inspecionar, podemos ver um exemplo de carregamento lento imagem usando a guia Desempenho no console Dev. Você pode clicar em Exibir rastreamento original no relatório Lighthouse.
Em seguida, ative a configuração Web Vitals para ver quando Tarefas longas levam mais de 50 ms.
Estas são as instâncias em que o FID pode ser trabalhado ativado.
Algumas das recomendações do Lighthouse que podem ajudar com o FID incluem:
- Evite tarefas longas.
- Minimize o trabalho do thread principal.
- Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos.
Isso pode ajudar a ver quais scripts JavaScript podem ter causado longas tarefas para sua página.
Inspecionando CLS
Mudança cumulativa de layout é a métrica que basicamente informa quanto a página salta e muda como resultado de problemas com imagens, fontes e itens dinâmicos, como po p-ups.
Para descobrir que parte de uma página mudou:
- Vá para a guia Desempenho (clique em Exibir rastreamento original no relatório Lighthouse).
- Veja a trilha Experiência para descobrir quando ocorreram mudanças.
- Amplie e procure por Mudanças de layout para ver que parte da página fez essas mudanças durante o carregamento.
Algumas recomendações no Lighthouse que podem ajudar a lidar com as mudanças de layout são para:
Conclusão
Embora ninguém possa saber o quanto de impacto o Core Web Vitals terá nos rankings do Google, é sempre melhor estar preparado e ciente de onde suas páginas da web podem ser agilizadas e fornecer uma experiência melhor.
É por isso que recomendamos usar a auditoria do site da Semrush e o Lighthouse para obter todas as informações de que você precisa para fornecer à sua equipe de desenvolvimento instruções claras para melhorar esses aspectos vitais.
Não se esqueça de que o próprio Google enfatizou ize como “great, relevant content ” ainda deve ser sua principal prioridade-com a experiência da página como um fator adicional além dessa meta inicial.
