Before you can get to work optimizing the speed of your site, you’ll need some hard data. This data will measure how much bandwidth your site is taking up, and it will tell you how fast your site is loading.
Taking these measurements will serve three purposes. First, they will allow you to see how much your site can benefit from optimization. Second, they will allow you to do real-time testing, so that you can see the benefits as you implement various solutions. And third, after you finish going through this book, you will be able to look back and see how much faster, and how much more user-friendly, you’ve made your site.
There are a number of free, easy-to-use tools on the internet that give you quite detailed measurements about how your site is performing. I like to use a variety of different tools, because each has their own unique strengths and weaknesses.
Like you’d get a second opinion on a medical ailment, one program might catch a problem that another one missed.
To this end, I’ve included a number of different utilities. Some are simple web page tests, and some are more involved browser add-ons. Some are more quantitative, while others are more qualitative. Give them all a try; see which ones suit your personal style, and which ones suit your site.
Just be sure that you keep track of your results before and after so you can accurately gauge the effectiveness of each improvement.
The best way to do this is in a spreadsheet. I use Google docs to keep track of my various sites speeds since it’s free, easy to use, tied to my gmail/analytics account and easily accessible from anywhere.
Here is an example of how a spreadsheet looks on Google Docs.
Feel free to download that one or if you use Google Docs you can select “file” then “make a copy” to place a copy of it in your own G-Docs account.
A simple .txt file on your computer in notepad will work too. Heck, you can even just go all old fashioned 1800’s style and use a pen and paper if you want. It really doesn’t matter how you do it, the important thing here is just that you have a way to track your progress.
Google Analytics Page Speed
If you use Google analytics on your site you can use the built in Google site speed features. Since the site speed options in Google Analytics are fairly new, a lot of people haven’t heard of it or are aware it’s even in there. When inside your analytics account you can click on “content” and then “site speed” to access your stats.
Google Page Speed Online
First we’re going to look at Google Page Speed Online. Just head over to the
website, put in your URL, and get started.
This simple yet powerful tool from Google will instantly evaluate the performance of your site with a numerical value. More importantly, it will suggest adjustments that you can make to your site, and prioritize them for you based on how much each one will increase your site performance.
For example, running Page Speed Online on a clean WordPress site, I received a handful of medium and low-priority suggestions. So, as you can see, my highest priority changes for this site should be to enable compression and to leverage browser caching.
Google Page Speed also has a selection to provide a report for your site as if it were accessed by a mobile web browser.
All in all, Google Page Speed Online is a solidly useful tool. It is quick to get set up, easy to use, very detailed. Perhaps the largest downside is that you have to head over to its website every time you want to check your page speed.
Web Page Test
Web Page Test is another comprehensive and free online performance test. Like Google Page Speed Online, it will provide you with a report detailing your site performance.
Much like Google Page Speed online, just enter your URL. However, you can also select location, web browser, and connection speed.
Web Page Test is very easy to use, but the results are more quantitative than Google Page Speed Online. This can be a good thing or a bad thing, depending on the person reading the results. So I recommend trying both, and seeing which suits you better.
On the front page, Web Page Test will give you scores in six categories. First byte time is the time it takes for the first byte to load. Keep-alive enabled is referring to whether your site is using persistent connections. Compress text and compress images looks at how well your text and images have been optimized for the web.
Cache static content asks if you have a caching system enabled. And lastly, CDN detected will check to see whether you are using a Content Delivery Network.
One part of this site that I really like is the Waterfall View, which will tell you the load time of different aspects of your site. So you can specifically identify which parts are loading quickly, and which parts are slowing you down.
To get started, you’ll need to download Firebug here.
Just click install, then select your version (I’m using 1.10.4 with Firefox 15). If the installation box does not come up when you select your desired version, Firefox may be blocking the site from asking you if you want to install. If that is the case, simply de-select this option.
Then it’s as simple as installing the add-on and following the on-screen directions.
You’ll be asked to restart Firefox to enable to add-on. Once you do, you’ll notice the firebug icon added to the top right-hand corner of
Firebug with Google Page Speed
Google Page Speed is an add-on for Firefox and/or Chrome, and the counterpart to Google Page Speed Online. While a bit harder to use, it is a much more powerful solution, and is more convenient once you get it up and running.
To get started, download the Firefox add-on here. If you’re using Chrome, follow the instructions and download here.
After you download the add-on, you’ll be asked to restart Firefox. Once Firefox is up and running again, click the Firebug icon to open the Firebug window. Firebug will open a page with the place where you can edit code, use Google Page Speed, or use YSlow (more on that later).
To run a speed test, first allow the site that you’re on to load completely. Then select the Page Speed tab in Firebug, and select Analyze performance.
Alternatively, you can select Page Speed Automatically Run at Onload in order to perform an automatic test every time you visit a page.
When you run the test, you will notice some similarities to Google Page Speed Online.
There are two major differences. The first is that for each recommendation it makes, Page Speed will link you to a Google Labs page explaining what the recommendation means, and what you can do to improve your score on that section.
The other major difference is that you will not need to leave your site to test the page speed. Once you have the add-on up and running, you’ll just have to click ‘Analyze Performance’ when you want to see how your site is doing. This makes it much more appropriate for testing changes on-the-fly.
Firebug with YSlow
YSlow is another Firefox extension, and as close as exists to an industry standard for webpage speed optimization testing. Download it here to get started.
The process for getting it set up is identical to the Google Page Speed process.
Then, for any site which you’re on, you can click the YSlow icon in the bottom left to run a page speed test.
After several seconds, YSlow will present you with a report about the loading time of your site. It will give you a grade (A-F), and a numerical score (1-100), as well a comprehensive breakdown of how it came to that score, and what you can do to improve the page’s grade in each section.
As I mentioned earlier, YSlow serves as something of an industry standard for page speed optimization. Moreover, I found it to be the most informative and intuitive page speed testing software available. As such, we’ll be grading many of the page speed improvements featured in this book on YSlow score improvements.
Next we’ll look at a stress test, to determine how well your site can handle a surge in traffic.
Load Impact will run a stress test for you, and put it in a very intuitive, easy to use, and easy to interpret package.
During the test, which takes about 15 minutes, Load Impact will basically increase the number of simulated clients accessing your site, and display information about site performance as a function of this number.
In the screenshot below, you can see that I’ve chosen to display user load time (blue) and requests/second (orange) as a function of active clients (green).
However, you can also represent a handful of other statistic, such as bandwidth usage or failure rate.
You’ll have to register to use Load Impact. When you register, they’ll give you 10 free credits for their site. A fifty-user test (pictured) takes two credits, so you can run five. If you want to run a larger test, it will cost more credits. If you use up all your credits, which shouldn’t happen for our purposes, then I suppose you’ll have to start paying for them.
Which Loads Faster?
The last tool I’d like to introduce is a bit of a fun novelty, but one which also has some practical purposes. Which Loads Faster? Allows you to compare two sites directly, head-to-head, and determine which one is faster. You just plug in two URLs and go.
The upshot of this is that, aside from getting a nice, numeric score of how long your site takes to load, you can also run it head-to-head against your competitor’s site to make sure that yours is running faster.
Please note though, to run each test several times. Results can vary quite a bit from one test to the next, and the site will provide a running average as you go.
As you can see, Microsoft’s Bing.com homepage loaded 5.7 times faster than my WordPress site (not-yet-optimized).
Now let’s see if we can improve that score a bit.
As you can see, there are a number of powerful resources out there for testing the speed of your website. Play around with them. Web site speed optimization can be a fickle science. Different tools will give you different scores, and the same tools will give you different scores on different days.
So play around with the tools listed here, and see ones work for you, and which ones work for your site. Even once you get an excellent YSlow score, Page Speed Online may still have some suggestions for your site. The only way to know is by experience.
Another thing I’d like to point out before moving on is that there is really no way you’ll get perfect scores on any of these. No matter how much you optimize you’re not going to be able get all A’s and 100’s. These tests are just to give you an idea of where you’re at and what can be improved.
In my next blog post I will take you behind the scene into WordPress, Hosting Types, Optimizal WordPress Settings, WordPress Plugins & more.