Mejora la velocidad de carga de tus páginas web (III)

Usa ficheros para JavaScript y las hojas de estilo CSS

Usar ficheros externos proporciona páginas más rápidas porque Javascript y las hojas de estilo CSS son cacheadas por el navegador.

Si insertamos el código Javascript y los estilos CSS dentro de la página HTML, estos serán descargados cada vez que la página se solicite. Esto reduce el número de peticiones HTTP, pero aumenta el tamaño de la página HTML.

Por otro lado, si el código Javascript y los estilos CSS se encuentran en ficheros externos, y son cacheados por el navegador, el tamaño del documento HTML se ve reducido sin incrementar el número de peticiones HTTP.

El factor clave entonces, es la frecuencia con que los archivos de Javascript y CSS son cacheados en relación con el número de documentos HTML solicitados. Este factor, aunque difícil de cuantificar, se puede medir usando varias métricas. Si los usuarios de su sitio web visitan múltiples páginas por sesión y varias de las páginas utilizan los mismos scripts y hojas de estilo, hay un gran beneficio en el uso de ficheros externos.

Muchos sitios web se encuentran en la media de estas métricas. Para dichos sitios, la solución más adecuada es incorporar el Javascript y el CSS en ficheros externos. La única excepción en que insertar dichos códigos dentro de la página es más adecuado, es en páginas principales como Yahoo. Aquellos sitios con muy pocas (tal vez sólo una) páginas vistas por sesión, encontrarán mejores resultados en incorporar los códigos dentro de las mismas.

Para páginas web de inicio que son típicamente la primera de muchas otras visitas del sitio, hay técnicas que minimizan las peticiones HTTP similares a insertar el código javascript y CSS en las páginas, unido a a los beneficios del cacheado de ficheros externos. Una de dichas técnicas consiste en insertar el cógigo Javascript y CSS en la página de inicio, y descargar dinámicamente los ficheros externos después de haber cargado la página web. Las siguientes páginas referenciarían a los ficheros externos que ya se encuentran en la caché del navegador.

Fuente: http://developer.yahoo.com/performance/rules.html#external