Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Acelerando tus sitios web con una línea de HTML

Acelerando tus sitios web con una línea de HTML 14.JUN.16

Alvaro José Rios Ch
Fundador WebBizarro

La W3C especifica 4 formas de relacionar links con HTML (rel para relación) estas son dns-prefetch, preconnect, prefetch y prerender. Ahora vamos a ver que puede hacer cada una de ellas.

 

DNS Prefetch

Las consultas DNS consumen poco ancho de Banda sin embargo pueden tener una latencia alta, sobretodo en redes móviles. Cuando tenemos una página que tiene un montón de links a una página hermana hay una gran probabilidad de que el usuario haga clic en uno de esos links y hacer la consulta DNS de la página hermana antes de llamarla puede ahorrar tiempo.

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

Agregando este código a la página puedes ahorrarte algo de tiempo evitando la latencia de la consulta DNS. Cuando el browser encuentra esta línea agrega la tarea de hacer la consulta al DNS y cuando el usuario hace clic sobre el link de la página hermana ya esta información está cargada.

Soportado por la mayoría de los navegadores modernos salvo Safari.

Preconnect

Este va más allá del anterior en donde solo se resuelve el nombre del sitio y hace una conexión con el servidor para decirle que pronto va a enviar una solicitud, esto es muy útil cuando vas a hacer un redirect donde estas 100% seguro que vas a ir a este sitio. Esto disminuye la latencia de una forma considerable.

<link rel="preconnect" href="//xyzsite.com">

Es soportado por Opera, Firefox y Chrome.

Prefetch

Creo que el nombre es bastante claro pero lo que hace es consultar el dns, conectarse al servidor, enviar una solicitud HTTP, descargar el recurso y almacenarlo en el cache del navegador. Muy útil si quieres precargar imágenes sin embargo esto puede ser un arma de doble filo y terminemos sobrecargando el sitio y haciéndolo más lento por lo que debemos tratarlo con cuidado y precargar recursos que estamos seguros que vamos a usar o al menos que tienen una gran posibilidad de ser usados.

<link rel="prefetch" href="//xyzsite.com/nextimage.jpg">

Es soportado por Opera, Firefox y Chrome.

 

Prerender

Esto es similar al anterior solo que no es para recursos sino para documentos HTML, recuerde que el render de la página también puede tener un costo alto de recursos por lo que debe usarlo con cuidado para no sobrecargar el browser.

<link rel="prerender" href="//example.com/about.html">

Es soportado por Opera, Firefox y Chrome.

Como puedes ver todos son recursos muy útiles pero que debes usar sabiamente como la energía atómica, par obtener los resultados deseados y no terminar con un desastre entre tus manos.