QUESTIONS?

Updates & insights on all things CDN

How To Achieve a 2 Second Page Load with a Magento eCommerce Store

This is a guest post by Kris Kayyal, who has a degree in Business and a background in conversion rate optimization & user experience. He grows the business, and profits, for companies large and small.
Learn how my-spycam.com, a spy camera store, optimized their website. They took Magento, a platform notorious for slow load times, and had every page loading with 2.5 seconds -- even those weighed down with heavy images. Let's see how it was done and the lessons learned along the way. Here's a peek at the before-and-after results:

Before: 4.5s load time The Webpagetest results for my-spycam's spy camera page before the optimization After: 2.1s load time The Webpagetest results for my-spycam's spy camera page after the optimization

Overall strategy:
  1. Decrease the amount of data downloaded
  2. Reduce the time spent waiting to receive data
  3. Increase the download speed
Changes made:
  1. Implement the Yahoo Developer Network best practices
  2. Optimize Magento
  3. Setup faster hardware for server hosting
  4. Find alternative ways to include the same plugins
  5. Remove unnecessary components
  6. Use an external DNS provider
The overall goal is to increase download speeds, reduce the amount of data needed, and minimize wait time. This report focuses on the spy cameras category page, but the improvements helped several other pages as well (see below). Tests were performed using Webpagetest, Google Chrome, and the Los Angeles server.

1. Implement the Yahoo Developer Network Best Practices

The Yahoo best practices are a comprehensive list of rules to follow. However, not everything was applicable to our situation, especially with the integration of an application like Magento. Here's how we applied each recommendation.

Best Practice: Minimize HTTP Requests

The best practices were to combine multiple files into one, and use CSS sprites.

Combining multiple files

A typical Javascript request looks like this:Using automated minify tools, you can instead request a single file:(Without a minify solution, the above request will not work) Alternatively, you can manually combine files into one. From testing, it appears the manual combination outperforms the minify method. I believe this is because of the additional processing minify must do. In Figure 1.1 (with minify enabled), the time to the first byte is huge compared to Figure 1.2 (manually combined). Figure 1.3 shows the original file. Note that minify automatically gzips the files, but the other tests are non-gzipped. Figure 1.1: Minify Enabled All of the scripts on my-spycam.com minified. In that folder there are no files except one htaccess file. Figure 1.2: Manually Combined All of the scripts combined into one static file on my-spycam.com. Figure 1.3: Original The original CSS/JS scripts on my-spycam.com before being combined or minified. The takeaway: Use a static file with no processing if possible. In this case, we used Magento's built-in optimization tools and caching instead of minify. In order to combine multiple Javascript and CSS files in Magento, select the option to merge files (Admin console, under "developer"). Select "yes" and you're in business. Easy way to combine CSS and Javascript in Magento. Results Before: 1095ms (total among all requests) My-spycam.com's uncombined CSS and Javascript. The total is 1095ms. After: 235ms The combined CSS and Javascript on my-spycam using the Magento method. The total is 235ms. You’ll notice these requests are on the CDN. Even with the additional DNS lookup time, it was significantly faster at 235ms.

Using CSS Sprites to reduce image requests

CSS sprites combine several images into a single one, and individual page elements can display the portion of the larger image they need. This is a general optimization, but difficult and time-consuming because we'd have to merge images with the sprites already in use on the site. In this case, we stayed with the sprites already in use on My-Spycam and did not modify Magento.

Best Practice: Use a Content Delivery Network

We used MaxCDN as our content delivery network. However, the gains weren't automatic -- we had to configure it properly to get the best performance increase. The main lessons:
  1. Use parallel downloads
  2. DNS is a factor
In order to consistently outperform the origin server, we setup parallel downloads using the MaxCDN temporary url (myspycam.myspycamllc.netdna-cdn.com) instead of the DNS-based url (store.my-spycam.com). NetDNA has a faster DNS resolution than My-Spycam, and was able to load faster. Results We saw a 15% speed increase from using the CDN. Globally, this will be much higher as there are many POPs around the world.

