Análise de métricas page Speed insights 1.0
Siglas e seus significados
FCP (First Contentful Paint)
Tempo, em milissegundos, até o navegador renderizar o primeiro elemento de conteúdo (texto, imagem, etc.).
LCP (Largest Contentful Paint)
Tempo até o maior elemento de conteúdo ser exibido, indicando quando a “parte principal” da página ficou visível.
CLS (Cumulative Layout Shift)
Soma das “mudanças de layout” inesperadas ao longo do carregamento, sem unidade de tempo (valor entre 0 e 1).
TBT (Total Blocking Time)
Tempo total, em milissegundos, em que o thread principal ficou
bloqueado — período em que o usuário não consegue interagir.
- Tron>TBT (Total Blocking Time)Tempo total, em milissegundos, em que o thread principal ficou bloqueado — período em que o usuário não consegue interagir.
- SI (Speed Index)Índice que mede a velocidade média de exibição do conteúdo visual, em milissegundos
⚠️ Atenção: não utilize esta ferramenta para consultar ou “rastrear” sites que você não opera ou não tem autorização. Realizar pesquisas em páginas de terceiros pode infringir termos de uso, políticas de privacidade e legislação de proteção de dados.
FCP (First Contentful Paint)
Tempo, em milissegundos, até o navegador renderizar o primeiro elemento de conteúdo (texto, imagem, etc.).
LCP (Largest Contentful Paint)
Tempo até o maior elemento de conteúdo ser exibido, indicando quando a “parte principal” da página ficou visível.
CLS (Cumulative Layout Shift)
Soma das “mudanças de layout” inesperadas ao longo do carregamento, sem unidade de tempo (valor entre 0 e 1).
TBT (Total Blocking Time)
Tempo total, em milissegundos, em que o thread principal ficou
bloqueado — período em que o usuário não consegue interagir.
- SI (Speed Index)Índice que mede a velocidade média de exibição do conteúdo visual, em milissegundos
PageSpeed Insights v1.0.0
Como usar a ferramenta
- Digite a URL completa do site que deseja analisar (ex.:
https://seusite.com). - Selecione a estratégia de teste: mobile ou desktop.
- Clique em Analisar. O botão será desativado por 60 segundos para evitar excesso de chamadas.
- Aguarde a mensagem de “Carregando…” enquanto a API processa a requisição.
- Após a resposta, serão exibidos dois gráficos:
- Categorias Lighthouse (Performance, Accessibility, Best Practices, SEO, PWA).
- Core Web Vitals (FCP, LCP, CLS, TBT, Speed Index).
- Se desejar, clique em Baixar PDF para obter um relatório completo com todos os resultados.
Como a ferramenta trabalha
Quando o usuário envia uma URL e escolhe a estratégia, o front‑end faz uma requisição à
PageSpeed Insights API v5, passando a chave de API. A resposta JSON contém:
lighthouseResult.categories: notas de Performance, Accessibility, Best Practices, SEO e PWA, cada uma de 0 a 1 (multiplicadas por 100 para exibição).lighthouseResult.audits: métricas de Core Web Vitals, como FCP, LCP, CLS, TBT e Speed Index.
O código extrai esses valores, converte para unidades legíveis (ms ou percentual), e plota dois gráficos de barras
usando Chart.js. Também implementa:
- Cooldown de 60 s entre análises (armazenado em
localStorage). - Indicação de estado (“Carregando…”, erros detalhados).
- Geração de PDF local via
jsPDF, sem envio de dados a servidores externos.
0comments
Postar um comentário
Tem alguma dúvida , então nos envie uma mensagem por este formulário