Cómo arreglar páginas lentas y Core Web Vitals
Core Web Vitals mide qué tan rápido se siente una página: qué tan pronto aparece el contenido principal, qué tan rápido responde y qué tan estable se mantiene. Cada una tiene una lista corta de causas habituales.
Los tres números a los que apuntar
| Métrica | Mide | Bueno |
|---|---|---|
| LCP | Cuándo aparece el contenido principal | 2,5 s o menos |
| INP | Qué tan rápido responde la página a la interacción | 200 ms o menos |
| CLS | Cuánto se desplaza el diseño | 0,1 o menos |
Ejecuta la Prueba de velocidad de página para ver tus números. Las puntuaciones varían entre ejecuciones, y un despliegue recién hecho puede parecer más lento hasta que se llenen las cachés, así que prueba más de una vez.
Las pruebas de laboratorio simulan una visita. Los datos de campo provienen de usuarios reales de Chrome, y son los que Google usa para evaluar la experiencia de página. Un sitio nuevo puede no tener datos de campo todavía.
Cómo mejorar un LCP lento
El elemento más grande suele ser una imagen principal o un titular. Empieza por la imagen:
- Comprímela y redimensiónala al tamaño en el que se muestra, y usa WebP o AVIF.
- Nunca cargues la imagen principal de forma diferida, e indícale al navegador que es importante:
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="...">- Comprueba que el servidor responde rápido. Un hosting lento retrasa todo lo que viene después, así que usa un CDN y guarda en caché tu HTML siempre que puedas.
- Activa la compresión y confírmala con la Prueba de compresión de sitio web.
Cómo mejorar un INP lento
El INP es malo cuando el JavaScript mantiene ocupado al navegador, de modo que los toques y clics tienen que esperar. Los scripts de terceros, como los widgets de chat y los rastreadores, son causas frecuentes.
- Elimina los scripts que no necesitas y carga el resto con
defer. - Retrasa el trabajo pesado hasta después de que la página se haya cargado, o hasta que alguien lo necesite.
- Divide las tareas largas en partes más pequeñas, para que el navegador pueda responder entre ellas.
Cómo reducir un CLS alto
El contenido salta cuando algo se carga tarde y empuja todo hacia abajo.
- Asigna un
widthy unheighta cada imagen y vídeo. - Reserva espacio para anuncios e incrustaciones con una altura mínima fija.
- Evita añadir banners encima de contenido que ya se ha cargado.
Por dónde empezar
Arregla primero tus plantillas más visitadas. Una página de inicio, una página de producto y una plantilla de entrada de blog suelen cubrir la mayor parte de un sitio. Cambia una cosa a la vez y vuelve a probar, así sabrás qué ayudó.
