Aller au contenu principal

Optimizar los Core Web Vitals en WordPress en 2026

Par AIFORYA — 30 de julio de 2026 — 16 de lecture

En esta página (10)

Introducción: el tema real no es la velocidad, es el arbitraje

La mayoría de las guías sobre Core Web Vitals responden a una pregunta que nadie se hace de verdad: ¿cómo hago que una página vacía sea muy rápida? La pregunta real, la que enfrentan las agencias y los equipos técnicos, es la contraria: ¿cómo conservo un sitio que hace cosas —consentimiento, búsqueda por facetas, carrito, reseñas, analítica— y aun así supero los umbrales?

De ahí parte esta guía. No propone eliminar funcionalidades hasta que suba la puntuación: esa estrategia funciona en el panel y fracasa en producción, porque un sitio que ya no convierte tampoco necesita ser rápido. Propone un método de arbitraje, métrica por métrica, con el coste real de cada funcionalidad y la respuesta técnica correspondiente.

Un caso aparece más que todos los demás, y por eso tiene su propia sección: el banner de consentimiento. Es obligatorio, se muestra antes que todo lo demás, la mitad de las veces lo inyecta un tercero — y hoy es una de las principales causas de desplazamiento visual medido en la web. Es por tanto el ejemplo perfecto de la tensión que aborda esta guía: una obligación no negociable que daña una métrica y que se repara sin suprimirla.

1. Lo que Google mide realmente (y por qué tu puntuación de Lighthouse te engaña)

Tres métricas componen los Core Web Vitals en 2026:

MétricaQué mideBuenoA mejorarMalo
LCP — Largest Contentful Painttiempo hasta pintar el elemento de contenido más grande≤ 2,5 s≤ 4 s> 4 s
CLS — Cumulative Layout Shiftinestabilidad visual durante la vida de la página≤ 0,1≤ 0,25> 0,25
INP — Interaction to Next Paintcapacidad de respuesta percibida en todas las interacciones≤ 200 ms≤ 500 ms> 500 ms

INP sustituyó a FID en marzo de 2024. Si tu documentación interna sigue hablando de First Input Delay, describe un indicador que ya no existe — y la diferencia no es cosmética. FID medía solo el retardo hasta que se atendía la primera interacción: un sitio podía congelarse dos segundos en cada clic posterior y seguir en verde. INP mide la latencia completa —retardo de entrada, procesamiento y el siguiente pintado— en prácticamente todas las interacciones de la visita, y reporta la peor (o casi, en páginas con muchísimas interacciones). Muchos sitios cómodamente verdes en FID pasaron a rojo sin cambiar una sola línea.

El segundo malentendido es aún más costoso: la puntuación que usa Google no viene de Lighthouse. Viene de CrUX, el conjunto de mediciones recogidas de visitantes reales de Chrome. Tres consecuencias prácticas:

  • Cuenta el percentil 75, no la media. Tres visitas de cada cuatro deben cumplir el umbral. Una minoría de visitantes con un móvil de gama media y red 4G basta para tumbar una página que a ti te parece instantánea.
  • La ventana es móvil, de 28 días. Una corrección desplegada hoy no se lee mañana en los datos de campo; se lee progresivamente y por completo al cabo de un mes. Es la primera causa de conclusiones falsas de fracaso — se revierte una buena corrección porque «no cambió nada» a los tres días.
  • Lighthouse es un laboratorio, en una máquina sin extensiones, sin caché de terceros, a menudo sin tu banner en su estado real. Es excelente para diagnosticar una causa y muy pobre para validar un resultado.

Regla de método: se diagnostica en laboratorio, se concluye en campo. Una auditoría que solo cita puntuaciones de Lighthouse no mide lo que Google califica.

2. LCP: descomponer antes de optimizar

El LCP no es un bloque monolítico. Se descompone en cuatro segmentos, y el error más común es optimizar el equivocado:

  1. TTFB — tiempo hasta el primer byte. Alojamiento, base de datos, ausencia de caché.
  2. Retardo de carga del recurso — el intervalo entre la llegada del HTML y el inicio real de la descarga de la imagen (o el texto) que constituye el LCP.
  3. Duración de carga del recurso — la descarga en sí.
  4. Retardo de renderizado — el intervalo entre tener el recurso disponible y pintarlo.

