Introduction
What is Speed Testing?
Speed Testing is simply the title for this tutorial that walks you through some more reliable ways (other than counting "One-one-thousand, Two-one-thousand...") to test the speed of your site's pages.
Every site is built differently, so it would be impossible to cover every situation in this tutorial, but this guide should give you enough information to see how our performance products will perform (Or are performing) on your site and what other tools and methodologies you might use to further speed things up.
As always, there may be differing opinions on how best to run these tests and may even be better ways to go about it. If you’ve found something better drop us a line.
It's about Magento, But Not.
It's also important to note that this test should pretty accurately highlight one of the most common slow-downs in Magento--how long it actually takes the server to respond to a request. For many default installations, this is all the stands between taking a seriously slow anti-conversion site and speed it up to the pace where many think Magento should be in the first place. However, this toolset can be used on any site.
How it Works
To do "Speed Testing" we'll be using a web utility known as Firebug that is an add-on to the popular web browser Firefox. This little utility will allow us to see the sub-sections of how a page loads. Everything from the initial request from your browser to how long it takes to download that pesky logo that you really didn't want, but a major investor loved. This level of detail let's us see what is taking the most time to load.
The Tools
Pre-requisites
- Firefox - http://www.mozilla.com/
- Firebug - http://getfirebug.com/
The "Right" Setup
Now that Firefox and Firebug are installed, we need to change a few display options so you can really see what's happening when a page loads:
- Open up Firefox and browse to the site you'd like to test.
-
Look down at the bottom right corner of the Firefox window. You should see a small icon that looks like a bug colored gray.
-
If you click on it once, the Firebug panel should load and appear from the bottom of the window.
-
Next, you'll need to switch-to and enable the "Net" tab (I'd also recommend that you check "Disable Browser Cache". This way you'll only see how fast your pages will load for a person visiting them for the first time--without the browser caching images or other static content to make things go faster).
-
Next you'll need to activate a view to best see the performance of your pages. The first view I'd suggest is "HTML".
HTML view will help you see whether you need to enable caching of some sort (like Default Magento, Lightspeed, or other).
The Actual Testing
Since you're all setup, let's go ahead and test. Refresh the page that you're currently on, or browse to it if you're not already there. This should reload the performance tools and you should start seeing some things happen.
Overall Page Performance
Whether you knew it or not, we've set up your Firebug net tab to display the overall performance of your page. This is measured in two ways; number of requests and the composition of each request.
Number of Lines (Requests)
Depending on how many major requests (or lines in Firebug) you have on the page, you may have one or many lines in your net tab. Typically, for a basic page, you only have one, but if you have external JS/AJAX/Image requests, there could be more lines. You might have a good reason for having more than 1-2, but in our experience, the fewer the better.
1-2 lines is pretty dang efficient:
www.tinybrick.com
google.com
5 or more probably means you could do more to combine requests and improve efficiency:
microsoft.com
congress.org
404?
It's also worth noting that if you have any red lines with a "404 Not found" message in it, that you're wasting time on your page load. While you aren't loading anything with those requests (as you might expect with a message including the words "not found"), it does take that much more time to attempt to request that item.
Request Composition
Each request has several components. Depending on a variety of factors, one may become more important to make efficient your overall page load more efficient. It's all about which part of the request is taking the longest. You can see each of these components by mousing over each request line in the Firebug panel.
For this generalized test we're going to focus on "waiting", "server/page response" time. We could write a whole doc for each of the components and ways to help improve efficiency, but we'll leave that for another time. The waiting time is simply the time it takes the server to respond and start sending back data. In the case of Magento, this is how long it takes magento to run through all it's classes and interact with the database and start returning a page.
A typical Magento community edition installation (with the default caching turned on and using hardware that meet or exceed minimums), will still clock a waiting time anywhere between 1 and 4 seconds depending on which page you're loading. Typically, the sites closer to 1 second have substantial server hardware (more than 1GB memory on a dedicated server). While 1 second for an entire page to load may be quite good, response time on most fast sites is typically very low (measured in milliseconds not in seconds). That's because the response or wait time is only a small part of the whole process.
If you find your wait or waiting time is in seconds, like this one - 1.02+ seconds (very typical of default magento, even on a really nice server):
Rather than this one - 118 ms ~ 1/10 second (Lightspeed or other whole-page caching installed):
It probably means that there is room for improvement on how your server handles requests.
Images, Flash, And CSS--Oh My!
An integral part of any web page is the visual content from images, flash, and CSS design. Luckily, with Firebug, we don't have to only focus on the major request(s) of the page. We can zero in on specific parts of the page to see what parts are taking the most time.
Remember the top bar of the Firebug panel?
Well, you don't have to use the "HTML" button at the top. Try clicking on "All". That'll give you a view of every single object loaded on the page and how long it took to load it. Try the others, they have tendency to turn everyday users into page composition experts.
Tools & Tips To Speed Things Up
Now there really is no silver bullet to speed things up on a website. Especially a feature-rich e-commerce framework like Magento. However, there are several tools and tips that are especially helpful. They aren't comprehensive, but should help any developer find some good places to start. While they may require some work/research to leverage, they can put you ahead of the competition and many are free.
Tools
Page Speed - Page Speed is a tool developed by Google that analyzes pages and produces a report with suggestions on. It's results differ slightly from Yslow (but the same thing happens when you search at yahoo.com vs google.com)
Yslow - Yslow is a tool developed by Yahoo that analyzes pages and produces a letter grade based upon page HTML/CSS/JS structure, content sources, etc... It's a valuable tool that can help you determine where you stand compared to the competition in how efficient your pages render.
Lightspeed - Lightspeed is a for-paid Magento module that allows you to cache entire pages in an even more advanced fashion than Magento Enterprise Edition. Plus, it comes at a much more affordable price. ($13K/annually per server vs. $500 once per domain - unlimited servers)
Minify - Minify is a PHP5 app that helps you follow several of Yahoo!'s Rules for High Performance Web Sites (Compression of CSS/JS being an important one).
Tips
There are a plethora performance tips out there. I'd like to suggest a only a few. While it definitely doesn't cover everything, I've seen the following help the most (especially with regard to magento):
Front-end
- For Magento, ensure you meet minimum server requirements - Believe it or not, hosting providers out there actually let you (and even help in some cases) install magento on servers that can't really handle it. Refer to the official specs, but most importantly, make sure your magento installation has access to 512MB whether you're on a dedicated server or a shared instance. Technically, it can run on less, but it's not recommended.
- Combine CSS/JS - While it is easier to put every single style or JS class into a separate individual file. Each request your page makes for every file, takes time. The closer you can get to a single CSS or JS file, the better. I know it's a pain, but after ensuring you have the hardware to run magento, it's the one of the biggest performance changes you can make on the front-end.
- Image Sprites - I'll let you google this one, but in short it combines several images into one larger image. This can be useful for smaller skin images used across your site. There are some situations where you might have to watch the image's size, but in general it's still better to call one larger image than dozens of small ones. Also, this only applies to non-catalog/non-product images.
- Compress JS/CSS - This is where minify can come in handy. It compresses (removes whitespace and other repeated characters) to make CSS/JS files smaller (thus quicker).
Back-end (Magento only)
- Use block-level caching (free) - Block-level caching comes with Magento for free. Caching common blocks can greatly improve performance (Magento's official guide here).
- Use a caching product (cost varies) - Whose product do you think we'll recommend? However, if you find one better and cheaper, let me know. I'd love to talk it over and compare.