Hire Us

How to Improve Magento Front-End Performance



In Ecommerce, most companies do not understand the importance of site performance, until it’s too late. Though there are several blogs and white papers available online to nudge businesses in improving performance of their site, only a handful of sites pay heed to this integral issue. Take your reaction to a site with performance issues as an example to better understand the effect. When you visit a site that loads slowly, has glitches here and there, offers complicated check in and check out process, it becomes difficult to navigate the site. You would think it to be an utter waste of time and not come back to it ever. Same happens to any visitor who experiences site performance issue. If your site takes more than 3 seconds to load in a fast internet connection, you should read this blog, it’s for you!

A High Performance Web Design

Website performance is crucial and there are no doubts about it, however, to do that and maintain the good reputation a high performance web design is necessary. Several users spend a large portion of their time waiting for any given page to load after the main HTML page has been retrieved. Magento informs that this time spent can be reduced. They suggest,

  • Reducing the number of HTTP requests,
  • Optimizing JavaScript
  • Optimizing Images, and
  • Optimizing the CSS.

Minimizing The Number of Http Requests

Every stylesheet, image and script in an HTML page requires a spate round trip from the browser to the web server. The latency in these HTTP requests delays the display of the page. This latency can diminish the amount of time it takes to get the HTML page itself. An effective thumb rule to make pages faster is to find a way to reduce the number of HTTP requests it requires. This principle is the basis for any front end optimization technique. Here are a few techniques to consider:

  • Combining Javascript: By merging JavaScript files and CSS into fewer files reduces the HTTP request numbers. However, this step might prove to be challenging when the scripts and style sheets vary from page to page.
  • Combining and Minifying Files: Magento offers users the capability to combine files and minify them. All you have to do is log in to the Admin Panel and make the necessary changes. It is an effective way to reduce site load time and HTTP requests.

CSS Image Sprites

CSS image sprites can reduce the number of image requests because the sprite is a grid of images combined together in one single image. If you use the CSS background image and background position properties, you would be able to display the desired image.

  • Using Inline Images: Inline images use the data scheme to embed image data in an HTML page. Using inline images in the stylesheets is a great way to reduce HTTP requests. All major browsers support inline images.
  • Format: The format is essential in reducing request. Using a proper format with accurate code reduces the problem by half. Use format like data:[<MIME-type>][;charset=<encoding>][;base64],<data>, where the encoding is indicated by base64. It is however important to check with the browsers as some accept a non standard ordering if both base64 and charset are supplied.
  • Preventing 404: HTTP requests are expensive, so having useless requests like 404 Not Found is unnecessary and slows down the user experience.

Optimizing CSS

Optimizing the CSS of your blog is vital when running a large site. CSS has a tendency to get cluttered like HTML. So try applying these rules to them:

  • No more than one external CSS stylesheet
  • Small CSS in style tags for above-the-fold content
  • No @import calls
  • No inline CSS

Always place your CSS in the <head> block of a page. This will provide a sequential loading of the page and improve the overall site performance.

Optimizing JavaScript

To optimize JavaScripts there are a few steps involved to make the process better and result oriented.

  • Using CDN: The impact on the response time of the site is related to the user’s proximity to your web server. By deploying your content across several geographically dispersed servers, you can make pages load faster. To do this, do not redesign your web application, especially to work in a distributed server. The easy way to do is to first disperse the static content. By doing this you reduce the response time. You can switch to a CDN or Content Delivery Network to dramatically improve the speed of the website.
  • Tracking Pixels: Tracking scripts are designed so you can download them once and cache them safely in your browser for future page loads on your site and even better, for page loads on any other sites that use the same type of tracking scripts. Insert scripts at the bottom of the <body>, Insert scripts after a load event, Use asynchronous tracking codes. Follow these simple steps to make tracking easy.
  • Deferring JavaScript: This implies to wait until the page is loaded before parsing the JavaScript, resulting in page to load faster. The process has no effect on the web page but it rearranges the loading process so JavaScipt is deferred till the end. A useful tactics for catalog and product pages.
  • Obfuscating Code: Obfuscating is an alternative optimization method that is applied to source code. This usually delivers greater code compression than minification, but it may sometimes result in more bugs.

Image Optimization

To make the most out of image optimization, use the following techniques for effective results:

  • Don’t Scale Images in HTML: Do not use bigger images than necessary because you can set the width and height in HTML.
  • Make favicon.ico small and cacheable: The favicon.ico stays in the root of your server. As it is located in your server cookies are sent every time it is requested by browsers. The image also interferes with the download sequence. Hence, you have to mitigate with the favicon drawbacks. Use an icon that is under 1K and set the expires header to something you are comfortable.

In Summary

No matter how many times we tell, there is no enough stressing the fact how important front end performance is for an ecommerce site. Following these tricks will generate positive results on your site and increase the number of visitors to your site. Front end performance is crucial and the blog help you optimize it.

Facts to Tweet

Magento offers a white paper with detailed description of the methods to implement for better site performance results on the front-end. To download the file, click on the link below:


How to Improve Magento Front-End Performance