Los Core Web Vitals (CWV) son tres metricas de rendimiento que Google usa como senales de ranking: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS). Mejorar estas puntuaciones no solo ayuda al SEO. Mejora directamente la experiencia que tienen tus visitantes en tu sitio. Las paginas mas rapidas obtienen mas engagement, menores tasas de rebote y mayores tasas de conversion. Aqui tienes un enfoque exhaustivo y practico para mejorar cada metrica en WordPress.
Mide antes de optimizar
Antes de hacer cambios, establece una linea base para poder seguir tu progreso. Usa estas herramientas para medir tus Core Web Vitals actuales:
- Google PageSpeed Insights: introduce tu URL en pagespeed.web.dev. La parte superior muestra datos de campo de usuarios reales (si estan disponibles), y la inferior muestra datos de laboratorio de un test simulado. Los datos de campo son los que Google usa realmente para los rankings.
- Google Search Console: ve al informe "Core Web Vitals" en "Experiencia." Muestra datos agregados de todo tu sitio, agrupados por movil y ordenador. Destaca que URLs necesitan mejora y cuales pasan.
- Chrome DevTools: abre DevTools (F12), ve a la pestana "Performance" y ejecuta una grabacion mientras cargas tu pagina. Te da datos detallados de tiempo para cada recurso y paso de renderizado.
- Extension Web Vitals para Chrome: instala la extension "Web Vitals" para mediciones CWV en tiempo real mientras navegas por tu propio sitio.
Anota tus valores base de LCP, INP y CLS. Despues de cada optimizacion, vuelve a probar para confirmar la mejora.
Optimizacion de LCP: hacer que el contenido principal cargue mas rapido
LCP mide cuanto tarda en aparecer en pantalla el elemento visible mas grande (normalmente una imagen hero, un titulo o un bloque de texto grande). Google considera un LCP por debajo de 2,5 segundos como "bueno." Asi puedes reducirlo:
- Identifica tu elemento LCP: en PageSpeed Insights, baja hasta el diagnostico "Largest Contentful Paint element" para ver exactamente que elemento es tu LCP. Saberlo te indica donde centrarte.
- Optimiza la imagen hero: si tu elemento LCP es una imagen, comprimela, conviertela a WebP o AVIF y asegurate de que tiene el tamano adecuado para el contenedor. Una imagen de 3000px de ancho en un contenedor de 1200px desperdicia ancho de banda. Anade
fetchpriority="high"para indicarle al navegador que priorice su descarga. - Precarga recursos criticos: anade una pista de preload en tu
<head>para la imagen LCP, de modo que el navegador empiece a descargarla inmediatamente en lugar de esperar a descubrirla durante el renderizado:
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high" />- Reduce el tiempo de respuesta del servidor: un TTFB lento retrasa todo. Usa un plugin de cache (consulta nuestra guia de cache), actualiza tu hosting si el TTFB supera de forma constante los 600ms y considera un CDN para servir contenido desde servidores geograficamente mas cercanos.
- Elimina CSS y JS bloqueantes: mueve el CSS no critico para que se cargue de forma asincrona y aplaza el JavaScript que no se necesita para el renderizado inicial. Las funciones "Optimizar entrega de CSS" y "Retrasar ejecucion de JavaScript" de WP Rocket lo hacen automaticamente.
- Usa un CDN: servir assets estaticos (imagenes, CSS, JS) desde servidores edge cercanos a tus visitantes reduce la latencia. Cloudflare, BunnyCDN y KeyCDN se integran bien con WordPress.
- Elimina plugins innecesarios: cada plugin puede anadir archivos CSS y JS a la pagina. Desactiva y elimina los plugins que ya no necesites. Usa el plugin Query Monitor para ver que plugins anaden mas sobrecarga.
Optimizacion de INP: que las interacciones se sientan instantaneas
INP mide la rapidez con la que tu pagina responde cuando un usuario hace clic en un boton, toca un enlace o escribe en un campo. Google considera un INP por debajo de 200 milisegundos como "bueno." Un mal INP suele venir de JavaScript que bloquea el hilo principal. Asi se corrige:
- Reduce el tiempo de ejecucion de JavaScript: revisa tus plugins y elimina los que anadan JavaScript pesado que no necesites. Sliders, widgets de redes sociales y page builders complejos suelen contribuir significativamente. Usa la pestana Coverage en Chrome DevTools (Ctrl+Mayus+P, escribe "Coverage") para ver cuanto del JS cargado se usa realmente.
- Aplaza scripts no criticos: anade el atributo
defera scripts que no se necesitan para la carga inicial. Plugins como Flying Scripts permiten retrasar scripts especificos hasta la interaccion del usuario (scroll, clic o pulsacion de tecla). - Minimiza scripts de terceros: rastreadores de analitica, pixeles publicitarios, widgets de chat en vivo y embeds de redes sociales ejecutan JavaScript. Cada uno anade tiempo de ejecucion. Consolida cuando sea posible, cargalos despues de la interaccion del usuario o reemplaza embeds pesados con alternativas estaticas (por ejemplo, una captura de pantalla de un tweet en lugar del script de embed de Twitter).
- Divide tareas largas: las tareas de JavaScript que duran mas de 50ms bloquean el hilo principal y retrasan las interacciones del usuario. Si escribes JavaScript propio, usa
requestAnimationFrameosetTimeoutpara dividir calculos pesados en trozos mas pequenos. - Reduce el tamano del DOM: un DOM grande (mas de 1500 nodos) hace que cada operacion JavaScript sea mas lenta porque el navegador tiene que procesar mas elementos. Simplifica la estructura de tu pagina, elimina divs envolventes innecesarios y considera si realmente todas las secciones de contenido son necesarias en la carga inicial.
Optimizacion de CLS: evita que el contenido salte
CLS mide cuanto contenido visible se desplaza inesperadamente durante la carga de la pagina. Google considera un CLS por debajo de 0,1 como "bueno." Los desplazamientos de layout frustran a los usuarios porque provocan clics erroneos y movimiento visual desorientador. Asi puedes eliminarlos:
- Establece dimensiones explicitas para las imagenes: incluye siempre los atributos
widthyheighten tus imagenes. WordPress lo hace automaticamente para las imagenes insertadas a traves de la biblioteca de medios, pero las imagenes anadidas manualmente en HTML personalizado o mediante page builders pueden carecer de estos atributos. Sin dimensiones, el navegador no sabe cuanto espacio reservar, lo que hace que el contenido salte cuando la imagen carga. - Reserva espacio para anuncios y embeds: si muestras anuncios, establece un
min-heighten el contenedor del anuncio que coincida con el tamano esperado del anuncio. Lo mismo aplica para embeds de YouTube, widgets de redes sociales y otros contenidos de terceros que cargan de forma asincrona. - Usa font-display swap: cuando las fuentes personalizadas cargan lentamente, el navegador puede ocultar el texto hasta que la fuente este lista y luego mostrarlo de golpe, causando un desplazamiento de layout. Establece
font-display: swapen tus declaraciones@font-facepara que el navegador muestre el texto inmediatamente con una fuente de respaldo y cambie a la fuente personalizada cuando este lista:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}- Evita inyectar contenido above the fold despues de la carga: banners, barras de notificacion y popups de consentimiento de cookies que empujan el contenido hacia abajo causan desplazamientos de layout. Usa posicionamiento sticky u overlays en lugar de insertar elementos en el flujo del documento.
- Precarga las fuentes web: si tu tema usa fuentes personalizadas, precargalas para que esten disponibles antes y reducir el tiempo que se muestra la fuente de respaldo:
<link rel="preload" as="font" href="/fonts/custom.woff2" type="font/woff2" crossorigin />Plugins de WordPress que ayudan con los Core Web Vitals
Varios plugins abordan multiples metricas CWV a la vez:
- WP Rocket: cache de pagina, optimizacion CSS/JS, lazy loading, retraso de ejecucion JS. El plugin individual mas completo para mejoras de CWV.
- Autoptimize: plugin gratuito para minificacion y concatenacion de CSS y JS, e inline critical CSS. Funciona bien junto a un plugin de cache.
- Perfmatters: plugin ligero para deshabilitar funciones de WordPress no usadas (emojis, embeds, dashicons), gestionar scripts por pagina y anadir pistas de preload.
- Flying Scripts: plugin gratuito que retrasa la ejecucion de JavaScript hasta la interaccion del usuario. Especialmente eficaz para scripts de terceros como Google Analytics, Facebook Pixel y widgets de chat.
- OMGF (Optimize My Google Fonts): descarga las Google Fonts localmente y optimiza su carga, eliminando la peticion externa y mejorando tanto el LCP como el CLS.
Monitorizar mejoras a lo largo del tiempo
Los datos de campo de Core Web Vitals (los datos que Google usa para los rankings) se actualizan en un periodo movil de 28 dias. Esto significa que las mejoras no apareceran en Search Console de inmediato. Despues de hacer cambios, espera al menos cuatro semanas antes de evaluar el impacto en Search Console. Mientras tanto, usa los datos de laboratorio de PageSpeed Insights y la extension Web Vitals de Chrome para obtener feedback mas rapido. Establece una rutina mensual: ejecuta PageSpeed Insights en tus paginas clave, anota las puntuaciones y compaaralas con el mes anterior. Esto te ayuda a detectar regresiones pronto, especialmente despues de actualizaciones de plugins o cambios de tema.
Verifica los Core Web Vitals con InspectWP
InspectWP comprueba muchos factores que influyen en los Core Web Vitals: codificacion de contenido (GZIP/Brotli), version del protocolo HTTP (HTTP/2 o HTTP/3), numero total de imagenes, recuento de archivos JS y CSS, y el tamano total del HTML. Usa estas metricas como punto de partida para identificar que areas necesitan atencion. Ejecuta un analisis tras cada optimizacion para confirmar la mejora.