How To: Speed Up Your Website With WebPageTest
Step One: Using WebPageTestBefore 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
Step Three: Interpreting the ResultsAfter 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.
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 600x600 image for a blog post that you will scale down to 100x100 is not optimal... at all. Instead, save a 600x600 image and a 100x100 image so you can link the 100x100 image to the 600x600 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!