How To Achieve a 2 Second Page Load with a Magento eCommerce Store
November 27, 2012
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
- Decrease the amount of data downloaded
- Reduce the time spent waiting to receive data
- Increase the download speed
- Implement the Yahoo Developer Network best practices
- Optimize Magento
- Setup faster hardware for server hosting
- Find alternative ways to include the same plugins
- Remove unnecessary components
- 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
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.
Before: 1095ms (total among all requests)
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
- 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.
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.
While scripts are downloading, browsers won’t start more downloads even if they are on other hostnames. We noticed a tiny benefit from this.
For the CSS, Minify CSS was used. Again upload the file, set the compression to highest, and download the minimized version.
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.
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.
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.
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).
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
Wistia Iframe Plugin:
Something to note about the Wistia plugin.
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.
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 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 )
You can see from the benefit graph that the top five changes were:
- Gzipping Components (compression)
- Optimizing Images
- Using a content delivery network (CDN)
- 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.
- 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.