How to improve page load speed without server overhead so you can serve more pages.
Need for a build?
Magento being written in php, an interpretive language, the need to build is not essential for deployment. Moreover, since many small store owners are not technical or do not have a full time technical team, solutions that just work inline are preferred. For example, using plugins for css and js minify, or transfer to CDN as and when needed inline, or even use Google’s excellent
pagespeed plugin.Unfortunately, each one of these inline steps though improve page load speeds, result in a ever-so-slight slow down of the server each time. On a high traffic site, this results in inconsistent performance and user experience. We even zip the static content in .gz files so the web server (nginx in our case) does not have to spend a few milliseconds each time – assuming ofcourse you do not have a CDN that can zip.
Grunt, the task builder
We have used Grunt (
http://gruntjs.com/) as a task builder. Grunt is a popular javascript task builder written in nodejs. We use grunt to do many release oriented activities – packaging a release, installing a release, minify css, js, etc. In this article – a first of a series we plan – we will go through the process of installation of grunt and offer a solution to minify js and css flles as well as optimize images in the skin directory.
Installing grunt
- Install nodejs and npm
curl -sL https://raw.githubusercontent.com/nodesource/distributions/master/rpm/setup_4.x | sudo bash -
sudo yum install nodejs npm
- Install grunt
sudo npm install -g grunt-cli
- Download our Gruntfile.js and related code
mkdir /scripts
cd /scripts
git clone https://github.com/luroconnect/gruntformagento.git
cp –r gruntformagento/src/* .
Run grunt to minify css and js (and more)
cd /scripts
grunt optimize
Typical output :
Running "copy:skin" (copy) task
Created 229 directories, copied 1769 files
Running "copy:js" (copy) task
Created 197 directories, copied 893 files
Running "uglify:skin" (uglify) task
>> 30 files created.
Running "uglify:js" (uglify) task
>> 301 files created.
Running "cssmin:skin" (cssmin) task
>> 149 files created. 2.34 MB ? 1.77 MB
Running "imagemin:skin" (imagemin) task
Minified 1412 images (saved 400.26 kB)
Running "compress:skinjs" (compress) task
>> Compressed 32 files.
Running "compress:skincss" (compress) task
>> Compressed 155 files.
Running "compress:js" (compress) task
>> Compressed 332 files.
Done, without errors.
What is done by optimize :
- Create 2 directories skin.min and js.min initially with identical content as skin and js respectively
- Run the minifyfor css and js on the skin.min and js.min directories. .min.js files are not minified.
- Run image optimizer on skin (png,jpeg)
- Generate .gz gzipped files – for static delivery of gzip. See note below on nginx configuration.
Update Magento Web URLs
Update the Magento unsecure and secure skin and js URLs to point to skin.min and js.min respectively where minified content is kept.
Update nginx configuration
nginx configuration to load .gz static content if it exists
#/* static content can have expiry set to long */
location ~* \.(jpg|jpeg|gif|png|css|js|ico|swf|woff|woff2|svg|TTF)$ {
gzip_static on;
#access_log off;
log_not_found off;
expires 360d;
}
Gzip_static on tells nginx to serve the .gz file of a static file it exists rather than nginx compressing it.
Run optimizer on images in media/wysiwyg
grunt media
copy optimized images from media.min/wysiwyg to media/wysiwyg manually
Conclusion
We firmly believe in creating a documented release process. And Grunt with our Gruntfile.js goes a long way in making this a reality. In this article we have introduced the minfication, image optimization and gzip compression of static files. Try it and let us know if you have any suggestions.
This script can be run directly on the live server, but make sure you do it at a low traffic time.
