DNS prefetch, optimizando nuestro sitio web

El primer paso que tiene que realizar el navegador cuando un usuario quiere acceder a una página web, es convertir el nombre de dominio de la url a la que se accede en su correspondiente dirección IP. Esto es lo que que se conoce como resolución DNS (DNS resolution, en donde DNS son las siglas de “Domain Name Service”).

El tiempo que suele tardar el servidor DNS es relativamente pequeño, en torno a unas decenas de milisegundos. Pero el contenido de la página puede hacer referencia a urls externas desde las que se descargan imágenes, código css y javascript, etc. Cada uno de los nombres de dominio que aparecen en el contenido de la página debe ser convertido a su dirección IP con una nueva petición al servidor de nombres, lo que eventualmente puede suponer un porcentaje significativo del tiempo total de carga de la página., y es aquí donde entra el DNS prefetch.

Qué es el DNS prefetch

Para minimizar el impacto del tiempo de resolución DNS sobre el tiempo total de carga de la página se puede emplear la técnica de “DNS prefetch” (precarga de DNS):

En la cabecera del código html de la página, podemos añadir entradas indicando los nombres de dominio que va a necesitar la página. Por ejemplo:

<head>   
    <link rel=”dns-prefetch” href=”//ajax.googleapis.com”>
    <link rel=”dns-prefetch” href=”//otro-dominio.com”>

 

Por ejemplo para http//:soyprogramador.liz.mx estos serian los posibles dominios que deberíamos utilizar para DNS prefetch.

<link rel=”dns-prefetch” href=”//soyprogramador.liz.mx”>
<link rel=”dns-prefetch” href=”//connect.facebook.net”>
<link rel=”dns-prefetch” href=”//disqus.com”>
<link rel=”dns-prefetch” href=”//facebook.com”>
<link rel=”dns-prefetch” href=”//googleads.g.doubleclick.net”>
<link rel=”dns-prefetch” href=”//pagead2.googlesyndication.com”>
<link rel=”dns-prefetch” href=”//mediacdn.disqus.com”>
<link rel=”dns-prefetch” href=”//google-analytics.com”>
<link rel=”dns-prefetch” href=”//fbcdn-profile-a.akamaihd.net”>

Para conocer las URLS podemos usar el plugin de firebug.

image

 

Actualmente ya la mayoría de las ultimas versiones de los navegadores soportan esta característica.

Más información

Leave a Reply

Your email address will not be published. Required fields are marked *