How To Achieve a 2 Second Page Load with a Magento eCommerce Store
November 27th, 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 timeOverall strategy:
- 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
1. Implement the Yahoo Developer Network Best PracticesThe 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 RequestsThe best practices were to combine multiple files into one, and use CSS sprites.
Using CSS Sprites to reduce image requestsCSS 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 NetworkWe 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
Best Practice: Gzip ComponentsEnabling 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.
Minifying CSSFor the CSS, Minify CSS was used. Again upload the file, set the compression to highest, and download the minimized version.
Overall ResultsHere 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.
Reducing Magento's time to first byteThis 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 HostingDedicated 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.
5. Remove Unnecessary ComponentsThere 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 providerIf 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 ResultsThe 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 )
SummaryYou 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