Artículos
HTML5

Precargar elementos en una página web

21/Dic/2010

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:

O podemos precargar una página:

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

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:

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

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios