Over the course of the past few months I’ve been on journey to score good numbers on Google’s PageSpeed tool. Now out of the box Magento doesn’t really conform to Google’s standards at all. Extensions you add to your store that includes it’s own CSS and JS files. These files result in separate requests and slow down the page load. I needed a way to make BuluBox.com load fast. We where already distributing the load across multiple EC2 instances under a Elastic Load Balancer, each running it’s own copy of Varnish paired with the amazing Nexcess Turpentine extension. With some proper tweaking to account for the ability to perform individual Varnish flushes across multiple servers (fork here) we now have a pretty fast Magento store. The only thing left to do is improve the page loading experience.
To get started I only wanted to make these changes on our homepage for the time being. This is the most visited page, and it by default doesn’t need alot of the other javascript that downstream pages in Magento need. Magento allows you to load a separate head.phtml file for you homepage by modifiying your local.xml file like so:
app/design/frontend/mytheme/theme/layout/local.xml
<!--?xml version="1.0" encoding="UTF-8"?-->
<cms_index_index>
page/html/headhomepage.phtml
<!-- rest of your local.xml -->
Using this method you can taylor your homepage to load Javascript asynchronously using Head.JS. Paired with Head.JS I built a build script for Magento. While it contains many files specific to my theme the concept can work for your store.
echo "* * * * * * * * * * * * * * * * * * * * *"
echo " Build Script v0.1"
echo " by Tegan Snyder"
echo "* * * * * * * * * * * * * * * * * * * * *"
echo ""
echo "combining css to mysite.css"
cat /store/skin/frontend/mytheme/theme/css/styles.css /store/skin/frontend/base/default/css/widgets.css /store/skin/frontend/mytheme/theme/css/skin.css /store/assets/css/jquery.modal.min.css > /store/css/mysite.css
echo "minifying combining css to mysite.min.css"
java -jar /build/yuicompressor-2.4.7.jar /store/css/mysite.css -o /store/css/mysite.min.css
echo "combining magento js to scriptaculous-varien-magento.js"
cat /store/js/scriptaculous/builder.js /store/js/scriptaculous/effects.js /store/js/scriptaculous/dragdrop.js /store/js/scriptaculous/controls.js /store/js/scriptaculous/slider.js /store/js/varien/js.js /store/js/varien/form.js /store/js/mage/translate.js /store/js/mage/cookies.js | uglifyjs -o /store/js/scriptaculous-varien-magento.js
#echo "minifying any other random js files"
echo 'minifying prototype files'
java -jar /build/yuicompressor-2.4.7.jar /store/js/prototype/prototype.js -o /store/js/prototype/prototype.min.js
java -jar /build/yuicompressor-2.4.7.jar /store/js/prototype/validation.js -o /store/js/prototype/validation.min.js
echo "done"
So whats the result?
Some notes on the implementation:
I recently moved from a Memcache Cluster (3 Nodes ElastiCache on AWS) to Redis. I’ve seen very significant improvements using Redis. Amazon recently announced Redis on ElastiCache. I’m pleased to announce that after implementing two ElastiCache instances: one for Cache, and one for session storage I have seen big gains. If you are adventurous and seeking similar performance gains take a look at Colin Mollenhour’s extensions: