Straight out of the box a default Magento store can be very slow to use. Here are all of the ways we optimize stores at Fast Division, including our new Avalanche magento template.
Enable Cache Management in the Magento Admin Panel
Here’s the first thing you should always do before going live — enable cache management! This will greatly improve Magento performance. Go to System > Cache Management and enable each cache type. Just make sure when you update your system to flush the cache so you can see your changes.
Enable JavaScript and CSS Combining in the Magento Admin Panel
Another easy configuration setting located in System > Configuration under Advanced > Developer. Merge your JavaScript and CSS files to save on initial loading time when the customer first visits your site. Without this your customers will have to download each JS/CSS file one-by-one. Reduce the number of HTTP requests dramatically by using this option. In Avalanche, we cut down our JS requests to 2 files on the homepage and 1 CSS file.
Install Fooman Speedster via Magento Connect (Free)
This free extension from Fooman will minify your JavaScript and CSS files using the PHP minify library. It also compresses your code and provides automatic versioning. To install, click here to get your extension key for Fooman Speedster. You’ll then need to log in to your Magento admin panel. Go to System > Magento Connect > Magento Connect Manager. Add the extension key and install the extension. You may have to update your folder write permissions via SSH in your Magento install directory. Refer to this Magento Connect permissions guide for more information.
After installing, your files should be minified instantly. Go ahead and check your combined scripts to see Fooman Speedster in action.
Fooman Speedster on Magento Connect
Install HTML Minification by Jemoon via Magento Connect (Free)
Although this extension is still in beta, I haven’t experienced any issues with it. HTML Minification by Jemoon is straightforward and easy to set up. Get your extension key for HTML Minification here. Follow the same instructions as Fooman Speedster. Make sure you allow beta extensions in your settings tab. Your HTML files should automatically be minified! It’s that easy.
HTML Minification by Jemoon on Magento Connect
Optimize Your .htaccess File for Max Performance
There’s a lot of optimization techniques you can use to dramatically increase Magento performance via your .htaccess configuration. Here’s a comprehensive list:
Enable Gzip Compression
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <IfModule mod_deflate.c> # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/ <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s,?\s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule> # HTML, TXT, CSS, JavaScript, JSON, XML, HTC: <IfModule filter_module> FilterDeclare COMPRESS FilterProvider COMPRESS DEFLATE resp=Content-Type /text/(html|css|javascript|plain|x(ml|-component))/ FilterProvider COMPRESS DEFLATE resp=Content-Type /application/(javascript|json|xml|x-javascript)/ FilterChain COMPRESS FilterProtocol COMPRESS change=yes;byteranges=no </IfModule> </IfModule> |
Use Expires Headers for Better Cache Control
“Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | # ---------------------------------------------------------------------- # Expires headers (for better cache control) # ---------------------------------------------------------------------- # These are pretty far-future expires headers. # They assume you control versioning with cachebusting query params like # <script src="application.js?20100608"> # Additionally, consider that outdated proxies may miscache # www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ # If you don't use filenames to version, lower the CSS and JS to something like # "access plus 1 week" or so. <IfModule mod_expires.c> ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # Your document html ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # RSS feed ExpiresByType application/rss+xml "access plus 1 hour" # Favicon (cannot be renamed) ExpiresByType image/x-icon "access plus 1 week" # Media: images, video, audio ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType font/truetype "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" # CSS and JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" <IfModule mod_headers.c> Header append Cache-Control "public" </IfModule> </IfModule> |
Remove ETags
“Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser’s cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.”
1 2 3 4 5 6 7 8 9 10 11 12 13 | # ---------------------------------------------------------------------- # ETag removal # ---------------------------------------------------------------------- # FileETag None is not enough for every server. <IfModule mod_headers.c> Header unset ETag </IfModule> # Since we're sending far-future expires, we don't need ETags for # static content. # developer.yahoo.com/performance/rules.html#etags FileETag None |
Remove Unncessary JavaScript Files in Your Magento Layout XML Files
There’s a lot of JavaScript bloat in Magento. You can safely remove certain files and improve performance. Here’s a sample from Avalanche’s page.xml layout file:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <action method="addJs"><script>prototype/prototype.js</script></action> <action method="addJs"><script>lib/ccard.js</script></action> <action method="addJs"><script>prototype/validation.js</script></action> <!--<action method="addJs"><script>scriptaculous/builder.js</script></action>--> <action method="addJs"><script>scriptaculous/effects.js</script></action> <!--<action method="addJs"><script>scriptaculous/dragdrop.js</script></action> <action method="addJs"><script>scriptaculous/controls.js</script></action> <action method="addJs"><script>scriptaculous/slider.js</script></action>--> <action method="addJs"><script>varien/js.js</script></action> <action method="addJs"><script>varien/form.js</script></action> <!--<action method="addJs"><script>varien/menu.js</script></action>--> <!--<action method="addJs"><script>mage/translate.js</script></action>--> <action method="addJs"><script>mage/cookies.js</script></action> |
I commented out all of the Scriptaculous code and translate.js. Menu.js was also removed for custom jQuery code.
Install APC, Eaccelerator or Xcache on Your Server
This one is more difficult — you’ll need SSH access to install one of these on your server. These cache systems make PHP more responsive by caching your PHP code, stopping the interpreter from recompiling code upon every request. I’ve used APC in the past and have had mixed results using it with Magento, but try it out and see if your page performance increases.
If you’re wondering which one to use, check out APC vs. Eaccelerator vs. Xcache on StackOverflow.
If you want to install APC on an Ubuntu server, this is the approach I use.
Move jQuery & Custom JavaScript Code to the Footer
If you’re using jQuery (hopefully you are) and custom code, you’ll definitely want to include those files at the bottom just above your ending body tag. This way your website will render on the screen faster and not have to wait for these additional JS files to load. Learn more about JS footer code here.
Use Amazon S3 for Image Hosting & Install OnePica_ImageCDN via Magento Connect (Free)
Amazon S3 is a cost-efficient way to serve product photos in your Magento store. It’s very inexpensive and quick to set up. Luckily there’s a free Magento extension that lets you hook up your Amazon S3 bucket. Using OnePica_ImageCDN makes it easy to set up your own CDN server for images using Amazon S3. Why should you use Amazon S3/CDN?
“User proximity to web servers impacts response times. Deploying content across multiple geographically dispersed servers helps users perceive that pages are loading faster.”
Check out OnePica_ImageCDN here. To learn how to set up your own Amazon S3 account, read this beginner’s guide.
Design CSS Sprites to Reduce HTTP Requests
Here’s another standard front-end optimization: Group your CSS background images into sprites. The browser downloads the images used in your CSS when your CSS file is loaded, slowing down render speed. A sprite can include as many images as you want in a single file. Typically I group rating stars and button states into their own unique sprites instead of having separate images for each state or rating, e.g. button_hover.gif, button_active.gif or rating_1.gif, rating_2.gif. However, it gets kinda tricky. If you have repeat-x or repeat-y backgrounds you can’t place them together in one sprite. When you build sprites you’re using overflow: hidden in your CSS and cutting off part of the sprite to only show one piece of the sprite. To learn more about CSS sprites, click here.
Testing Your Magento Theme Speed
If you want to see how fast your magento theme is performing in the front-end, use Developer Tools in Chrome or Firebug for Firefox. Install the YSlow extension/add-on.
Hopefully these tips help you in your quest to make Magento as fast as possible! If you have any questions about Magento don’t hesitate to contact us for more information.
