Optimiza la velocidad de tu WordPress: guía práctica para reducir el LCP

El Largest Contentful Paint (LCP) mide cuánto tarda en mostrarse el elemento principal de una página (imagen hero, bloque grande de texto, etc.). Para brindar una buena experiencia, tu sitio debe lograr un LCP de 2.5 s o menos para al menos el 75% de las visitas.

1) Mide tu LCP correctamente

• PageSpeed Insights para diagnósticos rápidos.
• Search Console > Core Web Vitals para datos de campo (usuarios reales) por URL y plantilla.
• Evalúa por dispositivo: móvil y escritorio.

2) Identifica tu elemento LCP

Suele ser la imagen hero, un H1 grande o un banner. Detecta cuál es en cada plantilla (inicio, entradas, páginas de categoría) y optimiza ese recurso en particular.

3) Optimiza imágenes críticas (el 80/20 del LCP)

• Formato moderno: sirve la imagen LCP en WebP/AVIF.
• Tamaño exacto: usa srcset/sizes y define width/height.
• Prioridad de carga: a la imagen LCP ponle loading="eager", decoding="async" y fetchpriority="high" (evita lazy-load en el LCP).
• Preload opcional: si es fondo CSS o elemento no detectable, añade:

  <link rel="preload" as="image" href="/img/hero.webp" imagesrcset="/img/hero-768.webp 768w, /img/hero-1280.webp 1280w" imagesizes="100vw">

4) Acelera las fuentes si el LCP es texto

• Usa font-display: swap para evitar texto invisible (FOIT).
• Preconecta a orígenes de fuentes externas:

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

• Considera alojar las fuentes localmente y subsetting.

5) Reduce el TTFB y el bloqueo de renderizado

• Caché de página (LiteSpeed Cache, WP Rocket) + CDN cercano al usuario.
• Minifica y combina de forma segura CSS/JS; inserta CSS crítico en línea.
• Diferir JS no crítico (defer/delay) y carga condicional de scripts de terceros.
• Object cache (Redis/Memcached) y PHP actualizado (8.2+).

6) Configuración práctica en WordPress

• Imagen LCP sin lazy-load (snippet PHP rápido):

  <?php
  add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
    if (empty($GLOBALS['lcp_set'])) {
      $attr['loading'] = 'eager';
      $attr['fetchpriority'] = 'high';
      $attr['decoding'] = 'async';
      $GLOBALS['lcp_set'] = true; // Solo la primera imagen (LCP)
    }
    return $attr;
  }, 10, 3);
  ?>

• Fuentes con swap:

  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var.woff2') format('woff2-variations');
    font-display: swap;
  }

• Plugins útiles: LiteSpeed Cache o WP Rocket (caché + CSS crítico + retraso de JS), Perfmatters (desactivar scripts por página), ShortPixel/Imagify (WebP/AVIF), WP-Optimize (DB).

7) Checklist exprés para bajar tu LCP

• ✔ Define el elemento LCP por plantilla.
• ✔ Sirve WebP/AVIF, tamaño correcto y prioridad alta.
• ✔ Aplica swap en fuentes + preconnect.
• ✔ CSS crítico en línea, JS diferido, terceros bajo demanda.
• ✔ Caché + CDN + PHP actualizado + object cache.
• ✔ Revisa en Search Console y repite el ciclo.

Conclusión

Reducir el LCP en WordPress es el atajo más directo para percibir una web más rápida. Enfócate primero en la imagen o texto principal, prioriza su carga y elimina bloqueos innecesarios; luego consolida con caché, CDN y optimización de fuentes y scripts. El resultado: mejores Core Web Vitals, más SEO y mayores conversiones.

👉 ¿Quieres que dejemos tu LCP en verde y optimicemos todo tu WordPress?
Solicita aquí tu optimización profesional.