Core Web Vitals WordPress Web Vitals API 2025

[INFO] Este artículo está diseñado para desarrolladores y sysadmins que ya tienen experiencia con WordPress y buscan llevar su optimización al siguiente nivel. Asumimos que conoces conceptos como render blocking, lazy loading y CDN.

La velocidad de carga ya no es solo una cuestión de experiencia de usuario (UX); es un factor de ranking directo. Con la llegada de Core Web Vitals, Google puso sobre la mesa métricas cuantificables y medibles: LCP (Largest Contentful Paint), FID (First Input Delay) y CLS (Cumulative Layout Shift). Optimizar estos indicadores en WordPress es un desafío complejo que va más allá de instalar un plugin de caché.

Para dominar realmente el SEO técnico avanzado, necesitas datos precisos, no estimaciones. Aquí es donde entra la Web Vitals API. Mientras que herramientas como PageSpeed Insights o Lighthouse te dan datos de laboratorio (simulados), la Web Vitals API te proporciona métricas de campo reales, es decir, datos de usuarios reales que navegan por tu sitio.

En este artículo, desglosaremos cómo implementar la Web Vitals API en WordPress para monitorizar, diagnosticar y optimizar cada una de las tres métricas principales.

¿Por qué la Web Vitals API y no solo PageSpeed Insights?

La principal diferencia radica en el origen de los datos. PageSpeed Insights y Lighthouse ejecutan pruebas en un entorno controlado (generalmente un servidor de Google en EE.UU.). Esto es útil para pruebas de regresión, pero no refleja la realidad de tu audiencia.

La Web Vitals API (específicamente navigator.webdriver y PerformanceObserver) se ejecuta en el navegador del usuario. Captura eventos como:

Cuándo se pintó el elemento más grande (LCP).
El retardo en la primera interacción (FID).
Los cambios de layout inesperados (CLS).

[TIP] Si solo confías en PageSpeed Insights, puedes estar optimizando para un servidor en Iowa, no para tus usuarios en Madrid o Buenos Aires. La Web Vitals API te da la verdad del campo de batalla.

Implementación básica en WordPress

Para capturar estos datos, necesitas inyectar un script JavaScript en el frontend de tu WordPress. Lo haremos limpiamente usando el hook wp_enqueue_scripts.

// web-vitals-report.js
function sendToAnalytics(metric) {
  // Aquí enviarás los datos a tu endpoint (por ejemplo, un custom endpoint REST API)
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/wp-json/mi-plugin/v1/vitals', body);
}

// Observar LCP
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      sendToAnalytics({ name: 'LCP', value: entry.startTime, rating: entry.startTime > 2500 ? 'poor' : 'needs-improvement' });
    }
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

// Observar FID
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (entry.entryType === 'first-input') {
      sendToAnalytics({ name: 'FID', value: entry.processingStart - entry.startTime, rating: (entry.processingStart - entry.startTime) > 100 ? 'poor' : 'good' });
    }
  }
}).observe({type: 'first-input', buffered: true});

// Observar CLS
let clsValue = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
    }
  }
  sendToAnalytics({ name: 'CLS', value: clsValue, rating: clsValue > 0.1 ? 'poor' : 'good' });
}).observe({type: 'layout-shift', buffered: true});

Este script debe ser registrado y encolado desde tu functions.php o un plugin personalizado:

<?php
// functions.php o en un plugin
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
        'web-vitals-report',
        get_template_directory_uri() . '/js/web-vitals-report.js',
        array(),
        '1.0.0',
        true // Cargar en footer
    );
});

LCP Optimización: El tamaño sí importa

El LCP mide el tiempo que tarda en renderizarse el elemento más grande visible en la ventana gráfica. En WordPress, suele ser una imagen destacada, un slider o un bloque de texto grande.

Estrategias para bajar el LCP en WordPress

Precarga de la imagen LCP: Usa <link rel="preload"> para la imagen que sabes que será la LCP. Esto le dice al navegador que la descargue con alta prioridad.

// En functions.php, dentro del hook wp_head
add_action('wp_head', function() {
    if (is_single()) {
        $image_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
        if ($image_url) {
            echo '<link rel="preload" href="' . esc_url($image_url) . '" as="image">';
        }
    }
});

Optimización del servidor: Un TTFB (Time to First Byte) alto arruina el LCP. Asegúrate de tener:
- Caché de página (Redis, Varnish o plugin como WP Rocket).
- PHP 8.x con OPcache activado.
- Base de datos optimizada (índices, consultas lentas).
Eliminar render blocking: El CSS crítico debe estar inline. Plugins como Autoptimize o WP Rocket pueden extraerlo. El JavaScript que no sea crítico debe cargarse con defer o async.

[WARNING] No precargues todo. La precarga de la imagen LCP es efectiva, pero si precargas 10 imágenes, el navegador priorizará mal. Sé selectivo.

FID WordPress: La interacción que no debe doler

