Si usan JavaScript y Hojas de Estilo en sus páginas web, podrán encontrar que una de las mejores prácticas para reducir la velocidad de carga de las páginas web y mejorar el posicionamiento web en buscadores y a su vez el Page Rank, es incluir todo el código JavaScript y Hojas de Estilos (Cascading Style Sheets o CSS) en archivos externos.

Hojas de Estilo en Cascada - Wikipedia

Separar en archivos externos las hojas de estilo y los scripts también es una práctica recomendada por World Wide Web Consortium (W3C) así que entremos en materia.

Hojas de Estilos o CSS

Antes de comenzar a realizar la «ardua» tarea de separar los estilos en archivos externos, les recomiendo buscar entre sus páginas candidatas, páginas que usen los mismos estilos como colores de fondo, fuentes, colores de primer plano las cuales serían las primeras candidatas para crear sus archivos externos CSS, para el caso de una hoja de estilos deben incluir algo como lo siguiente dentro del tag HEAD de sus páginas:



<link rel=stylesheet type="text/css" href="hoja_de_estilos.css">

Deben revisar que estén usando una sintaxis correcta y especificar correctamente la ruta donde se encuentra su hoja de estilo o archivo .CSS.

JavaScript o JS

Para el caso de los JavaScripts es una práctica recomendable separarlos en archivos externos sobretodo si se requiere usar código en común en diferentes páginas, también facilitará el mantenimiento de sus páginas o sitios web. Otro aspecto a favor de esta práctica, es que al visualizar el código fuente de la página (para el caso de usuarios inexpertos) no se va a visualizar el código de los scripts.

Un punto importante antes de realizar una tarea como esta, es validar que el código JavaScript funcione correctamente; una buena práctica es probarlo en varios navegadores web. Para separar los scripts en archivos externos deben incluir algo como lo siguiente dentro del tag HEAD de sus páginas:



<script src="script.js" language="javascript" type="text/javascript"></script>

Siguiendo las mismas recomendaciones que en el caso de las hojas de estilo, deben revisar que estén usando sintaxis correcta y que la ruta donde se encuentre su archivo .JS sea la correcta.

Ventajas

Detallando un poco más las ventajas más importantes de convertir nuestras hojas de estilo y javascript en archivos externos tenemos:

  • Reducen el tamaño del encabezados de las páginas web o la sección HEAD, haciendo que su carga sea más rápida.
    Ustedes se preguntarán ¿dónde está el ahorro de tiempo si igual se incluye el código «sobrante» en un archivo externo?, bien, una de las reducciones de tiempo se encuentran de lado de los navegadores al incluir las hojas de estilo y scripts en las áreas de cache, sobretodo si tenemos varias páginas web que usen los mismos estilos o los mismos scripts.
  • Las páginas web serán más atractivas para los buscadores, ya que reduciremos la cantidad de contenido no importante en el encabezado de la página.
  • Por obvias razones, será mucho más fácil el mantenimiento de las páginas dado que, parte del diseño será separado del contenido.
  • Es una práctica avalada y recomendada por la World Wide Web Consortium (W3C) -esto también aplica para cualquier otro tipo de scripts-.

Si bien podrán existir otras ventajas creo que las más importantes son las ya mencionadas. Otro aspecto a tener en cuenta es, que al aumentar la velocidad de descarga del sitio, van a hacer su sitio más amigable para buscadores web sobretodo Google, que ahora tiene en cuenta la velocidad del sitio como un factor más para ranking de busqueda de sitios web.