Curso HTML 18.5 Checklist de rendimiento relacionado con HTML

18.5 Checklist de rendimiento relacionado con HTML

Este checklist recoge las mejores prácticas para optimizar la entrega y el rendimiento de tu código HTML. Cada punto incluye explicación, beneficios y ejemplos de implementación.

1. Minificar el HTML

La minificación elimina espacios en blanco, saltos de línea y comentarios innecesarios. Con ello se reduce el tamaño del documento y el tiempo de descarga.

<div class='header'>
    <!-- Logo principal -->
    <img src='logo.png' alt='Logo'>
</div>


<div class='header'><img src='logo.png' alt='Logo'></div>
  

2. Eliminar comentarios y código no usado

Los comentarios y bloques de código inactivos (HTML o scripts embebidos) inflan el documento. Eliminalos o mantenlos en tu repositorio, no en producción.

<!--
<script src='experimental-feature.js'></script>
-->


  

3. Uso de atributos async y defer en <script>

Los scripts bloquean el rendering si se cargan de manera síncrona. Con async y defer optimizas la carga:

• async: descarga y ejecuta tan pronto esté disponible.
• defer: descarga en paralelo, ejecuta cuando el DOM esté listo.

<script src='script.js' async></script>


<script src='analytics.js' defer></script>
  

4. Lazy loading de imágenes y iframes

Retrasa la carga de recursos no visibles con el atributo loading='lazy' (nativo en navegadores modernos).

<!-- Imagen con lazy loading -->
<img src='foto-grande.jpg' alt='Paisaje'
     width='800' height='600'
     loading='lazy'>

<!-- Iframe con lazy loading -->
<iframe src='https://www.youtube.com/embed/VIDEOID'
        width='560' height='315'
        loading='lazy'></iframe>
  

5. Hints de precarga (<link rel='preload'>, prefetch, dns-prefetch)

Los resource hints ayudan al navegador a priorizar recursos críticos o anticiparse a peticiones:

<!-- Preload de fuente crítica -->
<link rel='preload' href='/fonts/OpenSans.woff2'
      as='font' type='font/woff2' crossorigin>

<!-- Prefetch de datos que se usarán en la siguiente navegación -->
<link rel='prefetch' href='/next-page-data.json' as='fetch'>

<!-- DNS prefetch para dominios externos pesados -->
<link rel='dns-prefetch' href='//analytics.example.com'>
  

6. Optimizar la declaración de <meta charset>

Coloca la etiqueta <meta charset='utf-8'> lo más pronto posible para evitar re-procesos:

<!-- Dentro de <head>, preferiblemente en la primera línea -->
<meta charset='utf-8'>
  

7. Evitar document.write() y contenido dinámico bloqueante

document.write() bloquea el parsing y puede generar errores en modo asíncrono. Usar APIs modernas de DOM en su lugar:

<!-- Mal: genera bloqueo y posibles reemplazos de toda la página -->
<script>
  document.write('<p>Hola mundo</p>');
</script>

<!-- Bien: creación dinámica sin bloquear -->
<script defer>
  document.addEventListener('DOMContentLoaded', function(){
    var p = document.createElement('p');
    p.textContent = 'Hola mundo';
    document.body.appendChild(p);
  });
</script>
  

8. Usar HTML semántico y minimizar wrappers

Los elementos semánticos ayudan a abarcar menos CSS/JS y mejoran accesibilidad y parseo. Evita <div> innecesarios:

<!-- No semántico y pesado -->
<div class='section wrapper header'>
  <div class='logo'><img src='logo.svg'></div>
  <div class='nav'>...</div>
</div>

<!-- Semántico y ligero -->
<header>
  <img src='logo.svg' alt='Logo'>
  <nav>...</nav>
</header>
  

9. Eliminar recursos no utilizados (‘dead code’)

Revisa periódicamente tu HTML para detectar <link>, <script> o bloques que ya no se consumen. Herramientas como Coverage en DevTools ayudan a identificarlo.

10. Tablas y listas accesibles

Las tablas deben llevar <thead>, <tbody> y atributos scope para mejorar parsing y accesibilidad:

<table>
  <thead>
    <tr>
      <th scope='col'>Nombre</th>
      <th scope='col'>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Luis</td>
      <td>35</td>
    </tr>
  </tbody>
</table>
  

11. Comprobar tiempos de First Contentful Paint (FCP) y Largest Contentful Paint (LCP)

Aunque es más medición que HTML puro, adapta tu estructura para que el contenido crítico esté lo antes posible en el DOM.

Resumen de la checklist