MaxCDN Blog

Where people come to deliver content better

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:

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.

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
In that folder there are no files except one htaccess file.

Figure 1.2: Manually Combined

Figure 1.3: Original
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.

Results
Before:1095ms (total among all requests)
After: 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:

Use parallel downloads

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 CpanelStep 2. Find “Optimize Website”

Step 3. Select “Compress all content” and save.

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

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.

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 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: 1162msAfter: 151ms
This was faster than it was to load a static page! (A static page took ~162ms)
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.

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:After:
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)After: 1.5 to 2.5 seconds (depending on time of day)

Kris KayyalKris Kayyal is the Marketing Manager at MaxCDN. He loves traveling and seeing the world. When he wants to go fast, he powers up Spotify and hits the gym.

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.

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

I agree that increased net traffic during holidays can spell disaster but if the retailers choose a highly scalable platform like StoreHippo then all their problems will be put to rest. StoreHippo is a e-commerce platform which creates flexible, customizable and blazing fast stores with user friendly features.For more info visit http://www.storehippo.com

Apachebooster

Try installing Apachebooster, the web accelerator which enhances the cache and thereby loads the site much faster than before.

lydiashahh

Thanks for sharing an useful info. For any Magneto queries you can reach [Magento Experts]