Usar preload y preconnect para fuentes y recursos en WordPress

Los resource hints son pequeñas instrucciones <link> en el <head> de una página con las que indicas al navegador qué recursos debe tocar pronto. Los tres más importantes son rel="preconnect" (establece la conexión –DNS, TCP, TLS– con un dominio externo por adelantado), rel="dns-prefetch" (solo resuelve el nombre DNS de antemano, un fallback económico para navegadores antiguos) y rel="preload" (descarga un archivo concreto con alta prioridad antes de que el navegador lo descubra en el documento). Usados correctamente, acortan el Largest Contentful Paint (LCP) a menudo entre 100 y 400 ms, porque la imagen más importante y las fuentes ya no quedan al final de la cadena de carga. Usados de forma incorrecta o demasiado generosa, sin embargo, perjudican: cada preload compite por el ancho de banda, y demasiados hints retrasan justo los recursos que deberían ser rápidos. Esta guía muestra cuándo y cómo colocar los hints de forma selectiva en WordPress.

Los tres hints de un vistazo

Hint	Qué hace	Para qué
`preconnect`	establecer DNS + TCP + TLS con el dominio externo por adelantado	host de fuentes, CDN, analytics – dominios desde los que se carga pronto
`dns-prefetch`	solo resolución DNS de antemano	fallback económico y para dominios que se necesitan algo más tarde
`preload`	cargar de inmediato un archivo concreto con alta prioridad	imagen LCP, web fonts críticas, CSS crítico

Paso 1: Identificar recursos críticos

Abre las Chrome DevTools, pestaña Network, recarga la página y observa el diagrama de cascada. Determina:

El elemento LCP: normalmente la gran imagen hero de arriba. En la pestaña Performance o en Lighthouse aparece marcado como "Largest Contentful Paint element".
Fuentes necesarias para el texto visible (las fuentes cargadas tarde provocan el "Flash of Unstyled Text").
Dominios externos desde los que se carga pronto (Google Fonts, un CDN de imágenes, un host de iconos).

Solo estos pocos recursos reciben un hint, no cada archivo.

Paso 2: Preconnect para dominios externos

Si tu página incrusta recursos de otro dominio, con preconnect te ahorras el establecimiento de la conexión. Ejemplo para un host de fuentes o CDN:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

El atributo crossorigin es obligatorio en fuentes y otros recursos cargados de forma anónima, de lo contrario la conexión establecida de antemano no se reutiliza. El dns-prefetch de debajo sirve de fallback para navegadores sin soporte de preconnect.

Nota sobre Google Fonts: Lo más rápido es alojar Google Fonts localmente y prescindir por completo del dominio externo. Si no es posible, ayuda un preconnect a fonts.gstatic.com.

Paso 3: Preload para la imagen LCP y las fuentes

Precargar la imagen LCP

<link rel="preload" as="image"
      href="/wp-content/uploads/2026/07/hero.avif"
      type="image/avif"
      fetchpriority="high">

Como alternativa –y a menudo más elegante– coloca fetchpriority="high" directamente en la etiqueta <img> de la imagen hero y quítale el lazy loading a esa imagen, en lugar de usar un preload aparte.

Precargar una fuente

<link rel="preload" as="font" type="font/woff2"
      href="/wp-content/themes/mein-theme/fonts/inter.woff2"
      crossorigin>

En las fuentes, crossorigin es necesario incluso en el mismo dominio, porque las fuentes se cargan siempre de forma anónima.

Implementación en WordPress

Variante A: mediante functions.php

Añade los hints a través del hook wp_head (en el functions.php del child theme):

add_action( 'wp_head', function () {
    ?>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="font" type="font/woff2"
          href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter.woff2"
          crossorigin>
    <?php
}, 1 ); // Prioridad 1 = lo antes posible en el head

Variante B: mediante el filtro resource_hints

Para preconnect y dns-prefetch, WordPress ofrece el filtro oficial wp_resource_hints:

add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
    if ( 'preconnect' === $relation_type ) {
        $hints[] = array(
            'href'        => 'https://fonts.gstatic.com',
            'crossorigin' => 'anonymous',
        );
    }
    return $hints;
}, 10, 2 );

Variante C: mediante un plugin

Plugins de optimización como WP Rocket, Perfmatters o FlyingPress ofrecen campos donde puedes introducir URLs de preload y preconnect, sin código.

¿Cómo mido el efecto?

Ejecuta Lighthouse (Chrome DevTools, pestaña Lighthouse) antes y después del cambio y compara el valor de LCP.
En la pestaña Network, comprueba que la imagen LCP y las fuentes ahora empiezan antes en la cadena (prioridad "High").
PageSpeed Insights ya no debería mostrar los diagnósticos "Largest Contentful Paint image was lazily loaded" o "Preconnect to required origins".

Errores frecuentes

Demasiados preloads: Si se precarga todo, ya no hay nada priorizado. Limítate a 1–2 imágenes y 1–2 fuentes.
Preload sin uso: Un recurso cargado con preload pero no usado en pocos segundos genera en la consola el aviso "was preloaded but not used" y desperdicia ancho de banda.
Olvidar crossorigin: Si falta en las fuentes, el navegador descarga el archivo dos veces (una vía preload de forma anónima, otra normal).
Preconnect a demasiados dominios: Cada conexión abierta cuesta recursos. Más de 4–6 preconnects rara vez tienen sentido.
Valor as incorrecto: as="image", as="font", as="style" deben coincidir con el tipo de recurso, de lo contrario el preload se ignora.

Preguntas frecuentes (FAQ)

¿Cuál es la diferencia entre preload y preconnect?

preconnect establece la conexión (DNS, TCP, TLS) con un dominio externo por adelantado, pero todavía no carga ningún archivo. preload descarga un archivo concreto con alta prioridad antes de que el navegador lo descubra en el documento. preconnect se usa para hosts de fuentes o CDNs, y preload para la imagen LCP y las fuentes críticas.

¿Por qué las fuentes necesitan el atributo crossorigin al hacer preload?

El navegador siempre carga las fuentes de forma anónima (en modo CORS), incluso desde el propio dominio. Si falta el atributo crossorigin en el preload, la solicitud precargada no coincide con la posterior solicitud de la fuente y el navegador descarga el archivo dos veces. Por eso crossorigin siempre es necesario en preload as="font".

¿Cuántos recursos debería precargar?

Los menos posibles. Si se precarga todo, ya no hay nada priorizado y los hints ralentizan justo los recursos que deberían ser rápidos. Limítese a 1 o 2 imágenes y 1 o 2 fuentes, y a un máximo de 4 a 6 preconnects.

¿Qué significa el aviso de consola "preloaded but not used"?

Este aviso aparece cuando un recurso cargado con preload no se usa en la página en pocos segundos. El preload entonces desperdicia ancho de banda. Compruebe si el valor as (image, font, style) es correcto y si la URL precargada coincide exactamente con la URL usada después.

¿Cómo ayuda InspectWP con los resource hints?

InspectWP registra los recursos <link> presentes en el <head> así como los dominios externos y las fuentes incrustadas. El informe muestra qué hosts externos se contactan pronto y dónde se cargan fuentes de terceros, buenos puntos de partida para usar de forma selectiva preconnect o un alojamiento local.