Precargar elementos en una página web

21/Dic/2010 HTML5 , , 1 Comentario

Precargar elementos es una de las opciones de optimización de cara al rendimiento más utilizadas en múltiples campos de la informática. La idea es cargar lo elementos que supongamos que el usuario va a necesitar el consecutivas peticiones.

En este caso vamos a precargar elementos de las páginas web que consideremos que el usuario puede visitar a posteriori. Cuándo hablamos de elementos nos referimos a imágenes, scripts, css,... incluso otras páginas enteras.

Para precargar un elemento utilizaremos la etiqueta LINK. En la etiqueta LINK el valor del atributo rel será prefetch. Esto indicará al servidor, que hay que descargar un elemento para la precarga.

Podemos precargar una imagen:

  1. <link rel="prefetch" href="http://misitio.com/img/imagen.png" />

O podemos precargar una página:

  1. <link rel="prefetch" href="http://misitio.com/otra-url/">

En el caso de Firefox también soporta el valor next para la precarga:

  1. <link rel="next" href="http://misitio.com/otra-url/">

Cuando estemos utilizando la precarga de elementos en una página web con prefetch debemos de tener en cuenta una serie de cosas:

Ancho de banda
Esto supone un consumo de ancho de banda adicional... Con lo cual tendremos que tener cuidado si estamos enviando información a dispositivos con ancho de banda limitado.

Datos de las estadísticas
Se están descargando elementos que no tienen porqué visualizarse, si bien quedará registro en los webservers de la petición de dichos recursos. Programas de estadísticas podrían ver alterados sus datos.

Soporte de navegadores
El soporte actual de los navegadores es Firefox (en todas sus versiones) y parece que Google Chrome 9. Puedes comprobar si tu navegador soporta el prefetch o bien consultar una lista general con el soporte del prefetch por parte de los navegadores.

En el caso de Firefox podemos deshabilitar la precarga de elementos mediante el código script:

  1. user_pref("network.prefetch-next", false);

Existen alternativas en el servidor
Se puede formar en la configuración de los servidores el que cuándo se solicite una página se fuerce la descarga de otra. De esta manera evitamos tener que tocar todas las páginas de nuestro sitio web.

Aunque la precarga de elementos (o uso de prefetch) es muy potente, lleva implícito un conocimiento de las navegaciones de nuestra web, así como el comportamiento de nuestros usuarios para poder sacar verdadera ventaja de la técnica.

Vídeos sobre HTML5


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*