Speed Optimization for every website

Is your website too slow? Learn how to make your site blazing fast with interactive, step-by-step help.


The need for speed

Thank you for wanting to make your website more efficient. An increase in performance not only makes your users happier, but it has been proven to increase sales/actions. On top of that, you're being green by saving bandwidth throughout the internet and power on devices browsing it. Win-win!

The lifecycle of a page load

Before we can optimize our site, we have to understand how it loads. From there we can identify bottlenecks and work on speeding those up to lower our overall load time.

The best way to illustrate how your page loads is with a waterfall chart. These can be seen by running tests on your site through tools like WebPageTest.org, or simply using the 'developer tools' feature of your browser. Not only do they time the page load for you, but they'll break down every element that gets loaded so you can easily identify what's making your site slow.

Let's take a quick look at a waterfall generated by loading Amazon.com's home page in developer tools on Chrome:

According to this chart, it took about 2 seconds to load 74 resources. That's pretty good (we'd hope Amazon's home page is optimized). Each resource's load time is divided up into several stages, such as DNS lookup, initial connection, time to first byte, and content download. By looking at each of these resources (and which stages for each), we can figure out what we need to optimize.

Here's the same page ran through WebPageTest's tool. Looks pretty similar, huh? Both of these tools have slight differences which make them more convenient in certain situations, but overall they should show about the same results.

What's neat about WebPageTest is results are saved so you can link to them if you want to share a result with someone else on your team. Here's a live view of the result above.

Spend some time getting to know the waterfall chart - it will become your best friend when diagnosing performance issues. Run a few tests of your own right now. Compare a fast site with a slow site to see patterns on what makes things fast (hint: less resources, CDNs, and minimized resources, to name a few). Here's a more detailed walkthrough on Chrome's Dev Tools, and using WebPageTest, whichever you prefer.

Identifying the most efficient optimization

There are many ways to speed up your site, and they can grouped into three categories: Back-End Optimization, Front-End Optimization, and Network Optimization.

Most web developers will first focus on speeding up the back-end (ie, code ran on the server), although that's usually not the best approach. Take a look at our waterfall chart example again:

The very first request is getting the html document from the server, ie the back-end. Notice how it's only 271ms of the entire page load of 2.02s. That's only about 10%!

In this example, if you speed up the backend by a factor of 2 you only bring your page load down ~5% to 1.88s, yet if you speed up the front-end (and it's associated network) you cut it down ~40% to 1.15s - that's way more effective!

Also keep in mind that optimizing the back-end is harder to do than the front-end. Optimizing server-side code and databases usually requires changing way more than moving a few things around in the HTML.

That being said, everyone's site is different. There are many best practices out there about shrinking your images, minimizing javascript, and tweaking settings on your server, but some of those tips will have minimal effect on your site based on your setup. For example, on some site enabling a backend cache (like varnish) can cut your page load time in half, but for others your backend server may be fast enough that it makes no difference. It's best to analyze your site to identify where your bottlenecks are.

Back-End Optimization

I hope I've convinced you not to focus on back-end performance first. Yet sometimes your first request is so slow you risk your users abandoning the site before even seeing anything.

Here are a few tips to increase your back-end performance:

Front-End Optimization

Considering that most of the load time is spent requesting resources, you'll probably get the biggest bang for your buck here.

Yahoo has a comprehensive guide with 35 best practices for front-end performance.

Web performance guru Steve Souders (formerly of Yahoo) has a couple great books that dive into these issues further. Check them out on Amazon: High Performance Web Sites, and Even Faster Web Sites

Steve's tool Cuzillion demonstrates the effects of arranging your css, js, and other resources in specific order, showing how some types of elements blocks others from being loaded.

Network Optimization

Every single resource on your page has to be transmitted over the wire (or air) to the user through the network. Since this can happen hundreds of times per page load, small improvements here will have a great effect overall.

Perception Optimization

I'm adding a 4th category of optimization, perception, although it's not going to affect the load time of your site. It will affect how fast your users perceive your site to be - which is just as important.

Screens are almost always smaller than the entire website being rendered. When this web page first loaded, you only saw the top 10% of it within your screen, while the rest below it was still being downloaded. This is the concept of the website fold. Try and optimize as much as you can above the fold, which will give the user the impression that the website is done loading even though part out of view are still being processed.

Another set of techniques involves using quickly-loading placeholders until the real, slower-loading content is generated (and then swap it out once it's ready). These placeholder can be as simple as colored boxes, or as realistic-looking as animated gifs, but either way it will make the user feel like the page has loaded quicker than it really has. The bare minumum of this technique is assigning heights and widths on your elements so the page doesn't have to be redrawn/reflowed as content is gathered. This great article shows impressive examples.

Implementing any of these tricks is not going to lower the technical page load time, but you can consider a metric called the Speed Index. In short, it measures when the page is mostly done visually changing. This is done by taking screenshots at increments and comparing them to the final loaded state. For example, the whole web page may take 5 seconds to load, but if at 3 seconds it doesn't change much aesthetically (perhaps it's just loading some javascript for the last 2 seconds), then the speed index is 3000 (the metric is unitless since it's not actually measuring time, but you can think of it as 3000ms)

You can measure the speed index of any site through WebPageTest as long as the 'capture video' option is selected. Learn more about the speed index.

Fixing and monitoring your optimizations

One thing you've probably noticed as you're testing your website is that performance can vary quite a bit between tests. One day may seem fine, while another super slow. From the US may be lightning fast, while from Europe it's barely crawling. Desktop is rapid, but from mobile it's 1990 all over again. Sometimes multiple waterfall tests in a row will even provide drastically different results. It's important to keep measuring your website examining all these variances.

Consider using a tool that runs these tests at specific intervals from differing environments and keeps track of the results so you can see trends. You may find that attempting to optimize your database was a bad move, while switching to a CDN was one that has proven increases. MachMetrics is a pretty useful tool that automates this process.

What's next?

Thanks for taking an interest in improving your site's performance, and thus the internet as a whole. Be sure to check out the interactive demo as well as some helpful tools.


Feedback? Contact me: shane at httpfast dot com