Como optimizar la carga de nuestra web usando dns-prefetch

En este Tutoriales En Linea vamos a ver como podemos optimizar la carga o la velocidad de nuestra web usando dns-prefetch. Partiendo de lo más básico, cuando un abre su navegador e introduce la URL a la que quiere acceder, lo primero que este hace es traducir el nombre de esta URL en una dirección IP, lo cual, se conoce como resolución DNS.

Las solicitudes de DNS son muy pequeñas en términos de ancho de banda, pero la latencia puede ser bastante alta, especialmente en redes móviles. Al obtener resultados DNS especulativos, la latencia se puede reducir significativamente en ciertos momentos, como cuando el hace clic en el enlace. En algunos casos, la latencia se puede reducir en un segundo.

Los tiempos de carga de la página, especialmente en las redes móviles, se pueden mejorar de esta manera de manera considerable. Si los nombres de dominio para las imágenes se pueden resolver antes de las imágenes solicitadas, las páginas que cargan muchas imágenes pueden ver una mejora del 5% o más en el momento de cargar las imágenes.

¿Qué es DNS Prefetch?

Si lo que estamos intentando es minimizar el tiempo de carga de la página web y no podemos prescindir de cargar de forma externa ficheros js,css, imágenes y etc, es cuando debemos emplear DNS Prefetch o precarga de DNS.

Esto nos va a permitir que el obtenga la resolución DNS de las URL’s al comienzo y no mientras vamos cargando o renderizando la página web. Leer Mas...

¿Qué es x-dns-prefetch-control?

El encabezado de respuesta HTTP de X-DNS-Prefetch-Control controla la captación previa de DNS, una función mediante la cual los navegadores realizan proactivamente la resolución de nombres de dominio en los dos enlaces que el puede elegir, así como las direcciones URL de los elementos a los que hace referencia el documento, incluidas las imágenes, CSS , jаvascript, y así sucesivamente.

Esta búsqueda previa se realiza en segundo plano, por lo que es probable que el DNS se haya resuelto para cuando se necesiten los elementos a los que se hace referencia. Esto reduce la latencia cuando el hace clic en un enlace.

Sintaxis

<meta http-equiv="x-dns-prefetch-control" content="off">
<meta http-equiv="x-dns-prefetch-control" content="on">

on: Habilita la búsqueda previa de DNS. Esto es lo que hacen los navegadores, si iten la función, cuando este encabezado no está presente.
off: Desactiva la búsqueda previa de DNS. Esto es útil si no controla el enlace en las páginas, o si sabe que no quiere filtrar información a estos dominios.

Forzar la búsqueda de nombres de host específicos

Puede forzar la búsqueda de nombres de host específicos sin proporcionar anclajes específicos usando ese nombre de host usando el atributo rel en el elemento <link> con un tipo de enlace de dns-prefetch:

<link rel="dns-prefetch" href="https://tutorialesenlinea.futbolgratis.org">

En este ejemplo, el nombre de dominio "tutorialesenlinea.futbolgratis.org" se resolverá previamente.

De manera similar, el elemento de enlace se puede usar para resolver nombres de host sin proporcionar una URL completa, pero solo, precediendo al nombre de host con dos barras diagonales:

<link rel="dns-prefetch" href="//tutorialesenlinea.futbolgratis.org">

La búsqueda previa forzada de nombres de host puede ser útil, por ejemplo, en la página de inicio de un sitio para forzar la resolución previa de los nombres de dominio a los que se hace referencia con frecuencia en todo el sitio, aunque no se utilicen en la página de inicio. Esto mejorará el rendimiento general del sitio a pesar de que el rendimiento de la página de inicio no se vea afectado.

¿Cómo podemos aplicar DNS Prefetch?

Dentro de las etiquetas <head>, incluiremos los dominios a los que hacen referencia después el contenido externo que necesitamos, por tanto en este sitio Web, pondríamos los siguientes:

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//tutorialesenlinea.futbolgratis.org">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//ads.stickyadstv.com">
<link rel="dns-prefetch" href="//ads.themoneytizer.com">
<link rel="dns-prefetch" href="//adservice.google.com">
<link rel="dns-prefetch" href="//adservice.google.es">
<link rel="dns-prefetch" href="//ajax.googleapis.com">.....

Estas direcciones URL, si utilizamos Chrome, las podemos ver pulsando Ctrl + Mayus + I o la tecla F12 o agregando en Firefox el plugin "Firebug". Cambie a la última versión de Firefox y vea las últimas actualizaciones de devtools.