Checklist HTML de velocidad de página
Pega el HTML de una página para encontrar scripts que bloquean el renderizado, imágenes sin tamaño ni lazy loading, viewport ausente, @import, document.write y más.
Abre la página, usa "Ver código fuente" (Ctrl+U), cópialo todo y pégalo aquí.
Añade defer (o async en scripts independientes) para que el navegador pinte la página antes de descargar el script.
<script src="https://cdn.example.com/analytics.js">
Define width y height (o aspect-ratio en CSS) para que el navegador reserve espacio y no haya saltos de diseño (CLS).
<img src="/hero.jpg" alt="Hero">
Añade loading="lazy" a las imágenes que no se ven en la primera pantalla.
<img src="/b.png" alt="B" width="300" height="200">
Sirve WebP o AVIF (p. ej. con <picture>): suelen pesar un 25–50 % menos con la misma calidad.
<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">
Añade loading="lazy" a elementos incrustados como vídeos y mapas.
<iframe src="https://www.youtube.com/embed/xyz">
Añade <meta name="viewport" content="width=device-width, initial-scale=1"> para que se vea bien en móviles.
<meta name="viewport">
Añade <meta charset="UTF-8"> como primer elemento de <head>.
<meta charset="UTF-8">
Añade <link rel="preconnect"> para los orígenes externos importantes y abre las conexiones antes.
cdn.example.com
Comprobaciones superadas (8)
- ✓ Pocas hojas de estilo bloqueantes
- ✓ Sin CSS @import
- ✓ Las reglas @font-face inline definen font-display
- ✓ La primera imagen no tiene carga diferida
- ✓ Sin document.write()
- ✓ El código inline es pequeño
- ✓ Tamaño del DOM razonable
- ✓ Tamaño del HTML razonable
¿Qué es Checklist de velocidad de página?
Esta herramienta revisa el código HTML de una página con una lista de problemas habituales de rendimiento front-end y explica cómo corregir cada uno: scripts y hojas de estilo que bloquean el renderizado, @import de CSS, @font-face sin font-display, imágenes sin dimensiones o sin carga diferida, una imagen principal con carga diferida, formatos de imagen antiguos, iframes sin carga diferida, viewport o charset ausentes, document.write, código en línea muy grande, preconnect ausente y DOM o HTML de tamaño excesivo.
Cómo usar Checklist de velocidad de página
- Abre tu página, usa Ver código fuente (Ctrl+U) y copia todo.
- Pega el HTML y pulsa Analizar.
- Revisa los hallazgos ordenados por impacto, con las etiquetas problemáticas como ejemplos.
- Despliega «Comprobaciones superadas» para ver lo que ya está bien.
Ejemplo
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
Cuándo usar Checklist de velocidad de página
Úsala para una revisión estática rápida de plantillas o páginas, o cuando no puedas ejecutar Lighthouse. No mide tiempos de carga reales ni Core Web Vitals y no puede ver recursos añadidos por JavaScript; usa Lighthouse o PageSpeed Insights para obtener datos de laboratorio y de campo.
Cómo funciona Checklist de velocidad de página
El HTML se examina en tu navegador con un analizador de etiquetas ligero tras eliminar los comentarios. Cada regla inspecciona etiquetas y atributos concretos: por ejemplo, etiquetas <script> externas en <head> sin async, defer ni type=module, <img> sin width y height a la vez, imágenes posteriores a las dos primeras sin loading="lazy", o más de 1500 elementos en total. Los orígenes de terceros de scripts y hojas de estilo se comparan con los enlaces preconnect y dns-prefetch. No se carga ninguna página ni se ejecuta JavaScript.
Casos de Uso Comunes
- Encontrar los scripts que bloquean el renderizado en la cabecera de un tema.
- Detectar imágenes que provocan saltos de diseño por no tener width y height.
- Comprobar que la imagen principal no tiene carga diferida (perjudica el LCP).
- Revisar plantillas de email HTML o de landing pages antes del lanzamiento.
Preguntas Frecuentes
¿Es lo mismo que Google PageSpeed Insights?
No. PageSpeed Insights carga la página y la mide. Esta herramienta solo lee el HTML que pegas, así que es instantánea y privada, pero no puede medir la velocidad.
¿Por qué la primera imagen no debe tener carga diferida?
La imagen más grande visible sin desplazarse suele ser el elemento Largest Contentful Paint. La carga diferida la retrasa hasta el cálculo del diseño, lo que perjudica el LCP.
¿Todos los scripts deberían usar defer?
Los scripts que necesitan el DOM y se ejecutan en orden deberían usar defer; los independientes, como la analítica, pueden usar async. El código crítico en línea debería ser pequeño.