En WordPress el reparto está muy desequilibrado: el TTFB y el retardo de carga dominan, y la duración de descarga rara vez es el problema principal. Dicho de otro modo: comprimir aún más la imagen de cabecera mejora el segmento más corto.

Lo que mueve el TTFB:

  • caché de páginas en servidor, más una caché de objetos persistente (Redis) para las consultas repetidas;
  • la caza de consultas lentas, opciones autoload sobredimensionadas y meta_query sin índice — Query Monitor las expone en minutos;
  • la reducción del trabajo que se hace en todas las páginas por plugins que solo se necesitan en una.

Lo que mueve el retardo de carga:

  • identificar el elemento LCP real — a menudo la imagen destacada, a veces solo un titular renderizado con una fuente remota;
  • nunca aplicar loading="lazy" a ese elemento: es la antioptimización más extendida en WordPress, porque la carga diferida global está activada por defecto;
  • darle fetchpriority="high" y precargar el recurso cuando se descubre tarde (imagen de fondo en CSS, carrusel);
  • eliminar las hojas de estilo bloqueantes que la primera pantalla no necesita;
  • servir las fuentes con font-display: swap y autoalojarlas — una fuente de terceros añade una resolución DNS y un handshake TLS a la ruta crítica.

Merece conocerse una palanca más reciente: en un embudo previsible (página de categoría → producto), las reglas de especulación permiten al navegador preparar la navegación siguiente. El LCP percibido de la segunda página se vuelve casi nulo. Úsalo con moderación: se anticipa una intención probable, no todo el menú.

3. CLS: el desplazamiento es casi siempre una altura no reservada

El CLS tiene una única causa con cinco variantes: algo aparece y empuja el contenido ya pintado. La respuesta es siempre la misma — reservar el espacio antes de que llegue.

  • Imágenes y vídeos: siempre width y height, o aspect-ratio en CSS. Una imagen sin dimensiones es un desplazamiento garantizado.
  • Publicidad e incrustaciones (mapas, reproductores, widgets de reseñas): un contenedor con altura mínima fija. Un iframe que se redimensiona tras cargar desplaza todo lo que va debajo.
  • Fuentes: el cambio de la fuente de reserva a la definitiva altera la métrica del texto y mueve las líneas. font-display: swap junto con sobrescrituras de métricas (size-adjust, ascent-override) hace el cambio casi invisible.
  • Contenido inyectado en la parte superior: barra promocional, aviso de stock, barra de traducción. Insertados en el flujo, desplazan la página entera.
  • El banner de consentimiento — véase la sección 5, porque merece más que una línea.

Dos precisiones que ahorran tiempo. Primera: el CLS se mide durante toda la vida de la página, no solo en la carga; un desplazamiento provocado por un clic en un acordeón también cuenta (salvo si ocurre en la ventana de 500 ms posterior a una interacción del usuario — los desplazamientos esperados, como abrir un menú, quedan excluidos). Segunda: content-visibility: auto en las secciones bajo la línea de flotación reduce el trabajo de renderizado sin crear desplazamiento, siempre que se aporte un contain-intrinsic-size creíble.

4. INP: la métrica que castiga las funcionalidades mal cableadas

Aquí es donde el arbitraje «funcionalidades contra rendimiento» se juega de verdad, porque el INP mide exactamente lo que consumen las funcionalidades: el hilo principal.

Una interacción se descompone en tres fases: retardo de entrada (el hilo está ocupado, el evento espera), procesamiento (se ejecutan tus manejadores) y retardo de presentación (el navegador recalcula y pinta). Un INP malo se explica casi siempre por tareas largas — bloques de JavaScript de más de 50 ms que monopolizan el hilo.

Lo que fabrica tareas largas en WordPress:

  • scripts de terceros cargados de forma síncrona en la cabecera;
  • un manejador de eventos asociado a un número enorme de elementos en lugar de delegado en un ancestro común;
  • llamadas en cascada a admin-ajax.php donde bastaría un único endpoint REST;
  • hidratar componentes interactivos en todas las páginas cuando solo se usan en una;
  • trabajo síncrono disparado por el primer desplazamiento o el primer movimiento del ratón.

