Maquetación Web Dinámica / Accesibilidad y rendimiento
Core Web Vitals: LCP, CLS e INP
"Rápido" no es una sensación vaga: se mide. Google definió tres métricas — las Core Web Vitals— que capturan cómo se SIENTE tu sitio al cargarlo y usarlo, y que afectan tanto la experiencia como tu posición en búsquedas. Con tres analogías las entiendes de una vez, y con Lighthouse las mides en tu propia página.
Las tres preguntas de un buen restaurante
CLS en vivo: el plato que se mueve
El más fácil de VER y de arreglar. Ocurre cuando algo carga tarde (una imagen, un banner) sin espacio reservado y EMPUJA el contenido:
<button id="cargar" class="btn">Simular carga del banner</button>
<div class="cols">
<div class="col">
<h4>✗ Sin espacio reservado</h4>
<div id="slotMal" class="slot"></div>
<p class="txt">Este texto SALTA hacia abajo cuando el banner llega tarde. Ibas a hacer clic aquí... y se movió.</p>
</div>
<div class="col">
<h4>✓ Con espacio reservado</h4>
<div id="slotBien" class="slot reservado"></div>
<p class="txt">Este texto NO se mueve: el hueco del banner ya estaba reservado con min-height.</p>
</div>
</div>body { font-family: system-ui; padding: 16px; background: #f8fafc; }
.btn { padding: 9px 16px; border: 0; border-radius: 8px; background: #6d28d9; color: white; font-weight: 600; cursor: pointer; margin-bottom: 16px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.col { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
.col h4 { margin: 0 0 8px; font-size: 14px; color: #334155; }
.reservado { min-height: 70px; }
.banner { height: 70px; display: grid; place-items: center; background: #ede9fe; color: #4c1d95; font-weight: 700; border-radius: 8px; }
.txt { font-size: 13px; color: #475569; line-height: 1.5; }document.querySelector("#cargar").addEventListener("click", () => {
const banner = "<div class='banner'>Banner (llegó tarde)</div>";
// izquierda: sin espacio reservado → el texto de abajo se empuja (CLS)
document.querySelector("#slotMal").innerHTML = banner;
// derecha: el hueco ya existía (min-height) → nada se mueve
document.querySelector("#slotBien").innerHTML = banner;
});Dale al botón: el texto de la izquierda SALTA (eso es CLS), el de la
derecha no. La cura es reservar el espacio: dimensiones en imágenes
(width/height o aspect-ratio), min-height en huecos de contenido
async. Nunca dejes que algo tardío empuje lo que ya se veía.
Las causas y curas rápidas
| Métrica | Causa común | Cura |
|---|---|---|
| LCP lento | Imagen del hero pesada, fuentes que bloquean, servidor lento | Optimizar/precargar la imagen del hero, font-display: swap, menos JS bloqueante |
| CLS alto | Imágenes/anuncios sin dimensiones, fuentes que reflowean | Reservar espacio (dimensiones, aspect-ratio, min-height) |
| INP alto | JavaScript pesado que bloquea el hilo al interactuar | Dividir tareas largas, menos trabajo en el clic, requestIdleCallback |
Medir con Lighthouse
Al cargar tu página, el botón de 'Aceptar cookies' aparece de repente y empuja todo el contenido hacia abajo justo cuando el usuario iba a hacer clic en un enlace. ¿Qué métrica empeora y cómo se arregla?
Mini-reto
Corre Lighthouse sobre "El Observador" (build de producción, incógnito) y
anota los tres puntajes de Core Web Vitals. Luego provoca un CLS a
propósito: mete una imagen SIN width/height arriba del contenido y
recarga con la red lenta simulada (DevTools → Network → Slow 3G) para ver
el salto; después arréglalo con dimensiones o aspect-ratio y confirma que
el salto desaparece. Medir y arreglar un CLS real es una habilidad que se
paga.
Qué sigue
Sabes qué medir. La próxima lección ataca la causa #1 de sitios lentos —el peso de imágenes y fuentes— con la regla del 80/20: el puñado de técnicas que dan la mayor mejora de velocidad con el menor esfuerzo.