¿No sabes qué significa algún término? Consulta el glosario
Qué es «DNS Prefetch» y por qué deberías aplicarlo en tu web
Ya he hablado sobre qué es «preconnect» y por qué deberías implementarlo en tu web. En esta ocasión hablaremos de «DNS prefetch«, una técnica similar.
¿Qué es «DNS prefetch»?
Probablemente sepas que los dominios existen solo para que no tengamos que recordar las IP de los servidores de cada sitio. Resolver un dominio a una dirección IP es un proceso que tarda un poquito, generalmente alrededor de 20 a 120 ms, y se realiza para cada dominio externo que incluye tu web. ¿No estaría bien que estas conexiones se hicieran en segundo plano mientras se carga la página, de modo que cuando sea necesario descargar los recursos reales, todo llevara menos tiempo? Eso es lo que hace «DNS prefetch».
«DNS Prefetch» le dice al navegador que busque el nombre de dominio y encuentre su dirección IP lo antes posible en segundo plano, mientras se cargan el resto de los recursos de tu página. Para ilustrar esto, hagamos una prueba simple.
La capturas de pantalla anterior muestra un sitio de prueba con algunas conexiones externas sin realizar una captación previa de DNS. Y aquí está con «DNS prefetch»:
¿Ves esas pequeñas barras turquesas antes de cada conexión? Ese es el tiempo que lleva buscar el nombre de dominio, y si no has hecho «DNS prefetch» harás que la conexión con el dominio externo tarde más; puedes comparar las dos capturas de pantalla. Entonces, al implementar «DNS prefetch», estamos haciendo algo de faena en segundo plano mientras se carga la página, lo que nos ayuda a ahorrar algo de tiempo.
¿Cómo hacer «DNS prefetch» en WordPress?
Siguiendo el ejemplo anterior, el objetivo es introducir las siguientes líneas entre las etiquetas <head> y </head> de la página.
<link rel="dns-prefetch" href="//www.chphotography.co.uk">
<link rel="dns-prefetch" href="//connect.facebook.net">
<link rel="dns-prefetch" href="//www.facebook.com">Nota: no se ha añadido la conexión a cdn.shortpixel.ai, porque ShortPixel Adaptive Images, que está instalado en el sitio de prueba, ya añade una regla de preconexión, por lo que no es necesario un dns-prefetch.
Para añadir estas líneas, tenemos dos métodos.
1 – Usar un plugin como Head & Footer Code. Instálalo, actívalo, ve a ajustes y añade el código en la primera casilla.
2 – El método recomendado, pero para usuarios avanzados: Edita el archivo functions.php de tu tema hijo y añade el siguiente fragmento de código.
function shortpixel_dnsprefetch() {
echo '<link rel="dns-prefetch" href="//www.chphotography.co.uk">
<link rel="dns-prefetch" href="//connect.facebook.net">
<link rel="dns-prefetch" href="//www.facebook.com">';
}
add_action('wp_head', 'shortpixel_dnsprefetch', 0);En esta entrada pueden haber enlaces de afiliado a productos y servicios en los que a veces podrás obtener descuentos si compras algo, y yo, como autor de la entrada, una pequeña comisión. No te preocupes, nunca pagarás de más y nunca verás enlaces de afiliados de algo que yo mismo no utilice o recomiende.
