Este tutorial explica en profundidad cómo precargar y optimizar recursos externos en WordPress utilizando la API de resource hints y la función/filtro wp_resource_hints desde PHP. Se detallan conceptos, ejemplos prácticos listos para usar, soluciones para atributos especiales (como crossorigin), y recomendaciones de rendimiento y comprobación.
Contents
Qué es wp_resource_hints
wp_resource_hints es la API que WordPress expone para incluir resource hints (como dns-prefetch, preconnect, prefetch, preload) en la cabecera HTML. Mediante el filtro wp_resource_hints podemos añadir hosts o URLs que el navegador debería resolver o conectar anticipadamente, disminuyendo latencia en recursos externos críticos.
La interfaz típica para usarla desde un plugin o el functions.php del tema consiste en engancharse al filtro y devolver un array con las URLs a añadir, condicionado por el relation_type que WordPress pregunta.
Relaciones habituales y cuándo usarlas
| Relación | Propósito |
|---|---|
| dns-prefetch | Resolver DNS de dominios externos antes de necesitarlos (útil para dominios de terceros costosos en DNS). |
| preconnect | Establecer conexión TCP/TLS anticipada (incluye handshake). Muy útil para CDNs y proveedores de fuentes. |
| prefetch | Descargar recursos que muy probablemente se necesiten en una navegación futura (prioridad baja). |
| preload | Priorizar la carga de un recurso crítico para la página actual (requiere atributos adicionales como as= y type=). |
Cómo usar wp_resource_hints desde PHP (ejemplos claros)
La forma recomendada es usar el filtro wp_resource_hints y añadir hosts condicionando por el relation_type que se pasa como segundo parámetro. A continuación ejemplos prácticos.
Ejemplo básico: añadir preconnect para Google Fonts
add_filter( wp_resource_hints, mi_tema_resource_hints, 10, 2 )
function mi_tema_resource_hints( hints, relation_type ) {
if ( preconnect === relation_type ) {
// Añade el host de las fuentes solo si se va a usar
hints[] = https://fonts.gstatic.com
// También puedes incluir la API de Google Fonts
hints[] = https://fonts.googleapis.com
}
return hints
}
Con esto WordPress inyectará en el head los enlaces de rel=preconnect (o la relación que corresponda) para esos hosts.
Ejemplo: añadir dns-prefetch para un CDN
add_filter( wp_resource_hints, mi_tema_dns_prefetch, 10, 2 )
function mi_tema_dns_prefetch( hints, relation_type ) {
if ( dns-prefetch === relation_type ) {
hints[] = https://cdn.ejemplo.com
}
return hints
}
Condicionar recursos a que estén encolados (control fino)
Es buena práctica sólo añadir hints si el recurso está realmente encolado. Para ello podemos comprobar con wp_style_is() o wp_script_is().
add_filter( wp_resource_hints, mi_tema_conditional_hints, 10, 2 )
function mi_tema_conditional_hints( hints, relation_type ) {
if ( preconnect === relation_type ) {
// Solo si la hoja de estilos de fuentes está encolada
if ( wp_style_is( mi-tema-fonts, enqueued ) ) {
hints[] = https://fonts.gstatic.com
}
}
return hints
}
// Ejemplo de encolar la hoja de Google Fonts
add_action( wp_enqueue_scripts, function() {
wp_enqueue_style( mi-tema-fonts, https://fonts.googleapis.com/css2?family=Inter:wght@400700display=swap, array(), null )
})
Preload (recursos críticos) — limitaciones y método recomendado
preload es diferente porque necesita atributos adicionales (as=, type=, y a veces crossorigin). WordPress no proporciona un helper específico para inyectar todos estos atributos desde wp_resource_hints por tanto la opción correcta es imprimir el ltlink rel=preloadgt manualmente en wp_head o usar filtros sobre los tags de encolado.
add_action( wp_head, mi_tema_preload_fonts )
function mi_tema_preload_fonts() {
// Solo si la fuente local/woff2 se usa en esta página
if ( ! wp_style_is( mi-tema-fonts, enqueued ) ) {
return
}
// Ruta a la fuente ya subida al servidor o CDN
url = get_stylesheet_directory_uri() . /fonts/myfont.woff2
echo
}
Este enfoque permite añadir todos los atributos necesarios y controlar el momento exacto de la inyección.
Añadir atributos como crossorigin: workaround
Algunas relaciones (p. ej. preconnect a un host de fonts) deben incluir crossorigin para que las fuentes sean reutilizables. Como wp_resource_hints no permite por defecto añadir ese atributo por cada hint, la solución es imprimir manualmente la etiqueta cuando sea necesario:
add_action( wp_head, mi_tema_preconnect_with_crossorigin )
function mi_tema_preconnect_with_crossorigin() {
// Si hemos encolado Google Fonts
if ( wp_style_is( mi-tema-fonts, enqueued ) ) {
echo
}
}
De este modo controlas atributos y seguridad por tu cuenta. Evitar duplicar: si usas wp_resource_hints para el mismo host, asegúrate de no inyectarlo dos veces.
Integración con wp_enqueue_scripts
Patrón recomendado: encolar recursos y, en el mismo flujo, añadir hints condicionados.
add_action( wp_enqueue_scripts, mi_tema_enqueue )
function mi_tema_enqueue() {
wp_enqueue_style( mi-tema-fonts, https://fonts.googleapis.com/css2?family=Inter:wght@400700display=swap, array(), null )
}
add_filter( wp_resource_hints, mi_tema_hints_for_enqueued, 10, 2 )
function mi_tema_hints_for_enqueued( hints, relation_type ) {
if ( preconnect === relation_type wp_style_is( mi-tema-fonts, enqueued ) ) {
hints[] = https://fonts.gstatic.com
}
return hints
}
Buenas prácticas y consideraciones de rendimiento
- Usar hints sólo cuando aportan beneficio real: demasiados preconnect/prefetch son contraproducentes.
- Condicionar los hints: comprobar si los scripts/estilos están encolados o si la plantilla los necesita.
- Preload con cuidado: preload incrementa prioridad no use para recursos no críticos o para muchos archivos pequeños.
- Evitar duplicados: si se inyecta con wp_resource_hints y manualmente, neutralizar duplicados.
- CORS y fonts: cuando precargues o preconnectes hosts de fuentes, añade crossorigin en la etiqueta preconnect o en el link rel=preload si la fuente es cross-origin.
- Compatibilidad HTTP/2/3: con HTTP/2 el impacto de múltiples conexiones cambia evalúa con medición real.
Comprobar y depurar
- Ver el HTML generado (ver fuente o Inspector) para comprobar los ltlink rel=…gt inyectados.
- Usar Chrome DevTools → Network para ver conexiones previas, tiempos y prioridad.
- Usar Lighthouse o PageSpeed Insights para comprobar mejoras en LCP y tiempo de carga.
- Si un hint no tiene efecto, comprobar que la URL/host coincide exactamente y que no está bloqueado por CSP.
Compatibilidad y seguridad
- Versión de WordPress: la API de resource hints está disponible desde WordPress 4.6 en adelante.
- Política de seguridad de contenido (CSP): si usas CSP restrictiva, añade los hosts en las directivas correspondientes (p. ej. font-src, connect-src) para que las conexiones preconectadas o las fuentes puedan usarse.
- Escapar URLs: usar esc_url() al imprimir URLs para evitar inyección.
Resumen práctico
Usa add_filter(wp_resource_hints, …) para añadir dns-prefetch y preconnect de forma condicionada y ligada a recursos encolados. Para preload y atributos especiales (as=, type=, crossorigin) imprime manualmente la etiqueta en wp_head o modifica el tag producido por el encolador con filtros específicos. Mide siempre con herramientas reales (Lighthouse, DevTools) y evita añadidos innecesarios.
|
|
Acepto donaciones de BAT's mediante el navegador Brave 🙂 |