ECommerce Insights Blog

Stay on top of it all and get ahead with useful articles, how-tos, tips and tricks on e-commerce.

10 Techniques To Optimize Your Magento Theme

Accord - Responsive PSD Template-0

Magento is a powerful e-commerce open source software which comes with various in built modules to help your setup things quickly. Magento themes is something which you have to take care of yourself. A majority of the ready made themes does not follow all the golden rules of creating a fast site. So, once you are ready with your store and everything is working for you all you have to do is look for all the problem areas and tackle them one thing at a time. Here are the 10 optimization tasks you should perform on your Magento store.

  1. Use CSS Sprites (Image Sprites): CSS or Image sprites play a major role in speed optimization. An image sprite is a collection of images put into a single image and called via specific CSS classes so that page doesn’t take long time to load and sends multiple requests to server. Using image sprites will reduce the number of server requests and save bandwidth. In simpler words, CSS sprites reduce the total number of http requests, can reduce the total size of the images, and decreases  your pages load time.  Goal here is to “Make Fewer HTTP Requests”.
  2. Minify/Merge JavaScript and CSS files: Minification is another major option which every Magento theme should do. We remove all unnecessary characters, spaces, codes from CSS or JS file to reduce its size to bare minimum which improves load time. When CSS or JS is minified we also removes all comments and unnecessary white space, newline or tabs to reduce size of the file. Once, the size of the download file is reduced (due to minification, merge and combine) the average response and load time decreases drastically. Goal here is to “Reduce file size to bare minimum”
  3. Remove Unused CSS or JS code: We have noticed that in many themes, there are lots of unused code written which unnecessarily adding up to the file size. Removing all unused code is considered good for optimization. Goal here is to further “Reduce file size”.
  4. Use Content Delivery Network (CDN): CDN or content delivery network is a system of strategically placed servers around the globe so the client can access to the requested file from the closest server. The user’s proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster with less latency from the user’s perspective. Moreover, CDN also helps you in reducing web-server load drastically. Goal here is to “Parallelize file requests across multiple hostnames”.
  5. Perfect Placing: As per Yahoo ySlow placing of JS and CSS file is equally important. Always put CSS calls at top (under head section) and JS file calls in footer (bottom section). Use external CSS and JS as both are cached by browsers for subsequent page views.
  6. Placing too many widgets or external codes is a big NO: One of the major problem with many slow loading sites is external widgets or codes which can’t be cached. E.g. You place a facebook Like Widget and Google Ads on your page, when the page loads it makes a call to those two sites and waits for the request to be fulfilled, which is not ideal situation. Goal here is to “Reduce DNS Lookup”.
  7. Add Expires or Cache Control Headers: Using the Expires header you make page components cacheable for the first time visitor thus we avoid  unnecessary HTTP requests on subsequent page views. Expires headers are used for images, CSS, JS or flash components (Static objects). For dynamic objects we use cache control headers to help the browser with conditional request.
  8. Enable Gzip compression: Although, this is a server specific task but plays a major role in speed optimization. Gzipping generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip.
  9. Reduce the number of DOM elements: A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler. A high number of DOM elements can be a symptom that there’s something that should be improved with the markup of the page without necessarily removing content.
  10. Other Important Factors: Use caching mechanism, varnish reverse proxy caching, Configure ETAGs, Use cookie free domains, make Favicon small and cachable, avoid URL Redirects, avoid HTTP 404 (if possible).

Other Helpful Articles:

  1. How To Improve Magento Store’s Performance
  2. Is Your Magento Store Fully Optimized?

I would love to hear your optimization experiences, please leave me a comment and  let me know. Subscribe our RSS to receive latest Magento updates.