MEJORA LA CARGA DE TU WEB MINIMIZANDO JAVASCRIPT Y CSS EN SYMFONY2

En este artículo vamos a ver una forma sencilla y rápida de mejorar el rendimiento y la velocidad de carga de una web desarrollada con Symfony2, una de las mayores preocupaciones de cualquier desarrollador web. Es indiscutible que una carga lenta de una web puede hacer que los usuarios se larguen y busquen la información en otro sitio. Para enfrentarnos a estos problemas, en Symfony2 contamos con Assetic, que combinado con otras prácticas como puede ser el uso de caché, se pueden obtener resultados realmente óptimos.

Como decíamos, vamos a ver cómo optimizar la carga de una web, y lo haremos minimizando el código de las hojas de estilos y javascripts tanto como sea posible, sin perder funcionalidad, para lo que utilizaremos una librería que proporciona Yahoo!: YUI Compressor.

Lo primero será descargar el fichero jar de YUI Compressor y guardarlo en tu proyecto Symfony, en app/Resources/java/yuicompressor.jar. Hecho esto, se configuran los filtros Assetic para los ficheros CSS y javascript:

# app/config/config.yml
assetic:    
     filters:        
          yui_css:            
               jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"        
          yui_js:            
               jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"

Para aplicar uno de estos filtros en tu proyecto, ve a la plantilla correspondiente y escribe lo siguiente, para el caso de las hojas de estilo:

{% stylesheets '@VabadusBundle/Resources/public/css/*' filter='yui_css' %}    
     <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}

o para los ficheros javascript:

{% javascripts '@VabadusBundle/Resources/public/js/*' filter='yui_js' %}    
     <script src="{{ asset_url }}"></script>
{% endjavascripts %}

Esto tiene el inconveniente, que mientras estemos desarrollando, resultará muy difícil leer y depurar estos ficheros comprimidos, por lo que lo mejor será desactivar estos filtros en modo depuración. Para hacer esto, solo será necesario incluir un símbolo ? antes del nombre del filtro:

{% stylesheets '@VabadusBundle/Resources/public/css/*' filter='?yui_css' %}    
     <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}