Checklist de velocidade de página para HTML
Cole o HTML de uma página para encontrar scripts que bloqueiam a renderização, imagens sem tamanho ou lazy loading, viewport ausente, @import, document.write e mais.
Abra a página, use "Exibir código-fonte" (Ctrl+U), copie tudo e cole aqui.
Adicione defer (ou async para scripts independentes) para o navegador renderizar a página antes de baixar o script.
<script src="https://cdn.example.com/analytics.js">
Defina width e height (ou aspect-ratio no CSS) para o navegador reservar espaço e o layout não pular (CLS).
<img src="/hero.jpg" alt="Hero">
Adicione loading="lazy" às imagens que não aparecem na primeira tela.
<img src="/b.png" alt="B" width="300" height="200">
Sirva WebP ou AVIF (ex.: com <picture>) – geralmente 25–50% menores com a mesma qualidade.
<img src="/hero.jpg" alt="Hero"> <img src="/a.png" alt="A" width="300" height="200"> <img src="/b.png" alt="B" width="300" height="200">
Adicione loading="lazy" a incorporações como vídeos e mapas.
<iframe src="https://www.youtube.com/embed/xyz">
Adicione <meta name="viewport" content="width=device-width, initial-scale=1"> para exibir corretamente no celular.
<meta name="viewport">
Adicione <meta charset="UTF-8"> como primeiro elemento do <head>.
<meta charset="UTF-8">
Adicione <link rel="preconnect"> para origens de terceiros importantes e abra as conexões mais cedo.
cdn.example.com
Verificações aprovadas (8)
- ✓ Poucas folhas de estilo bloqueantes
- ✓ Sem CSS @import
- ✓ As regras @font-face inline definem font-display
- ✓ A primeira imagem não usa carregamento lento
- ✓ Sem document.write()
- ✓ O código inline é pequeno
- ✓ Tamanho do DOM razoável
- ✓ Tamanho do HTML razoável
O que é Checklist de velocidade de página?
Esta ferramenta revisa o código-fonte HTML de uma página com uma lista de problemas comuns de desempenho front-end e explica como corrigir cada um: scripts e folhas de estilo que bloqueiam a renderização, @import no CSS, @font-face sem font-display, imagens sem dimensões ou sem lazy loading, imagem principal com lazy loading, formatos de imagem antigos, iframes sem lazy loading, viewport ou charset ausentes, document.write, código inline grande, preconnect ausente e DOM ou HTML grandes demais.
Como usar Checklist de velocidade de página
- Abra a sua página, use Exibir código-fonte da página (Ctrl+U) e copie tudo.
- Cole o HTML e clique em Analisar.
- Revise as constatações ordenadas por impacto, com as tags problemáticas mostradas como exemplos.
- Expanda "Verificações aprovadas" para ver o que já está bom.
Exemplo
The sample page (analytics.js without defer, hero.jpg without size, iframe without lazy, no viewport)
8 possible improvements: 1 render-blocking script, 1 image without width/height, 1 below-the-fold image without lazy loading, 3 JPEG/PNG images, 1 iframe without lazy loading, no viewport, no charset, 1 third-party origin without preconnect
Quando usar Checklist de velocidade de página
Use para uma revisão estática rápida de templates ou páginas, ou quando não puder rodar o Lighthouse. A ferramenta não mede tempos reais de carregamento nem os Core Web Vitals e não vê recursos acrescentados por JavaScript; use o Lighthouse ou o PageSpeed Insights para dados de laboratório e de campo.
Como funciona Checklist de velocidade de página
O HTML é examinado no seu navegador com um parser de tags leve, depois da remoção dos comentários. Cada regra inspeciona tags e atributos específicos – por exemplo tags <script> externas no <head> sem async, defer ou type=module, <img> sem width e height, imagens depois das duas primeiras sem loading="lazy" ou mais de 1.500 elementos no total. As origens de terceiros de scripts e folhas de estilo são comparadas com os links de preconnect e dns-prefetch. Nenhuma página é carregada e nenhum JavaScript é executado.
Casos de Uso Comuns
- Encontrar scripts que bloqueiam a renderização no cabeçalho de um tema.
- Identificar imagens que causam mudança de layout por não terem width e height.
- Conferir se a imagem principal não está com lazy loading (ruim para o LCP).
- Revisar templates de e-mail HTML ou de landing pages antes do lançamento.
Perguntas Frequentes
Isso é o mesmo que o Google PageSpeed Insights?
Não. O PageSpeed Insights carrega a página e a mede. Esta ferramenta só lê o HTML que você colar, então é instantânea e privada, mas não consegue medir a velocidade.
Por que a primeira imagem não deve ter lazy loading?
A maior imagem acima da dobra costuma ser o elemento de Largest Contentful Paint. O lazy loading a atrasa até o layout, o que prejudica o LCP.
Todo script deve usar defer?
Scripts que precisam do DOM e rodam em ordem devem usar defer; scripts independentes, como analytics, podem usar async. O código crítico inline deve continuar pequeno.