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
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:
<link rel=»dns-prefetch» href=»//fonts.googleapis.com»><link rel=»dns-prefetch» href=»//www.hackhit.com.ve»>
Ahora completo, tal como debería verse en tu sitio web.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<link rel=»dns-prefetch» href=»//fonts.googleapis.com»>
<link rel=»dns-prefetch» href=»//cdnjs.cloudflare.com»>
</head>
<body>
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
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.
<!-- Cloudflare CDN -->
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<!-- GitHub -->
<link rel="dns-prefetch" href="//github.githubassets.com">
<!-- Google CDN -->
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<!-- Google API -->
<link rel="dns-prefetch" href="//apis.google.com">
<!-- Google Fonts -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- Google Analytics -->
<link rel="dns-prefetch" href="//www.google-analytics.com">
<!-- Google Tag Manager -->
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<!-- Google Publisher Tag -->
<link rel="dns-prefetch" href="//www.googletagservices.com">
<!-- Google AdSense -->
<link rel="dns-prefetch" href="//adservice.google.com">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<!-- Google Blogger -->
<link rel="dns-prefetch" href="//bp.blogspot.com">
<link rel="dns-prefetch" href="//1.bp.blogspot.com">
<link rel="dns-prefetch" href="//2.bp.blogspot.com">
<link rel="dns-prefetch" href="//3.bp.blogspot.com">
<link rel="dns-prefetch" href="//4.bp.blogspot.com">
<!-- Microsoft CDN -->
<link rel="dns-prefetch" href="//ajax.microsoft.com">
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
<!-- Amazon S3 -->
<link rel="dns-prefetch" href="//s3.amazonaws.com">
<!-- jQuery CDN -->
<link rel="dns-prefetch" href="//code.jquery.com">
<!-- Bootstrap CDN -->
<link rel="dns-prefetch" href="//stackpath.bootstrapcdn.com">
<!-- Font Awesome CDN -->
<link rel="dns-prefetch" href="//use.fontawesome.com">
<!-- Facebook -->
<link rel="dns-prefetch" href="//connect.facebook.net">
<!-- Twitter -->
<link rel="dns-prefetch" href="//platform.twitter.com">
<!-- Linkedin -->
<link rel="dns-prefetch" href="//platform.linkedin.com">
<!-- Vimeo -->
<link rel="dns-prefetch" href="//player.vimeo.com">
<!-- Disqus -->
<link rel="dns-prefetch" href="//referrer.disqus.com">
<link rel="dns-prefetch" href="//c.disquscdn.com">
<!-- Gravatar -->
<link rel="dns-prefetch" href="//0.gravatar.com">
<link rel="dns-prefetch" href="//2.gravatar.com">
<link rel="dns-prefetch" href="//1.gravatar.com">
<!-- BuySellads -->
<link rel="dns-prefetch" href="//stats.buysellads.com">
<link rel="dns-prefetch" href="//s3.buysellads.com">
<!-- DoubleClick -->
<link rel="dns-prefetch" href="//ad.doubleclick.net">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//stats.g.doubleclick.net">
<link rel="dns-prefetch" href="//cm.g.doubleclick.net">
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.
Hackhit | Info 