Precarga de DNS externas en WordPress

¿Tu web carga demasiado lento? ¿Quieres acelerar la carga de las páginas de tu web WordPress?

Si la respuesta es que sí esta guía es para ti.

La velocidad de carga de una web es un factor importantísimo de posicionamiento para Google, y cada vez más. Pero lo importante es que un sitio que cargue rápido mejora la experiencia del usuario y mejora algoritmos como la tasa de rebote, y eso también mejora tu SEO.

En este artículo vamos a ver cómo acelerar tu web usando la precarga de DNS externas.

¿Qué es la precarga de DNS?

La precarga de DNS es una característica compatible con la mayoría de los navegadores actuales. Para abreviar, es una directiva que puedes añadir a la cabecera de tu sitio para que le diga al navegador qué dominios externos precargar.

Básicamente le estás diciendo al navegador: «Necesitaré estos recursos externos en algún momento, así que recupéralos por mi y se los muestras al usuario cuando los quiera usar.»

La precarga de DNS le permite al navegador resolver nombres de dominio con su IP correspondiente, como un proceso en segundo plano, realizando una consulta de DNS a medida que el usuario ve tus páginas.

¿A qué recursos externos te refieres?

Pueden ser muchos pero los principales, que actualmente todos o casi todos cargamos en nuestros sitios suelen ser scripts de los distintos servicios de Google, fuentes (también de Google), y scripts de servicios de publicidad, rastreo, seguimiento, vídeos, cronologías de redes sociales, etc.

En la cascada (waterfall) de carga de analizadores como GTMetrix puedes verlos fácilmente…

Todos estos recursos externos ralentizan la carga de tus páginas, al tener que recuperar los scripts, fuentes, etc. desde otros dominios antes de poder aplicarlos a tu web.

¿Por qué es importante la precarga de DNS externas?

Las consultas de DNS llevan tiempo en resolverse. Si son de un servidor bien optimizado pueden durar tan poco como 10 milisegundos, pero pueden llegar a tardar entre 200 y 400 milisegundos en servidores de nombres de dominios lentos.

Una web tipo carga más de 20 recursos externos sin saberlo. Y sí, me refiero a los códigos de seguimiento de Google Analytics, el píxel de Facebook, los scripts de YouTube, los recursos de Twitter, seguimientos de Hotjar, fuentes de Google y muchos más..

Con tal cantidad de recursos externos la precarga de DNS puede acelerar la carga de dominios externos, especialmente para los usuarios de dispositivos móviles.

Así, cuando un usuario haga clic en uno de estos recursos de dominios precargados se pueden ahorrar tiempos entre 200 milisegundos y hasta más de 2 segundos, lo que marca una enorme diferencia en los tiempos de carga de las páginas.

Estos retardos se añadirán al resto de esperas que genere tu sitio para poder mostrar tus páginas a los visitantes, provocando en algunos casos malas experiencias de visualización, tiempos de carga lentos, en definitiva una navegación nada agradable ni rápida.

¡Convencido! ¿Cómo precargo DNS externas en mi WordPress?

¡Venga pues! No hay un solo modo de hacer la precarga de DNS externas, así que vamos a ver unas cuantas, luego tú eliges la que mejor se adapte a tu sitio o conocimientos, pues esto es para todos los niveles de usuario.

Pero lo primero es identificar qué recursos externos está cargando tu web desde DNS externas ¿no?

Identificar las DNS externas

Hay muchos modos de hacerlo pero mi favorito es usar el análisis de YSlow de GTMetrix.

Ve a la web de GTMetrix, realiza un análisis de tu web y, cuando termine, haz clic en la pestaña llamada YSlow, donde encontrarás indicadores de algo llamado Reduce DNS Lookup, que son las consultas a dominios que te sugiere reducir.

Ahí verás todos los dominios a los que tu web tiene que consultar para mostrar recursos. Verás el tuyo, por supuesto, pero también los externos.

Una estrategia obvia sería sencillamente no cargar esos recursos externos pero ¿y si los necesitas/quieres? Pues eso, que no estamos en lo fácil, que es quitar todos los plugins o temas que carguen recursos externos sino en aprovechar esos recursos pero bien optimizados.

Así que, una vez visto dónde identificar los dominios de cuyas DNS cargamos recursos, toca ponerse a precargarlos.

Precarga de DNS externas en la cabecera del tema

El modo más básico y simple de hacer precarga es añadir unas líneas en la cabecera del tema hijo, normalmente el archivo header.php, entre las etiquetas <head> y </head> .

Así, este sería un ejemplo del código a introducir en la cabecera:

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<link rel="dns-prefetch" href="//otrodominioexterno.com">

Precarga de DNS externos mediante una función

Si prefieres no introducir los dominios externos en la cabecera también puedes hacerlo mediante una función en el archivo functions.php del tema activo, tal que así:

/* Precarga de DNS externas */
function ayudawp_dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="//apis.google.com" />
<link rel="dns-prefetch" href="//google-analytics.com" />
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//ssl.google-analytics.com" />
<link rel="dns-prefetch" href="//youtube.com" />
<link rel="dns-prefetch" href="//api.pinterest.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />
<link rel="dns-prefetch" href="//platform.twitter.com" />
<link rel="dns-prefetch" href="//syndication.twitter.com" />
<link rel="dns-prefetch" href="//syndication.twitter.com" />
<link rel="dns-prefetch" href="//platform.instagram.com" />
<link rel="dns-prefetch" href="//s.gravatar.com" />
<link rel="dns-prefetch" href="//s0.wp.com" />
<link rel="dns-prefetch" href="//stats.wp.com" />';
}
add_action('wp_head', 'ayudawp_dns_prefetch', 0);

Como verás, hay un montón de ejemplos de las DNS externas de las que puedes estar utilizando recursos en tu web, como las fuentes de Google, analítica, YouTube, redes sociales o incluso WordPress.com si usas módulos de Jetpack.

Precarga de DNS externos con plugins gratuitos

Hay varios plugins que te permitirán hacer la precarga de DNS, estos son algunos de los más interesantes…

SG Optimizer

Si tienes tu alojamiento en SiteGround el plugin de optimización SG Optimizer también tiene la posibilidad de hacer la precarga de DNS externas.

Solo tienes que ir a la sección de optimización del entorno, activar la característica de precarga de DNS de dominios externos ya añadir uno a uno los que estén cargando recursos en tu web, como vimos arriba.

LiteSpeed Cache

Si tu hosting utiliza LiteSpeed como sistema de caché entonces el plugin oficial, también gratuito, igualmente dispone de la funcionalidad de precarga de DNS.

Flying Scripts

Bajo este curioso nombre de Scripts voladores se esconde un plugin sencillo pero eficaz para precargar cualquier script, de DNS externas o de donde quieras.

Su funcionamiento es algo diferente a los anteriores métodos, pues aquí, en vez de indicar el dominio a precargar debes apuntar el nombre del script en la caja de los ajustes del plugin.

Así que antes de rellenar la caja de «palabras clave» deberás revisar la cascada (waterfall) del análisis de GTMetrix para identificar los nombres de los scripts, y ponerlos ahí uno en cada línea.

El resultado es estupendo también.

Hay otros plugins, de pago, como Perfmatters o WP-Rocket que también incluyen este tipo de funcionalidad, pero con los gratuitos tienes más que suficiente … y son gratis.

Nada más, espero que hayas comprendido la importancia de la precarga de DNS externas a la hora de optimizar la velocidad de carga de tu web y encontrado solución a ello.

Cualquier duda que tengas la planteas en los comentarios.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!