Acelerar mi web con dns-prefetch

Acelerar mi web con dns-prefetch (captación previa de DNS).

La técnica dns-prefetch o captación previa de dns, es una operación en la que el servidor de nombres de dominio se resuelve en segundo plano para una URL determinada, para que me entiendas mejor… carga la url del dominio antes de que hagas click en el.

La captación previa de DNS mejora el rendimiento del front-end de una web de forma considerable. Podemos decirle al navegar qué debe precargar y qué no debe precargar, sin ninguna intervención del usuario incluso antes de que el cliente visualice el recurso.

Una página web contiene recursos que se cargan desde varios dominios, la captación previa de DNS comunica al navegador web que hay activos web, como un archivo de datos, una imagen o un archivo de audio, que se van a necesitar más adelante; el navegador escucha la propuesta y resuelve el servidor de nombres de dominio en segundo plano, por ejemplo las fuentes de google.

Pero claro, como todo en está vida no todo es de color de rosa. Y es que dns-prefretch no siempre es compatible con todos los navegadores, solo con los modernos. Por ejemplo, si eres de los que aun utilizan el vetusto Internet explorer debes saber que IE 11 y anteriores no son compatibles. OJO!!!, eso no quiere decir que no veras la web, no, simplemente no puedes aprovecharte de esta aceleración extra.

En la siguiente imagen puedes ver como trabaja.

dns prefetch

dns prefetch

 

Acelerar mi web con dns-prefetch

Implantar la captación previa de DNS (dns-prefetch) es un proceso sencillo. Debes agregar una etiqueta que contenga rel=»dns-prefetch» entre los <head> y </head> de tu sitio web. Vemos un ejemplo:

Ahora completo, tal como debería verse en tu sitio web.

Como puedes ver implantar dns-prefetch es sencillo, ademas cuenta con la particularidad de que es un sistema muy extendido.

Si usas algún CMS por ejemplo WordPress, debes saber que es posible acelerar WordPress con esta técnica (ya que estamos te invito a visitar SoloWordpress.es que la tiene activada). Muchos de los plugins de cache la llevan incorporada, incluso algunas templates la incluyen para su uso interno. Mira la imagen siguiente:

Prefetching en theme de WordPress

Prefetching en theme de WordPress

 

Que DNS debo pre-cargar?

Bueno, pues esa es la gran pregunta jajaj. Todo depende de tu sitio web y lo que necesites, pero revisando las métricas de GTmetrix te puedes hacer una idea.

Aun dicho lo anterior te pongo un listado de las más comunes, muchas de ellas implantadas en nuestros sitios web.

 

Notas finales y apuntes varios

Recuerda que los navegadores web buscan el encabezado HTTP de X-DNS-Prefetch-Control (no distingue entre mayúsculas y minúsculas) con el valor ON / OFF, dependiendo de su respuesta cambia el comportamiento.

Si una página está excluida de la pre-carga se ignorarán los sucesivos reintentos.

La captación previa de DNS es compatible con los principales navegadores (Safari 5.0+, IE 9.0+ (no 100%, mejor usa el 11), Firefox 3.5+, Google Chrome). Lamentablemente parece que no interesa esta fabulosa técnica con dispositivos móviles (nos meten AMP hasta por las orejas), no es efectiva con  iOS Safari, Opera Mini y Android Browser.

 

Canales de Telegram: Canal SoloLinux – Canal SoloWordpress

Espero que este articulo te sea de utilidad, puedes ayudarnos a mantener el servidor con una donación (paypal), o también colaborar con el simple gesto de compartir nuestros artículos en tu sitio web, blog, foro o redes sociales.

 

Agregar comentario