Speeding up magento : A case study
Magento is an amazing platform for developing ecommerce websites. In India these days ecommerce websites are popping up like mushrooms after the rains. Since Magento already has most of the features that you’ll ever need in your ecommerce website plus then some it makes a lot of sense to develop using this as a platform.
There is a great marketplace for magento themes and plugins available at http://www.magentocommerce.com/magento-connect/ which makes developing stores on magento a pretty straightforward affair.
But … There is always a but. Magento isn’t known for being fast. Atleast not out of the box.
This is the problem that Zoroy.com came to us with. They came to us with a website that sold premium chocolates online but the pageload speeds were terrible. We used pingdom to test speeds and they were close to 8seconds for the homepage.
Magento cannot be run on a shared hosting environment. You need atleast a VPS to run it and zoroy already had one. We installed Alternate PHP Caching to improve caching. This radically improves the speed of any magento installation. If nothing else install APC on your webserver — increase the cache size according to the specs mentioned here..http://blog.nexcess.net/2011/03/25/optimizing-apc-cache-settings-for-magento/
We also improved the theme by using sprites in css instead of calling images one by one. Tool recommendation: spritecow.com
We optimized all the product images using smushit.com and jpegmini.com. These sites compress images using lossless compression methods which means images look the same — they’re just smaller.
Apache headers for browser based cache expiration go a long way towards making the site feel faster on the inside pages. All the reusable assets can be cached for a longer time using htaccess rules. We have a standard set of rules that we use in all our projects. This is it
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 31556926 seconds”
ExpiresByType image/x-icon “access plus 31556926 seconds”
ExpiresByType image/jpeg “access plus 31556926 seconds”
ExpiresByType image/png “access plus 31556926 seconds”
ExpiresByType image/gif “access plus 31556926 seconds”
ExpiresByType application/x-shockwave-flash “access plus 31556926 seconds”
ExpiresByType text/css “access plus 31556926 seconds”
ExpiresByType text/javascript “access plus 31556926 seconds”
ExpiresByType application/x-javascript “access plus 31556926 seconds”
ExpiresByType text/html “access plus 31556926 seconds”
ExpiresByType application/xhtml+xml “access plus 31556926 seconds”
</IfModule>
<IfModule mod_headers.c>
# YEAR
<FilesMatch “.(ico|gif|jpg|jpeg|png|flv|pdf)$”>
Header set Cache-Control “max-age=29030400”
</FilesMatch>
# WEEK
<FilesMatch “.(js|css|swf)$”>
Header set Cache-Control “max-age=604800”
</FilesMatch>
# 45 MIN
<FilesMatch “.(html|htm|txt)$”>
Header set Cache-Control “max-age=2700”
</FilesMatch>
</IfModule>
# Turn on Expires and set default expires to 3 days
ExpiresActive On
ExpiresDefault A259200
# Set up caching on media files for 1 month
<FilesMatch “.(ico|gif|jpg|jpeg|png|flv|pdf|swf|mov|mp3|wmv|ppt)$”>
ExpiresDefault A2419200
Header append Cache-Control “public”
</FilesMatch>
# Set up 2 Hour caching on commonly updated files
<FilesMatch “.(xml|txt|html|js|css)$”>
ExpiresDefault A7200
Header append Cache-Control “private, must-revalidate”
</FilesMatch>
# Force no caching for dynamic files
<FilesMatch “.(php|cgi|pl|htm)$”>
ExpiresDefault A0
Header set Cache-Control “no-store, no-cache, must-revalidate, max-age=0”
Header set Pragma “no-cache”
</FilesMatch>
Magento includes a feature with which you can merge the the css and js files together. But this is pretty basic. Fooman speedster’s the plugin to use in this case. http://www.magentocommerce.com/magento-connect/fooman-speedster.html . It minifies, merges and compresses the js files with almost no effort at all — unless you hit a bug — then in that case there is some effort :)
Finally we used cloudflare.com to give zoroy the cdn advantage without the associated cdn pricetag. Cloudflare.com also does a lot of things to “supercharge” your website.
We used suggestions from Google’s page speed insights https://developers.google.com/speed/pagespeed/insights and Pingdom’s full page speed test http://tools.pingdom.com/fpt/ extensively and we would suggest that you do too for the next time you’re optimizing any website.
The final result was that we brought the terrible page load speed down to 1.51 seconds from 10 seconds. The no. of requests on the page was reduced from 108 to 83.