Best Practice: Gzip Components

Enabling gzip was the easiest change with the biggest impact: it was just three simple steps. Gzip works by compressing content before transmitting it to the user, leading to a faster page load. Our tests showed a 27% improvement. Step 1. Login to Cpanel Step 2. Find "Optimize Website" Step 2 of enabling Gzip (Compress content) in Cpanel. Step 3. Select "Compress all content" and save. Step 3 of enabling Gzip (Compress content) in Cpanel

Best Practice: Put Javascript at the bottom

While scripts are downloading, browsers won’t start more downloads even if they are on other hostnames. We noticed a tiny benefit from this.

Best Practice: Minify Javascript and CSS

Smaller files take less time to download. We can reduce the size of the JavaScript and CSS by removing whitespace, using shortcuts for variables, and so on.

Minifying Javascript

We minified our Javascript with JSCompress. Upload your file and download a minified version.

Minifying CSS

For the CSS, Minify CSS was used. Again upload the file, set the compression to highest, and download the minimized version.

Overall Results

Here are the overall improvements from the Yahoo Developer Rules being applied to My-spycam. They're ranked from greatest benefit to least benefit, as a percentage of overall improvement. As you can see, Gzipping components was the most helpful. The results of the Yahoo Developer tools that was tested on my-spycam.com ranked in order of percentage improvement.

2. Optimize Magento

After the Yahoo recommendations were applied, it was clear that Magento was holding back performance. The biggest issue was time to first byte: it took over 1250ms to retrieve a page, while a static HTML page could be retrieved in under 160ms. This meant Magento was taking a long time to compile the page before sending it. The solution was to enable caching and avoid unnecessary processing. The other problem was Magento required multiple Javascript and CSS files. The solution was to have Magento combine the files.

Reducing Magento's time to first byte

This change was quite complex, so here's the summarized version of what was done. The aim is to cache what doesn’t change and exclude or ‘hole punch’ the blocks on a page that do change. To hole punch is to "cut a hole" in the cached page for blocks that are dynamic and need to change. An example On the spy camera page, the only component that will change is the number of items in the shopping cart. Everything else remains the same. So, that block needs to be excluded from the cache. To setup caching, Varnish and its Magento plugin were installed and configured. Nginx was installed and tested, however Varnish gave much better results. This Varnish readme on Magentomod is a good read on how to set it up. Dennis from www.magentomod.com was also hired to set this up. To optimize the site, Varnish was installed, and then the Magento plugin. Next, each page’s dynamic parts were identified. Finally, Varnish was setup to exclude those dynamic pages or the pages that shouldn’t be cached. Like the cart page, as each user will have a different looking cart. Results Before: 1162ms The time to first byte before Magento was optimized on the  www.my-spycam.com/all-spy-cameras.html page. After: 151ms This was faster than it was to load a static page! (A static page took ~162ms) The time to first byte after Magento was optimized on the  www.my-spycam.com/all-spy-cameras.html page. Some advice given by Dennis is that scripts like fooman speedster, gmetrix, etc., aren’t as useful as only installing the correct tools even if this means its harder to setup; Magento/Apache/Nginx all have their own optimization tools built in. The right way to do this is to install full-page caching and the hole-punching feature, and you can have a very fast Magento website.

3. Setup Faster Hardware for Server Hosting

Dedicated servers with SSDs are known for being faster, as Servers Australia showed here. In that article it shows how a web server running a Sata3 hard drive will have about 400 inputs/outputs, while one running a SSD will have about 2400 i/o. The same goes for the database: 170 I/O vs. 1350 I/O with a SSD. When running Magento, this is very important since there are so many calls and queries running. The server was setup with a SSD, i7 processor, and 16GB of RAM. Getting a SSD was not cheap, and not all dedicated server providers offer it. However Codero were able to supply and install one when requested. There is no before and after as Magento was installed on this new system from the beginning and it was too time-consuming to test this aspect.

