When you are wanting to increase the speed of your website, there are plenty of different areas to look at. It could be that your server’s internet connection is slow, your website is taking too long to process on the server, too many unoptimized files, or even some JavaScript could be hanging the site from loading correctly. Whether the case, WebPageTest will help speed up your website to its full potential.

Before we get far into this guide, whether it is certain that MaxCDN will speed up your website, other things can slow down your website as well. Likewise, having services like WebPageTest help quite a bit.

Step One: Using WebPageTest

Before you can figure out how to speed up your website, you first need to give WebPageTest the information it needs.

Different Tests: WebPageTest is one impressive service with all of their offered tests. They offer a very in-depth review of a website, comparing websites, and a fairly unique mobile testing feature which seems to powered by an external service. We’ll be focusing on the in-depth review of a website in this guide.

The Basics: You’ll see all the basic items at the very top of the interface. Here, you can enter what website you want to have the page test on, choosing from twenty-four locations to run your test from (we’d recommend for you to use Dulles, VA USA as it supports many options), and of course, what browser you wish to test your website on.

Advanced Settings: Despite all of their different tests, they’ve gone the next level with plenty of advanced options that’ll blow any other website speed test out of the water. With all of fourteen different settings you may set, let’s cover some of the major ones:

• Changing the downstream connection (and yes, FiOS is in there!)
• Altering the number of tests to run
• Getting the tcpdump (this if for all you tech-savvy people!)
• And even entering HTTP basic authentication details

With all of these different features, using these tests will provide you with very accurate results on how to speed up your website.

Step Two: Setting Up a Test

In this test we’ll be using MaxCDN’s brand new website as an example.

We’re going to be testing MaxCDN’s website using the latest and greatest Internet Explorer 9. As IE9 has some very new technologies in it (as IE7 is nearly five years old). We could also use Google Chrome for this test, but as it’s in an experimental stage currently with WebPageTest, we’d recommend not to use it just yet.

But please keep in mind that as Google Chrome has the powerful V8 JavaScript engine, you may see your webpages loading faster than in other browsers.

As for the internet connection speed, try to hold off on selecting the FiOS option. Even though it may be lightning fast, it’s not your target audience most of the time; please stick with DSL as it is very popular in the common household.

Step Three: Interpreting the Results

After WebPageTest gathers all of its data about your website, which will take around thirty seconds, you’ll be greeted with an excellent overview of the data from the performance test.

We’ll cover both the summary page and the page speed sections of the performance test. As there are five other pages, they are helpful, but they simply give you more information that can be handy to some.

Summary Page:

Right after your test is complete, you will be greeted with a nicely formatted summary page. At the very top, you’ll see a table with two columns, first view and repeat view. This might sound somewhat confusing, but simply, first view is everything that is loaded with no scripts altering the DOM structure (the HTML) and repeat view is, you guessed it, with the scripts only.

As you can see in this test, it took about 6.928 seconds to load the main file and 2.804 seconds to run the scripts. As most JavaScript is technically hidden to the user (by having the scripts use asynchronous JavaScript for their communications), you shouldn’t worry about it all too much. As long as it’s under about three seconds, you should be just fine.

Next up, you can see how long it took to download every file on your website, including the files that your JavaScript files are downloading. Looking at the waterfall, you can clearly see how long it took to initiate a DNS lookup, connection, how long the file took to download, and along with other information. Keep in mind that you have the most control over the “content download” section; as this is something you can optimize.

The optimization checklist is handy, but on the flip side, we’ll cover page speed section of the performance test soon, which will tell you quite a bit in a nice and orderly way.

And if you’d prefer some nice visuals, you can see two pie charts show how many requests of every file type your website needed along with how many bytes every file type had.

Page Speed:

The most important section of them all, the page speed section of this performance test will be of the most help no matter what type of website you have.

To the left (click on the image for a better view) you can see a list of recommended optimizations with some sections expanded for more detail. As you can see, WebPageTest provides you exactly with the information needed to make these changes. For some added features, it can even inform you on how much you could save by optimizing your files.

As some of these optimizations are possible, let’s give you our list of handy things you should do to make sure your website loads fast:

• First and foremost, if you are not using a CDN, take a look at MaxCDN. We offer an affordable and easy to use CDN solution to make sure your website runs to its full potential.
• Don’t abuse images, period. Images take a long time to load on slow connections and any website owner needs to accept that. But luckily, there are some ways to make sure images load quickly, even on limited connections.
  • By using the save for web feature in Photoshop, you can optimize your images a ton. If you are needing a high quality transparent image or a picture with many colors and gradients, save it as a PNG-24. Anything else that is somewhat “simple”, save it as a PNG-8 or even a GIF. Even though many recommend JPEGs on the web, they degrade quality more than anything else.
  • When using many images, especially small ones, try to create an image map (sometimes refereed to as a sprite map), which is essentially many images in one nice image file. This will be a faster download, but may be harder to manage as you need to set the bounds of where each image is in your CSS file. But now being in the 21st century, we have plenty of tools to help us with that!
  • When designing, design for speed. Let’s not get too complicated here, but when creating your website design, try to take download speed in mind. Saving a 600×600 image for a blog post that you will scale down to 100×100 is not optimal… at all. Instead, save a 600×600 image and a 100×100 image so you can link the 100×100 image to the 600×600 image if users want a larger view. Keep in mind that WordPress can resize images for you and take this process to just checking a simple box. Even though it will take up more disk space on your server, it is very much worth it to the user.
• Take a good use of GZIP! GZIP will essentially compress your files (no matter what it is! HTML, CSS, PNG, will all be compressed. If you’re using MaxCDN, you can enable GZIP under the settings tab of your zone. But remember, if you’re trying to compress an already compressed file, like a JPEG, it can get larger in some cases.
• When writing CSS, use some kind of CSS optimizer to compress your CSS. It will not be easily readable, but it will be much smaller in filesize. For an online CSS optimizer, take a look at Code Beautifier.
• If you’re running WordPress, take a look at W3 Total Cache plugin. Not only does it fully support MaxCDN, it also has functionality to optimize nearly everything on your website.
• If you’re a geeky one who likes getting their hands messy in the Linux terminal, take a look at APC or Memcached for caching PHP files. This will speed up any dynamic PHP file so much that you won’t believe it!

Hopefully this guide has helped you speed up your website! If you have any questions or remarks on what MaxCDN can do to speed up your website, or anything in this guide, we’d love to hear them!