SparkCore
Mejorar Core Web Vitals con medios más ligeros
LCP y CLS suelen depender de imágenes pesadas. Archivos más pequeños y dimensiones fijas ayudan de inmediato.
En resumen
- Un buen resultado es: LCP de 2,5 segundos o menos, INP de 200 milisegundos o menos, CLS de 0,1 o menos.
- Las imágenes afectan sobre todo a LCP y CLS; INP depende más de JavaScript.
- No aplique nunca lazy load a su primera imagen grande y asigne width y height a cada imagen.
Mejoras rápidas
- Comprima el héroe y las fotos de producto
- Utilice formatos modernos
- Evite las cargas de tamaño excesivo
¿Qué son Core Web Vitals y qué puntuaciones son buenas?
Core Web Vitals miden cómo percibe una página el visitante. LCP mide la rapidez con que aparece el elemento visible más grande. INP mide la rapidez con que la página responde a clics y toques. CLS mide cuánto se desplaza el diseño durante la carga. Una buena puntuación es un LCP de 2,5 segundos o menos, un INP de 200 milisegundos o menos y un CLS de 0,1 o menos. Es preferible medir con datos reales de visitantes, y no solo con una prueba de laboratorio.
- LCP: 2,5 segundos o menos
- INP: 200 milisegundos o menos
- CLS: 0,1 o menos
¿Cómo mejorar LCP en WordPress?
En muchas páginas, el elemento LCP es una imagen grande, como un héroe o una foto de producto. Por eso, haga ese archivo lo más pequeño posible y sírvalo en un formato moderno. No lo cargue con lazy load: aparece de inmediato en pantalla y debe empezar a cargarse enseguida. Un servidor rápido y una caché de página reducen el tiempo de espera del primer byte, y eso también cuenta para LCP. Además, no suba una imagen mucho mayor que el espacio en que se muestra.
- Comprima el héroe y las fotos de producto
- Utilice WebP o AVIF con una alternativa
- No aplique lazy loading a la primera imagen
¿Cómo evitar el desplazamiento del diseño (CLS) con las imágenes?
El desplazamiento del diseño se produce cuando el navegador no conoce el tamaño de una imagen. El texto salta hacia abajo en cuanto llega la imagen. Por eso, asigne a cada imagen un width y un height. El navegador reserva entonces el espacio correcto antes de cargarla. WordPress suele añadir estos atributos por sí mismo a las imágenes de la biblioteca de medios. Aun así, revise sus propios bloques, componentes del tema y código. Reserve también espacio para banners, anuncios y fuentes que se cargan más tarde.
¿Qué se puede hacer con INP y dónde ayuda la caché?
INP depende sobre todo de JavaScript. Los scripts pesados de temas, plugins y rastreadores mantienen ocupado el hilo principal. Elimine lo que no utilice y aplace la carga del resto. Las imágenes desempeñan aquí un papel menor. La caché ayuda sobre todo con LCP. Una página en caché está lista antes, y un CDN acerca los archivos al visitante. Mida de nuevo tras cada cambio y ajuste una sola cosa a la vez; de lo contrario, no sabrá qué funcionó.
Preguntas frecuentes
Normalmente LCP, porque el elemento más grande suele ser una imagen. Comprima ese archivo, elija un formato moderno y no lo cargue con lazy load. Después le toca a CLS: asigne width y height a cada imagen.
No. Lazy loading está pensado para las imágenes que quedan por debajo del pliegue. WordPress aplica loading lazy automáticamente a las imágenes. La primera imagen grande, a menudo el elemento LCP, debe cargarse directamente; de lo contrario, su LCP será más lento.
Las imágenes son solo una parte de la historia. También influyen un alojamiento lento, scripts pesados, páginas sin caché y un diseño que se desplaza. Consulte en su informe, métrica por métrica, qué elemento o script es la causa.