Las respuestas, por rendimiento decreciente:

  1. Partir el trabajo. Devolver el control al navegador entre trozos, con scheduler.yield() donde esté disponible y una cesión de tarea clásica en el resto. Un proceso de 400 ms partido en ocho trozos de 50 ms produce un INP aceptable con el mismo tiempo total.
  2. Diferir lo que no se ve. Cargar el código de un componente cuando el usuario se le acerca, no al cargar la página.
  3. Sacar a los terceros del hilo principal cuando sea posible, o al menos cargarlos de forma asíncrona tras el primer pintado.
  4. No pagar por lo que no se muestra. Desregistrar condicionalmente estilos y scripts por plantilla es la palanca más rentable de WordPress, y la más desatendida.
  5. Preservar la caché de retroceso. Una cabecera Cache-Control: no-store o un listener unload olvidado desactiva el retroceso instantáneo — una regresión invisible en toda auditoría de laboratorio.

5. El caso del consentimiento: obligatorio, costoso y reparable

Esta es la situación real. La normativa exige consentimiento previo y bloqueo efectivo de los scripts no esenciales. El banner debe aparecer pronto, por encima de todo, y el código de medición debe esperar. Cada una de esas obligaciones golpea una métrica distinta:

  • CLS: el banner es el arquetipo del contenido inyectado en la parte superior. Insertado en el flujo, desplaza la página completa; y como aparece en la primera visita de cada usuario, afecta precisamente al tráfico que Google mide.
  • INP: una solución de terceros carga un script de gestión del consentimiento antes de que sea posible cualquier interacción. Si ese script es grande y síncrono, la primera interacción —a menudo el clic en el propio banner— se convierte en la más lenta de la visita.
  • LCP: paradójicamente, bloquear los scripts antes del consentimiento mejora el LCP. Las etiquetas de analítica y publicidad dejan de competir con el contenido principal. Un banner bien construido hace el primer pintado más rápido, no más lento.

De ahí un método preciso, y no un compromiso:

  1. Superponer, no insertar. Un banner en position: fixed queda fuera del flujo: cubre en vez de empujar. Desplazamiento nulo por construcción. Este único punto es lo que da la vuelta al CLS.
  2. Renderizar el banner en servidor. Generado en el HTML inicial en lugar de inyectado por JavaScript, está presente en el primer pintado — sin aparición tardía y sin script en la ruta crítica.
  3. Separar presentación y lógica. El HTML y el CSS del banner son mínimos; lo pesado es la librería que gestiona categorías, pruebas y registro. Nada obliga a cargar esta última antes de que el usuario haga clic.
  4. Guardar las pruebas en tu propia infraestructura. Un consentimiento registrado en tu base de datos evita un viaje de ida y vuelta a un servicio de terceros en la ruta crítica — y te pertenece, lo que importa al menos tanto como el rendimiento.
  5. Comprobar el estado tras el consentimiento. La trampa real está después del clic: todos los scripts autorizados despiertan a la vez y fabrican una tarea larga de varios cientos de milisegundos. Hay que liberarlos de forma escalonada.

El tema en sí se trata a fondo en nuestra guía técnica de RGPD y cookies para WordPress, y la comparativa de soluciones existentes en nuestro análisis de alternativas a Complianz. En términos de rendimiento puro, AIFORYA RGPD Consentimiento aplica los cinco puntos anteriores por defecto: renderizado en servidor, superposición, almacenamiento local de pruebas.

6. La tabla de arbitraje: conservar la funcionalidad, pagar menos

Este es el núcleo de la guía. Para cada funcionalidad costosa existe una respuesta que no consiste en eliminarla.

FuncionalidadLo que cuestaRespuesta — sin suprimirla
Banner de consentimientoCLS, INPrenderizado en servidor + superposición fija + lógica al hacer clic
Carrusel de cabeceraLCP, INPprimera diapositiva en HTML estático con fetchpriority, script del carrusel tras el primer pintado
Búsqueda por facetasINP, TTFBfiltrado en servidor con URL limpias, índice dedicado, resultados paginados
Reseñas de clientesCLS, LCPcontenedor con altura reservada, carga al desplazar, nota agregada renderizada en servidor
AnalíticaINPcargar tras el consentimiento y tras el primer pintado, de forma escalonada
Chat en vivoINP, LCPsustituir el widget por un botón estático que carga el script al hacer clic
Fuentes de marcaLCP, CLSautoalojamiento, dos grosores como máximo, sobrescrituras de métricas
Vídeo decorativoLCPminiatura estática clicable, reproductor cargado a demanda
Constructor de páginasLCP, INPpurgar estilos no usados por plantilla, desregistro condicional

La lógica común a toda la columna derecha: mover el coste al momento en que el usuario lo necesita. Casi ninguna funcionalidad necesita estar lista en el milisegundo cero; casi todas se cargan como si lo necesitaran.

7. Medir sin engañarse

Un protocolo en cinco puntos, aprendido por la vía costosa:

  1. Medir antes de corregir. Sin punto de partida, cualquier mejora es una creencia.
  2. Medir por plantilla, no por sitio. Portada, categoría, producto, artículo y carrito tienen perfiles sin relación. Una media del sitio oculta justamente la plantilla que falla.
  3. Conservar un testigo. Una página comparable que no se toca. Si mejora tanto como las corregidas, la causa estaba en otra parte — un despliegue, un cambio de alojamiento, una estacionalidad.
  4. Esperar la ventana de 28 días antes de concluir sobre los datos de campo, comprobando de inmediato en laboratorio que la corrección hace lo que crees.
  5. Desconfiar de un indicador que nunca se mueve. Una sonda que devuelve el mismo número tras un cambio real no mide lo que crees. Ocurre más de lo que parece, y siempre es el instrumento lo primero que hay que revisar.

8. Lista de verificación operativa

Servidor

  • Caché de páginas activa, caché de objetos persistente instalada
  • Consultas lentas y autoload auditados
  • Compresión y HTTP/2 o superior confirmados

LCP

  • Elemento LCP identificado en cada plantilla principal
  • Ningún loading="lazy" en ese elemento
  • fetchpriority="high" puesto, precarga si se descubre tarde
  • Fuentes autoalojadas, dos grosores máximo

CLS

  • Dimensiones o aspect-ratio en todas las imágenes e iframes
  • Altura reservada para publicidad, reseñas e incrustaciones
  • Banner de consentimiento en superposición, nunca en el flujo
  • Ninguna barra superior inyectada en el flujo

INP

  • Ningún script de terceros síncrono en la cabecera
  • Procesos largos partidos con cesión del hilo
  • Estilos y scripts desregistrados por plantilla
  • Despertar de scripts escalonado tras el consentimiento
  • Caché de retroceso preservada

Medición

  • Datos de campo seguidos por plantilla
  • Página testigo sin modificar conservada
  • Conclusiones diferidas a la ventana de 28 días

Conclusión

Los Core Web Vitals no piden un sitio más pobre: piden un sitio ordenado. Las tres métricas sancionan el mismo error desde tres ángulos — trabajo hecho demasiado pronto, para un usuario que aún no lo ha pedido. El TTFB sanciona el trabajo de servidor inútil, el CLS el contenido que llega después de haber sido prometido, el INP el código que se ejecuta antes de ser útil.

Corolario alentador: la mayor parte de las mejoras no cuesta ninguna funcionalidad. Cuestan rigor sobre el cuándo. Y el caso del consentimiento lo demuestra mejor que ningún otro — la obligación normativa que parecía más hostil al rendimiento se convierte, bien implementada, en una mejora del primer pintado.

Para profundizar en las imágenes, a menudo la primera fuente de ganancia en LCP, véase AIFORYA Image SEO; para el instrumental de medición y las correcciones por plantilla, AIFORYA Page Speed Pro. Nuestras extensiones premium incluyen reembolso íntegro en 14 días.

Optimizar los Core Web Vitals en WordPress en 2026 | AIFORYA