Curso HTML 18.2 Minimizar peticiones innecesarias desde el marcado

18.2 Minimizar peticiones innecesarias desde el marcado

En un proyecto web, cada etiqueta que carga un recurso (CSS, JavaScript, fuentes, imágenes…) genera una petición HTTP. Demasiadas peticiones
al servidor ralentizan la carga de la página y aumentan la latencia. En este apartado exploraremos técnicas avanzadas para reducir peticiones
innecesarias directamente desde el marcado HTML, optimizando así la experiencia de usuario.

1. Combinar y agrupar recursos

• Agrupar varios archivos CSS o JS en uno solo reduce el número de peticiones.
• Extraer el critical CSS e incluirlo inline, posponiendo el resto para carga asíncrona.

2. Atributos defer y async en JavaScript

• defer descarga el script en paralelo y lo ejecuta tras parsear el documento.
• async descarga en paralelo y lo ejecuta inmediatamente al terminar la descarga, interrumpiendo el parser.

3. Data URIs e inline SVG

• Pequeñas imágenes (iconos, fondos) pueden codificarse en Base64 o inline SVG para evitar peticiones separadas.
• Útil para assets de pocos KB.

4. Resource Hints: preload, prefetch, preconnect

• preload: recurso crítico que se va a usar pronto (fuentes, CSS, imágenes above the fold).
• prefetch: recurso que se usará en navegación futura (páginas siguientes).
• preconnect: establece conexiones (DNS, TCP, TLS) anticipadas a un dominio externo.

5. Lazy-loading de imágenes y iframes

• El atributo loading='lazy' retrasa la carga de imágenes/iframes hasta que entren en viewport.
• Reduce peticiones iniciales y mejora CLS (Cumulative Layout Shift).

6. Sprites de iconos y fuentes de iconos

• Unificar múltiples iconos en un solo sprite SVG o fuente de iconos.
• Reduce docenas de peticiones en un único archivo.

7. Eliminar recursos no utilizados

• Auditorías con herramientas (Lighthouse, Coverage en Chrome DevTools) para detectar CSS/JS no referenciado.
• Depurar etiquetas link o script que ya no se utilizan.

8. Carga condicional y renderizado progresivo

• Cargar módulos JS o bloques HTML solo si el usuario interactúa o cumple ciertas condiciones.
• Mejora Time to Interactive (TTI).

Mostrar gráfico

  

Resumen de buenas prácticas