Make faster Magento ecommerce: Performance & Hosting Tips for Better Conversion

Enable Cache Management in the Magento Admin Panel

Enable Cache Management in the Magento Admin Panel

First thing you should always do before going live — enable cache management! This is good way to 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

Enable JavaScript and CSS Combining

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)

Install Fooman Speedster via Magento Connect

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 thisMagento 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.

Install HTML Minification by Jemoon via Magento Connect (Free)

Install HTML Minification by Jemoon via Magento Connect

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.

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

# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
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
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
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

 

Use Expires Headers for Better Cache Control

“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.”

 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"
Header append Cache-Control "public"
// ]]>

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:

  
 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?

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

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 our tips is helpful! If you have any questions don’t hesitate to contact us

Comments
My Cart
loading