CSS y JS con CSS JS Booster


Hace un par de semanas clonando un proyecto de Github para gráficos de flujo de procesos me encontré con una pequeña librería que me llamó la atención. CSS JS Booster es su nombre. Es un proyecto simple pero muy bien pensado, la idea y utilidad captaron mi atención de inmediato. Herramienta que combina y comprime las hojas de estilo CSS y los scripts de JavaScript que incluimos en nuestras aplicaciones una y otra vez.

Particularmente soy partidario de cargar estos contenidos desde los CDN online como los de Google en donde se encuentran por ejemplo todas las librerías JQuery y jQuery-UI que utilizo regularmente. Pero existen situaciones en las que utilizamos contenido javascript no presente en estos CDN como proyectos en desarrollo hosteados en Github por ejemplo. Dicho contenido lo descargamos a nuestros servidores junto con las hojas de estilo que desarrollamos y aquí es donde entra el Booster.

Esta librería escrita en PHP optimiza el sitio puesto que aumenta la velocidad de carga del contenido CSS y JavaScript comprimiendo y almacenándolo en caché para su uso y solo actualizará cuando detecte existen cambios en la fuente.

A continuación las características para cada uno de los contenidos tomadas de la documentación en Github

CSS

  • Combina varios ficheros CSS, reduciendo así el número de llamadas.
  • Reduce el código de CSS.
  • Etiqueta las imágenes menores de 24 KB como data-URI o MHTML (para IE menor al 7).
  • Comprime los resultados en formato GZIP.
  • Mantiene el resultado en la caché de los navegadores, siempre y cuando no haya cambios.

Javascript

  • Combina varios archivos reduciendo así el número de llamadas.
  • Reduce el tamaño del código del archivo a través de Google Closure Complier Webservice.
  • Los resultados son comprimidos en formato GZIP.
  • Los resultados son almacenados en la caché de los navegadores, mientras que estos no cambien.

La librería fue desarrollada en PHP5 por lo que cualquier versión 5.x es compatible. Su uso es muy simple, una clase se encarga de todo el trabajo duro por nosotros, solo debemos instanciarla como ya sabemos y establecerle las rutas relativas en nuestro servidor donde se encuentran las hojas de estilo y los scripts javascript utilizados.

  include('booster/booster_inc.php'); 
  $booster = new Booster();

  $booster->css_source = '../css'; //ruta relativa hacia los archivos css
  echo $booster->css_markup();

  $booster->js_source = '../js'; //ruta relativa a la carpeta
  echo $booster->js_markup();

Conclusión

Como se dan cuenta su uso es bastante sencillo. Comprime y reduce el contenido, una vez realizada la tarea los inserta en la caché de nuestros navegadores hasta que cambien las fuentes. Recomendable principalmente para aquellos desarrolladores que necesiten utilizar librerías que no se encuentren en los CDN habituales, y para aquellos sitios donde existen muchos ficheros de hojas de estilo. La opción está y muy bien pensada a mi modo de ver pero la selección siempre será de ustedes.

Latest posts by Leroy Ley (see all)