Mejorar las Core Web Vitals: el orden que realmente ayuda

Activar un plugin de caché es el primer paso y, a menudo, el único que se da. Después, el valor se queda en «necesita mejorar» y ahí sigue. El motivo: las tres métricas miden tres cosas distintas, y la caché solo ayuda de verdad con una de ellas.

Los tres valores, en una frase cada uno

De ahí se deduce el orden: primero las imágenes, luego los scripts y después la maquetación. La caché actúa sobre todo en el tiempo del servidor, es decir, en una parte del LCP, y en el INP casi nada.

Paso 1: la imagen más grande

En la mayoría de las páginas, la imagen hero es la candidata a LCP. Tres cosas ayudan de inmediato, en este orden:

1. Reducirla al tamaño que realmente se necesita: una foto de 4000 píxeles de ancho en un área de 1200 píxeles de ancho es la causa individual más frecuente.
2. Convertirla a un formato moderno (WebP o AVIF), con una alternativa para los navegadores antiguos.
3. NO aplicarle carga diferida. La imagen de la parte superior debe cargarse de inmediato: aquí Lazy-Load empeora el valor en lugar de mejorarlo.

Comprueba dónde se realiza la conversión. Algunos plugins envían tus imágenes a un servicio del fabricante para ello. Quien no quiera eso necesita una herramienta que convierta en local: la primera pasada tarda más, pero nada sale de casa.

Paso 2: el JavaScript

El INP es el valor en el que la caché no ayuda. Mide cuánto tarda el navegador en reaccionar a un clic, y lo bloquean los scripts que están trabajando justo en ese momento.

La palanca más eficaz es prescindir: un slider que nadie usa; una ventana de chat en cada página; tres familias tipográficas, dos de las cuales pasan desapercibidas. Solo después merecen la pena defer, la combinación de archivos y el retraso hasta la primera interacción.

Paso 3: acabar con los saltos

• Cada imagen necesita width y height en el marcado: así el navegador reserva el espacio
• Colocar los contenidos incrustados en un contenedor de altura fija
• Servir las fuentes en local y controlarlas con font-display, en lugar de cargarlas desde fuera
• Integrar los banners de cookies y las barras de avisos de forma que se superpongan al contenido en lugar de desplazarlo

Solo entonces: caché, Minify, Preload

Una caché de páginas ahorra la generación de la página: es mucho si el servidor es lento y poco si es rápido. Minify ahorra bytes y es la causa más frecuente de páginas rotas tras una optimización. Preload es una orden, no una petición: demasiadas desplazan justo lo que se necesita primero.

Activa las opciones de Minify de una en una y comprueba cada vez una página con formulario, el carrito y una página con vídeo. Quien lo activa todo a la vez tiene que buscar entre diez interruptores cuando algo falla.

Medir bien

Hay que distinguir dos mediciones. Una prueba de laboratorio mide en condiciones fijas y sirve para comparar el antes y el después. Los datos de campo proceden de visitantes reales con dispositivos y conexiones reales, y son los que deciden cómo clasifica Google la página.

Por eso: mide siempre en las mismas condiciones, tres veces en lugar de una, y ten en cuenta que los datos de campo tardan semanas en reflejar un cambio. Quien mira al cabo de una hora y no nota nada no ha optimizado demasiado poco, sino que ha mirado demasiado pronto.

Cuándo el plugin ya no ayuda

Hay un límite a partir del cual ningún plugin de caché puede hacer más: un maquetador sobrecargado con treinta scripts, un proveedor de alojamiento con una carga base elevada, un tema que lo carga todo en cada página. Si la respuesta del servidor ya es lenta sin contenido, no es culpa del plugin.

Preguntas frecuentes