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

After: 2.1s load time

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

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:

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

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.

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

After: 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)

Improvements to other pages:

The home page: ( http://www.my-spycam.com )

The product page: ( http://www.my-spycam.com/homeguard-sd-rca-clock-radio.html )

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.

Special thanks

• Thank you to Dennis from Magentomod.com.
• Thank you to Justin Dorfman for your help with setting up the CDN correctly, and more!
• Thank you to my-spycam.com for sharing these results.

 

• Tweet