Optimiza LCP, CLS e INP desde el marcado HTML con decisiones de carga, prioridad y estabilidad visual.
El rendimiento no empieza en JavaScript: empieza en HTML.
LCP mejora cuando priorizas el contenido principal (imagen hero, fuente crítica, CSS base).
CLS baja cuando reservas espacio para imágenes, vídeos y embeds.
INP mejora evitando scripts bloqueantes y cargas innecesarias en el primer render.
Piensa en causa y efecto, no en hacks. 📈
No todo debe cargar con la misma urgencia.
El navegador necesita pistas para decidir qué descargar antes. Si el hero depende de una imagen pesada o una fuente, dale prioridad explícita.
Evita sobreusar `preload`: úsalo solo en recursos realmente críticos del primer pantallazo.
El usuario odia clicar un botón que se mueve.
Los saltos de contenido suelen venir de imágenes sin dimensiones, banners que aparecen tarde o iframes sin espacio reservado.
La solución no es compleja: declara tamaños y define contenedores estables desde el HTML.
Optimiza LCP, CLS e INP desde el marcado HTML con decisiones de carga, prioridad y estabilidad visual.
Código del tema: preload | fetchpriority | lazy | width/height | defer
Piensa en causa y efecto, no en hacks. 📈
Prioriza el recurso principal con `preload`/`fetchpriority`.
Define `width` y `height` para evitar saltos de layout.
Reduce bloqueo inicial: scripts con `defer` y menos trabajo temprano.
No todo debe cargar con la misma urgencia.
El navegador necesita pistas para decidir qué descargar antes. Si el hero depende de una imagen pesada o una fuente, dale prioridad explícita.
Evita sobreusar `preload`: úsalo solo en recursos realmente críticos del primer pantallazo.
<head>
<link rel="preload" as="image" href="/img/hero.webp" />
<link rel="stylesheet" href="/css/app.css" />
</head>
<body>
<img
src="/img/hero.webp"
alt="Equipo colaborando"
width="1200"
height="640"
fetchpriority="high"
loading="eager"
decoding="async"
/>
</body>El usuario odia clicar un botón que se mueve.
Los saltos de contenido suelen venir de imágenes sin dimensiones, banners que aparecen tarde o iframes sin espacio reservado.
La solución no es compleja: declara tamaños y define contenedores estables desde el HTML.
<img src="/img/curso.jpg" alt="Curso" width="640" height="360" loading="lazy" />
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Vídeo del curso"
width="560"
height="315"
loading="lazy"
></iframe>