Un sistema Magento (por defecto) carga más de 200 ficheros Javascript (> 1MB), así como una gran cantidad de estilos necesarios para que la página se visualice correctamente. Esto se traduce en unos tiempos de carga iniciales bastante lentos. Para reducir el impacto, Magento incorpora una serie de optimizaciones por defecto centradas en los siguientes aspectos:
- Optimización JS
- Optimización CSS
- Optimización HTML
Estas optimizaciones pueden habilitarse desde el administrador de Magento (siempre que esté en modo developer) o a través de línea de comandos.
JS: Merge files
bin/magento config:set dev/js/merge_files 1JS: Bundling
bin/magento config:set dev/js/enable_js_bundling 1JS: Minify
bin/magento config:set dev/js/minify_files 1JS: Move to bottom
bin/magento config:set dev/js/move_script_to_bottom 1CSS: Merge
bin/magento config:set dev/css/merge_css_files 1CSS: Minify
bin/magento config:set dev/css/minify_files 1CSS: Critical Path
bin/magento config:set dev/css/use_css_critical_path 1HTML: Minify
bin/magento config:set dev/template/minify_html 1Después de aplicar estas optimizaciones, será necesario realizar una limpieza de caché y desplegar ficheros estáticos.
Recomendaciones
No todas las optimizaciones son siempre recomendables. Así como la minificación de CSS y JS suele ser siempre aconsejable y no produce problemas colaterales, otras optimizaciones como el JS Merge o el JS Bundling pueden llegar a empeorar el rendimiento e incluso provocar errores.
También existen herramientas de terceros destinadas a mejorar el empaquetado de ficheros Javascript. Te recomiendo echar un vistazo al artículo OPTIMIZACIONES JS CON MAGEPACK EN MAGENTO.
