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.
<!--?xml version="1.0" encoding="UTF-8"?--> <cms_index_index> page/html/headhomepage.phtml <!-- rest of your local.xml -->
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: