Curso HTML 18. Rendimiento y optimización desde HTML

18. Rendimiento y optimización desde HTML

En este punto profundizaremos en técnicas y recomendaciones para optimizar el rendimiento de una página web a nivel de marcado HTML. Abordaremos la priorización de recursos, el manejo de imágenes y fuentes, la minimización del código y el uso de herramientas de auditoría, todo ello con ejemplos detallados.

1. Priorización y carga eficiente de recursos

El navegador sigue una serie de pasos al cargar el HTML y resolver recursos externos (scripts, hojas de estilo, fuentes, etc.). Para mejorar los tiempos de carga y evitar bloqueos, podemos aplicar:

• async y defer en scripts
• <link rel=’preload’>, prefetch, preconnect y dns-prefetch

1.1 Uso de async y defer

Ambos atributos cargan scripts de forma asíncrona, pero con diferencias:

Ejemplo de uso:

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


<script src='vendor.js' defer></script>
<script src='main.js' defer></script>

1.2 Hints de recursos (<link>)

Los hints permiten indicar al navegador que anticipe la carga o la conexión de ciertos recursos.

• preload: Prioriza un recurso crítico (fuentes, scripts, estilos).
• prefetch: Trae recursos para futuras navegaciones.
• preconnect: Abre la conexión TCP/DNS/TLS a un dominio.
• dns-prefetch: Resuelve DNS anticipadamente.

<link rel='dns-prefetch' href='//fonts.gstatic.com'>


<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>


<link rel='preload' href='/fonts/miFuente.woff2' as='font' type='font/woff2' crossorigin>


<link rel='prefetch' href='/js/gallery-lightbox.js' as='script'>

2. Minimización del HTML

Reducir el tamaño del HTML acelera el parseo y la transferencia. Recomendaciones:

• Eliminar espacios en blanco innecesarios y saltos de línea.
• Compactar condicionales y comentarios que no son críticos en producción.
• Usar atributos booleanos sin valor (checked, disabled).

<ul>
  
  <!-- Lista de navegación principal -->
  <li><a href='/'>Inicio</a></li>
  <li><a href='/blog'>Blog</a></li>
  
</ul>


<ul>
<li><a href='/'>Inicio</a></li><li><a href='/blog'>Blog</a></li>
</ul>

3. Optimización de imágenes en HTML

• srcset y sizes para adaptarse a resoluciones y dispositivos.
• Lazy loading nativo con el atributo loading='lazy'.
• <picture> para formatos modernos (webp, avif).

<!-- Imagen responsiva con srcset y lazy loading -->
<img 
  src='imagen-pequena.jpg' 
  srcset='
    imagen-pequena.jpg 480w,
    imagen-mediana.jpg 800w,
    imagen-grande.jpg 1200w
  '
  sizes='(max-width: 600px) 480px, (max-width: 960px) 800px, 1200px'
  alt='Ejemplo de optimización'
  loading='lazy'
/>

<!-- Uso de picture para formatos avanzados -->
<picture>
  <source type='image/avif' srcset='imagen.avif'>
  <source type='image/webp' srcset='imagen.webp'>
  <img src='imagen.jpg' alt='Imagen compatible'>
</picture>

4. Manejo eficiente de fuentes web

• Preload de fuentes críticas.
• Utilizar font-display (swap) para evitar bloqueo de texto invisible.
• Subconjunto (subset) de glyphs si sólo se muestran caracteres limitados.

<!-- Prioriza la descarga de la fuente principal -->
<link rel='preload' href='/fonts/OpenSans-Regular.woff2' 
      as='font' type='font/woff2' crossorigin>

<!-- En el CSS (mencionado sólo a nivel de contexto) -->
/* @font-face {
   font-family: 'Open Sans';
   src: url('/fonts/OpenSans-Regular.woff2') format('woff2');
   font-display: swap;
} */

5. Minimizar peticiones HTTP

A nivel HTML podemos:

1. Combinar varios scripts en uno solo cuando sea posible.
2. Colocar scripts al final del documento (defer) para no bloquear el render.
3. Agrupar iconos (SVG sprite) o usar <svg> inline.

<!-- Sprite SVG para todos los iconos de la web -->
<svg aria-hidden='true' style='display:none'>
  <symbol id='icon-menu' viewBox='0 0 24 24'>
    <path d='M4 6h16M4 12h16M4 18h16'/>
  </symbol>
  <symbol id='icon-close' viewBox='0 0 24 24'>
    <path d='M6 6l12 12M6 18L18 6'/>
  </symbol>
</svg>

<!-- Reutilización -->
<svg class='icon'><use href='#icon-menu'></use></svg>

6. Carga progresiva y code splitting

Si tu aplicación usa módulos, carga componentes pesados sólo cuando el usuario los necesita (dynamic import). Aunque la configuración se realiza en JavaScript, en HTML puedes:

• Marcar contenedores con atributos data- para conectar módulos por demanda.
• Dejar un esqueleto ligero (skeleton) en HTML que luego se rellena.

<!-- Skeleton de galería -->
<div id='galeria' data-module='gallery'>
  <p>Cargando galería...</p>
</div>

7. Herramientas de auditoría

Para medir el impacto de estas optimizaciones, emplea:

• Lighthouse (integrado en Chrome DevTools).
• WebPageTest.
• PageSpeed Insights.

Revisa métricas clave: First Contentful Paint, Largest Contentful Paint, Total Blocking Time.

Conclusión

Una buena estrategia de optimización en HTML combina reducción de pesos, priorización de recursos, carga diferida y uso de etiquetas semánticas. Estas prácticas, acompañadas de auditorías frecuentes, garantizan un sitio rápido y eficiente.