4. Finding alternative ways to include the same plugins

My-spycam uses Wistia and has Facebook and Google plus plugins. The same plugin can be implemented in a way that allows the site to load faster. Wistia seemed to load faster in an iframe. Facebook and Google plugins seemed to load faster when loaded directly. Something interesting was discovered about the social plugins. If you use a service like addthis.com, you are unwittingly dropping ad pixels on your visitors (see load time below). So the alternative was to install the plugins directly with Facebook and Google. Here is the test result of the addthis method versus the direct method. They are generally the same, except you get one extra Javascript file with the AddThis method. With AddThis On a page with just AddThis you get 1.458 seconds load time and 11 advertisement pixels delivered to your visitors. Even though they are post-loaded, this isn't good. 11 Adpixels are given to your customers when you use addthis.com Directly with Facebook and Google With a HTML page with just AddThis, you get 1.364 seconds load time, no ad pixels, and no unnecessary Javascript. You save about 100ms. Wistia Javascript Plugin The average with the JavaScript was 3.4 seconds. Wistia Iframe Plugin: The average for the iframe was 2.5 seconds. For the Wistia video plugin, the iframe version seemed to load quicker when iframed. When testing the average for the iframed version, it was 2.5 seconds and the javascript version was 3.4 seconds. Something to note about the Wistia plugin. When we ran the tests isolated, or on a page with just the Wistia code on it, the Javascript plugin was faster. However, on the real site it was slower.

5. Remove Unnecessary Components

There were leftover embedded scripts and css that were not being used. When removed the speed increased. This wasn’t tested, because everyone’s situation will change.
  • Check for leftover scripts
  • Check for leftover CSS

6. Use an external DNS provider

If users are in the US or China, the website request has to travel all the way back to the server’s location. This means the closer the user is to the server, the faster it will be. So, like the CDN, it's better to have a distributed DNS where the POPs will be closer to the user. There are other benefits of an external DNS, but we’ll leave that out for now. The service used was Dyn's IP anycast DNS. Before: When the DNS was hosted on my-spycam it took 74 seconds to resolve. After: When the DNS was hosted with Dyn.com it took 37 seconds to resolve, which took half as long as it did before. The external DNS nearly halved the time to lookup the website. Even the users that are comparatively close to the my-spycam.com server gained an improvement.

The Results

