HTML 5 DNS-Prefetch - return(GiS);

Cuando un navegador quiere acceder a un sitio web primero es necesario que el mismo transforme el nombre del dominio de la URL en la dirección IP asociada (Resolución de DNS). El tiempo que suele tardar en realizar esta transformación es mínimo y los navegadores actuales lo suelen gestionar bastante bien, pero en ocasiones tenemos diferentes dominios referenciados, diferentes dispositivos con diferentes anchos de banda, y esto puede suponer un punto significativo en el rendimiento de nuestra aplicación. Una precarga de los DNS en segundo plano mejora esta gestión por parte del navegador.

rel=»dns-prefetch»

Normalmente, cuando añadimos distintos recursos a una página web lo hacemos de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="//www.domain123.com/style.css" rel="stylesheet" />
</head>
<body>
    <img src="//www.domain456.com/myimage.png" />
    <script src="//www.domain789.com/myscript.js"></script>
</body>
</html>

En el código anterior, vemos que tenemos una hoja de estilos que proviene del dominio mydomain123, una imagen del dominio mydomain456 y un script desde mydomain789. Si aplicamos la precarga de DNS en el código anterior quedaría de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="dns-prefetch" href="//www.domain123.com">
    <link rel="dns-prefetch" href="//domain456.com">
    <link rel="dns-prefetch" href="//www.domain789.com">
    <link href="//www.domain123.com/style.css" rel="stylesheet" />
</head>
<body>
    <img src="//domain456.com/myimage.png" />
    <script src="//www.domain789.com/myscript.js"></script>
</body>
</html>

A día de hoy todos los navegadores aceptan esta funcionalidad (Firefox lleva dando soporte desde su versión 3.5) y es recomendable hacer uso de la misma siempre que tengamos distintos dominios con los que trabajar y especialmente en las aplicaciones orientadas a dispositivos móviles.

¡Saludos!