Reducir el número de archivos externos de una página web
Por archivos externos vamos a entender aquellos elementos que se se cargan junto a una página pero que no se incluyen en ella, es decir, son llamados desde una url diferente. Los archivos externos más comunes son imágenes, hojas de estilo CSS (.css) y archivos JavaScript (.js).
Mientras que normalmente no vamos a poder reducir el número de imágenes necesarias para mostrar nuestra web sin alterar el diseño (aunque si se puede hacer algo al respecto mejor que mejor), es probable que sí podamos hacer algo con las hojas de estilo CSS y los archivos JavaScript. Los archivos .css, junto con los .js que se cargan antes del contenido, tienen especial relevancia ya que los navegadores necesitan descargarlos por completo antes de mostrar la página. Y esto puede representar un problema si tenemos en cuenta el tiempo de respuesta del servidor.
La importancia del tiempo de respuesta
Todos los servidores tienen un tiempo de respuesta, que es el que transcurre desde que recibe una petición hasta que empieza a devolver datos. A este tiempo de respuesta hay que añadirle el que tarda el cliente en realizar dicha petición (no en descargar el archivo, sino simplemente en «solicitar» su descarga), lo cual depende de su velocidad de conexión. Esos tiempos normalmente suman un total de varias décimas de segundo. Décimas de retraso en la carga de la página que se multiplican por cada uno de estos archivos.
Imaginando un tiempo de respuesta total de 2 décimas de segundo (que es algo bastante corriente) la diferencia entre tener, por ejemplo, 6 archivos de JavaScript externos de 10Kb y un único archivo de 60 Kb es de ¡un segundo!. Un segundo de más en la carga de la página y, si dichos archivos se cargan previamente al contenido, un segundo de más en el que tus visitantes estarán contemplando una bonita página en blanco.
Si tienes curiosidad por saber el tiempo de respuesta de tu servidor, puedes hacer un ping desde la linea de comandos de tu sistema operativo (ping www.dominio.com) o usar esta herramienta online.
La solución al problema
La solución a esta situación es bien sencilla y consiste en limitar en lo posible el número de archivos externos que se encuentran en la página, con especial atención a aquellos que se encuentran antes del contenido (normalmente entre las etiquetas <head></head>).
Esto no representa mayor complicación ya que los .css y los .js son simples archivos de texto, y reducir su número es tan sencillo como copiar y pegar su contenido en un único archivo (uno para el CSS y otro para el JavaScript, por supuesto). Tan sólo hay que tomar la precaución de conservar el orden del código de los archivos, para evitar una superposición de estilos equivocada en CSS y la llamada a funciones o variables no definidas en JavaScript.
Para aquellos poco dados al código HTML, las hojas de estilo CSS se referencian de esta forma:
<link rel="stylesheet" type="text/css" href="archivo.css" />
O bien de ésta:
- <style type="text/css">
- @import url(archivo.css);
- </style>
Y los archivos externos de JavaScript son llamados así:
<script type="text/javascript" src="archivo.js"></script>
Estos códigos se sitúan normalmente entre las etiquetas de encabezado (<head></head>), y si usas WordPress probablemente encontrarás esas etiquetas en el archivo header.php del tema que estés usando.
Las excepciones
Hay dos casos en los que no merece la pena, e incluso es contraproducente, aplicar esta medida:
- Las hojas de estilo CSS que están definidas para distintos medios (pantalla, impresión...), ya que normalmente el navegador sólo pedirá la versión para pantalla (media=screen).
- Los archivos de gran tamaño que no se incluyen siempre de forma conjunta. Si tienes una gran cantidad de código dividido en distintos archivos, y éstos son llamados desde distintas páginas dentro de tu web, no merece la pena obligar a los visitantes a decargarse un único archivo de mayor tamaño, ya que el tiempo de descarga adicional seguramente superará al ahorro que supone en tiempo de respuesta.
Además, puede que a alguien se le ocurra la brillante idea de ahorrarse directamente la conexión a esos archivos e incluir todo el código CSS y JavaScript en la propia página. Evidentemente esto es una mala idea: esos archivos externos son cacheados en la mayoría de las ocasiones por los navegadores, por lo que cuando alguien visite una página de tu web, se ahorrará la descarga de ese código en las sucesivas páginas a las que acceda.
Esta entrada forma parte de la serie «Aumentar la velocidad de una página web en 7 pasos».
Barrapunto
CoRank Español
Delicious
Enchílame
Fresqui Tecnología
Menéame
Technorati Favorites
Escribir un comentario
No hay trackbacks
RSS 2.0
Bloglines
Google Reader
Live
MyYahoo
Netvibes
Newsgator
Rojo
No hay comentarios
Sé el primero en escribir un comentario a esta entrada.
Escribir un comentario
Si quieres añadir tu comentario a esta entrada, simplemente rellena el siguiente formulario:
* Campos requeridos
Puedes usar estas etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>.
No hay trackbacks
Para notificar de una mención en tu blog a esta entrada, habilita la notificación automática (Opciones > Discusión en WordPress) o especifica esta url de trackback: http://1blogdeblogs.com/2007/09/reducir-el-numero-de-archivos-externos-de-una-pagina-web.html/trackback