The page load time was reduced to under 2.1 seconds, an improvement over 50%. For a category page heavy with images, this was a dramatic increase. Before: 3.5 to 5.5 seconds (depending on time of day) The Webpagetest results for my-spycam's spy camera page before the optimization After: 1.5 to 2.5 seconds (depending on time of day) The Webpagetest results for my-spycam's spy camera page after the optimization Improvements to other pages: The home page: ( http://www.my-spycam.com ) The Webpagetest results for my-spycam's homepage after the optimization The product page: ( http://www.my-spycam.com/homeguard-sd-rca-clock-radio.html ) The Webpagetest results for my-spycam's product page after the optimization

Summary

You can see from the benefit graph that the top five changes were:
  1. Gzipping Components (compression)
  2. Optimizing Images
  3. Using a content delivery network (CDN)
  4. Minifying your JavaScript and CSS
  5. Minimize the amount of HTTP requests
We are sure that there are more ways My-spycam.com’s web performance could be improved. We’d love to hear your suggestions in the comment sections below. magento-ad-maxcdn Special thanks  
  • http://blog.justindorfman.com jdorfman

    Great job Kris, it was a pleasure working with you on this. =)

  • Kris

    Thank you Justin! I couldn’t have done it without you or Dennis!

  • Peter@SAU

    Nice blog post!

  • http://artonweb.gr/ Κατασκευή ιστοσελίδων

    Page loading time is obviously an important part of any website’s user
    experience. And many times we’ll let it slide to accommodate better
    aesthetic design, new nifty functionality or to add more content to web
    pages. Unfortunately, website visitors tend to care more about speed
    than all the bells and whistles we want to add to our websites. Finally page loading time is becoming a more important factor when
    it comes to search engine rankings.

    • http://blog.justindorfman.com jdorfman
      • Kris

        Yep coming into the Christmas season people are going to be busy and might even be using their mobiles. So having a slow website may frustrate these users. So speed isn’t about SEO as Justin said, its about making the customers happy so they buy! As Amazong and maybe my-spycam.com will find out :)

      • http://twitter.com/NilsBoeEriksen Nils Boe Eriksen

        I lack to understand why you compare with Amazon.com i mean, Amazon is one of the internets largests commerce sites. -and they have somewhat been here for a decade or two.
        Performance is crucial, and is important. – But we need to find another reference besides Amazon. :-)
        Personally i aim at getting pageload on our MAgento Hosted stores below 0.5 seconds. We are below 0.7 Seconds for production sites currently.

        Running larger Magento Clusters with >900 concurrent users

        • http://blog.justindorfman.com jdorfman

          @twitter-259235180:disqus I don’t think I was comparing anything to Amazon, just pointing out their findings. I (and I am sure everyone reading this) would love to know how you are achieving less than .5 second page loads on a eCommerce site. Any way you can you prove it?

        • Guest

          Nils,

          • http://twitter.com/websitesaleslab Website Sales Lab

            Nils, that was me.. What I wanted to ask was, do you currently have magento sites loading faster than 0.7seconds? If so could you follow me on twitter and DM me? I’ve followed you already :)

  • http://www.facebook.com/chris.fowler.1806 Chris Fowler

    epic thread

  • Webs Resolution

    Nice post. Today, page load time is the main factor of increasing the page rank and it is crucial to design and develop the website which takes less time for loading and this is nice tips to improve the loading speed.

  • Eddie

    This report would be much more useful if the only diff between scenario A and scenario B was the use of CDN. Because there are plenty of (more complete) Magento optimization guides out there.

    I am using MAXCDN on a 300kb page in a server that scores 89 on Pingdom (based on Y! guidelines) and I still get 4+ seconds.

  • http://blog.justindorfman.com jdorfman

    @c404abb3f485d4cd93f990f1326b7c01:disqus are you setting cache-control headers? If you are a MaxCDN customer we can set them for you, just email support. Thanks

  • David

    Thanks for the great post. I tried combining JS and CSS files using the Magento config developer settings. It rendered my site unreadable, due to not “seeing” the files. I eventually found the flush JS URL by viewing page source in the Magento admin, and that fixed the problem. For that day… Today, I go to my site – it’s “broken” again. Again, I flush the JS / CSS cache by finding the URL manually, but this time, I decided to change the JS and CSS combine back to “no” in admin. Did you run into this problem? I don’t want to “hack in” a cron entry to clear the cache every hour. How can I make sure that setting JS and CSS combine to “yes” will result in a stable site in the long haul?

  • Veronicx

    If you have a lot of extensions installed, than you need to tweak a lot more.
    Have a look at below website, that loads fast and has many features.
    http://www.onlinecamerashop.nl

  • Robert Zomi

    Magento is a great platform especially in relation to being search-engine friendly. But this does not mean you should no’t put in the hard work either. By following these six techniques you will increase your website’s visibility substantially.
    http://www.sboeconnect.com/

  • http://d-jb.co.uk/ DJB

    Thanks to MaxCDN we have just achieved a page speed score of 100/100 and a page load time average of 850ms using magento on

    http://www.myrepaircentre.com/

    Here is the proof
    http://tools.pingdom.com/fpt/#!/bL2vBL/www.myrepaircentre.com/

    Thanks MaxCDN

Increase Your Website Speed

If You Use Under 15TB/month MaxCDN is for You. It Has:

  • High Performance
  • Easy to Use Control Panel
  • Easy to Setup
  • Low Monthly Fee
LEARN MORE

Recent Posts

Compare the speed of two websites in 5 seconds.

100% Free

Start Testing
TRUSTED BY