El FID mide el tiempo entre que un usuario interactúa por primera vez (click, tap) y el momento en que el navegador puede procesar esa interacción. Está directamente relacionado con la ejecución de JavaScript.

Cómo reducir el FID en tu WordPress

El principal culpable del FID alto es el JavaScript que bloquea el hilo principal. En WordPress, esto suele venir de:

Plugins con scripts pesados (sliders, page builders, analytics mal implementados).
Temas con archivos JS enormes que se cargan en todas las páginas.

Técnicas de mitigación:

Code splitting: Divide tu JavaScript en chunks. Si usas un tema moderno con Webpack o Vite, puedes cargar solo el JS necesario para cada página.
Uso de requestIdleCallback: Para scripts de terceros (anuncios, widgets sociales), usa esta API para ejecutarlos cuando el navegador esté inactivo.
Carga diferida de scripts: No cargues scripts de analytics o tracking en el <head>. Usa wp_footer y la estrategia defer.

// Ejemplo de carga diferida de un script de analytics
add_action('wp_footer', function() {
    ?>
    <script>
        window.addEventListener('load', function() {
            setTimeout(function() {
                var script = document.createElement('script');
                script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXX';
                script.async = true;
                document.head.appendChild(script);
            }, 2000); // Espera 2 segundos después de la carga
        });
    </script>
    <?php
});

CLS Mejora: El layout no debe bailar

El CLS mide la estabilidad visual. Ocurre cuando elementos se mueven inesperadamente mientras la página se carga. En WordPress, las causas comunes son:

Imágenes sin dimensiones definidas.
Anuncios o iframes que se insertan dinámicamente.
Fuentes web que causan un cambio de layout (FOUT/FOIT).

Estrategias para un CLS casi cero

Atributos width y height en imágenes: Es la regla de oro. WordPress moderno ya lo hace, pero si usas un tema antiguo o un page builder, verifica que las imágenes tengan estos atributos inline.
```

```
Reserva de espacio para anuncios: Si usas AdSense u otra red, define un contenedor con dimensiones fijas (aunque sea un placeholder) para que el layout no se reajuste cuando cargue el anuncio.
```
.ad-container {
    width: 300px;
    height: 250px;
    background: #f0f0f0; /* Placeholder visual */
}
```
Optimización de fuentes: Usa font-display: swap en tu CSS, pero asegúrate de que la fuente de respaldo (fallback) tenga métricas similares a la fuente principal para minimizar el cambio de layout.
```
@font-face {
    font-family: 'MiFuente';
    src: url('/fonts/mifuente.woff2');
    font-display: swap;
}
```

Integración de la Web Vitals API con un Dashboard

Capturar datos no sirve de nada si no los analizas. Puedes enviar las métricas a un endpoint personalizado de la REST API de WordPress y luego visualizarlas en un dashboard.

Crear un endpoint REST para recibir datos

// En tu plugin o functions.php
add_action('rest_api_init', function() {
    register_rest_route('mi-plugin/v1', '/vitals', array(
        'methods' => 'POST',
        'callback' => function($request) {
            $data = $request->get_json_params();
            // Validar y sanitizar
            $metric = sanitize_text_field($data['name']);
            $value = floatval($data['value']);
            $rating = sanitize_text_field($data['rating']);

            // Guardar en una tabla personalizada o enviar a un servicio externo
            global $wpdb;
            $table = $wpdb->prefix . 'web_vitals';
            $wpdb->insert($table, array(
                'metric' => $metric,
                'value' => $value,
                'rating' => $rating,
                'timestamp' => current_time('mysql'),
                'url' => $_SERVER['HTTP_REFERER'] ?? ''
            ));

            return new WP_REST_Response(array('status' => 'ok'), 200);
        },
        'permission_callback' => '__return_true' // En producción, añade un nonce
    ));
});

[INFO] No te olvides de crear la tabla wp_web_vitals en la base de datos al activar el plugin. Puedes hacerlo con dbDelta().

Herramientas complementarias para Core Web Vitals WordPress

Además de la Web Vitals API, usa estas herramientas para un diagnóstico completo:

Lighthouse CI: Para pruebas automatizadas en tu pipeline de CI/CD.
CrUX (Chrome User Experience Report): Datos históricos de campo agregados por Google. Puedes consultarlos en BigQuery.
Query Monitor: Plugin imprescindible para ver consultas lentas, hooks y scripts en WordPress.

Conclusión: La precisión es poder

Optimizar Core Web Vitals en WordPress no es un proyecto de un día. Requiere monitorización constante y ajustes finos. La Web Vitals API te da el superpoder de ver tu sitio a través de los ojos de tus usuarios, no de un robot de Google.

Implementa el script que te hemos mostrado, intégralo con un dashboard y empieza a tomar decisiones basadas en datos reales. Verás cómo tu LCP optimización mejora, el FID WordPress se reduce y la CLS mejora drásticamente.

Recuerda: Google premia la velocidad real, no la simulada. Y la Web Vitals API es la herramienta para medir esa realidad.