Uma ferramenta muito eficaz para visualizar exatamente de onde vem o Cumulative Layout Shift (CLS) e aumentar a pontuação da sua página, melhorando assim a experiência do visitante.
Ele gera um GIF animado que mostra os movimentos dos elementos enquanto sua página está carregando.
Em alguns casos, muito mais eficaz do que um diagrama de carregamento em cascata.
| Análise cumulativa de mudanças de layout | Farol | Teste de página da Web | Ferramentas de desenvolvedor do Chrome |
|---|---|---|---|
| Saída: Ele gera um GIF mostrando quais elementos se movem na área visível e retorna a pontuação CLS. Páginas com muito movimento vertical podem dificultar a identificação dos elementos que se deslocaram. | Saída: O relatório lista o CLS entre os seguintes parâmetros: First Contentful Paint (Primeira Exibição de Conteúdo), Speed Index (Índice de Velocidade), Total Blocking Time (Tempo Total de Bloqueio) e Largest Contentful Paint (Maior Exibição de Conteúdo). A saída padrão é um relatório HTML, e o JSON está disponível mediante uma opção. | Saída: A faixa de vídeo exibe os quadros-chave do carregamento, e os gráficos em cascata apresentam uma linha vermelha sincronizada com a faixa de vídeo. A documentação define CLS como a medida de quanto o layout dentro da área visível se desloca durante o carregamento da página. | Saída: A faixa de alterações de layout no painel Desempenho exibe as alterações como losangos roxos, agrupados em clusters. Ao passar o cursor sobre o elemento, ele é destacado na área visível, e a aba Resumo fornece tempos, pontuações, elementos afetados e possíveis causas do problema. |
| Condições de teste: A resolução da área de trabalho é fixa em 1920 por 1080. No aplicativo para dispositivos móveis, utiliza-se o perfil Lighthouse Nexus 5X, e o uso da CPU e da rede é limitado para simular uma boa conexão 3G. | Condições de teste: Ele funciona em um Chrome local, a partir das Ferramentas de Desenvolvedor, da linha de comando, de um módulo Node ou do PageSpeed Insights. A linha de comando requer o Node 22 ou posterior. | Condições de teste: Os testes são executados em navegadores reais, de locais ao redor do mundo, sob condições de rede personalizáveis. O Chrome fornece a maior quantidade de informações. | |
| Definição de CLS: A versão 1.2.0 utiliza a métrica de janela de sessão máxima. A limitação de taxa é aplicada durante o teste. | Definição de CLS: Ferramentas de laboratório como o Lighthouse capturam alterações apenas durante o carregamento da página, portanto, os valores podem ser inferiores à experiência real dos usuários. | Definição de CLS: A mesma limitação do laboratório se aplica. A pontuação é o produto da fração de impacto e da fração de distância, sendo 0,1 ou menos o valor alvo. | Definição de CLS: Cada turno tem sua própria pontuação na aba Resumo. O CLS agrupa os turnos em janelas de sessão de até 5 segundos, com intervalos de menos de 1 segundo. |
| Abertura e automação: Uma versão de linha de comando é instalada com o npm (layout-shift-gif). Ela aceita opções de URL, dispositivo e saída, um arquivo de cookie opcional e suporta certificados HTTPS autoassinados. A página solicita doações opcionais via Ko-fi. | Abertura e automação: O Lighthouse possui licença Apache-2.0. Ele pode ser executado em CI através do Lighthouse CI e como um módulo Node. | Abertura e automação: O repositório possui uma branch master sob o Polyform Shield 1.0.0 e uma branch apache sob o Apache 2.0. Ele documenta a execução de sua própria instância e uma API REST. A maioria dos experimentos requer o WebPageTest Pro. |
Tópicos abordados: Mudança cumulativa de layout (CLS), pontuação da página, experiência do visitante, GIF animado, movimento de elementos, otimização de carregamento, interface do usuário, desempenho da web, análise visual, diagrama de carregamento, métricas da web, ISO 9241, ISO/IEC 25010, ISO 25012, ISO 25000 e ISO 9241-11.
Sugira a melhor ferramenta online:
Você conhece um site melhor, complementar ou substituto para o listado acima?
> Sugira aqui <
Imagens em tamanho real e downloads estão disponíveis apenas, 100% gratuitos, para membros registrados.
> Conecte-se <
