What’s the difference between fast websites and slow ones?

Is there one correct answer?

No, unfortunately there isn’t. That’s because websites have many different pieces and each of those pieces have the potential to slow things down. So instead of just giving you a list of things you need to do, this post is going to explain how certain pieces slow things down, and what you can do about it.

Like this great proverb says:

Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime

Instead of just telling you to add an “async” tag to your scripts, or to lay out your pages in a specific order, I’m going to explain why those changes make a difference. That way, you can play around with your apps and see what works for you.

These tips, by the way, come from a fantastic conversation I had with Ilya Grigorik.

Who is Ilya Grigorik? He’s the co-chair of the W3C Web Performance Working Group, and a Google web performance engineer. Yeah, he knows a thing or two about performance.

“One thing everyone should do to speed up page loads”

Like I just mentioned, there is no such thing. The web is a bit more complicated than that. Plus, reducing the speed at which your pages load may not be the right metric for you to focus on! (We’ll get to this in a moment)

However, there are a few things which are really important and usually make a noticeable difference. You may have seen these mentioned before, but you may not understand why they are important.

Compression

Delivering HTML, CSS, and JavaScript with gzip compression reduces the number of bytes that have to travel across the wire. This can significantly reduce the time it takes to download assets. Since the browser needs HTML and CSS to render a page, we want these resources downloaded as fast as possible.

2. Optimizing images

I was recently chatting with a friend who develops WordPress websites for clients who often upload a lot of images. One problem he has is that those clients just take an image from their camera and upload it directly to their website.

Images from mobile phones can be well over 1 MB. Even if you re-size with CSS, you’re still loading a very heavy image across the wire. Users on slower networks are going to sit there a while.

Thankfully, there are ways to fix this. This episode from my show is all about optimizing images. I highly recommend you check it out if you haven’t already.

3. Don’t transfer what you don’t need

Look at scripts and CSS files on your different pages and ask yourself whether those files are actually needed for that page or not. You’ll probably find some things that were added a while back and never removed.

Plugins are really bad about this. I go on quite a few WordPress websites that load a dozen CSS files, and half of them aren’t even used on that particular page! Many non-WordPress sites also do this. Shoot, I checked earlier and I was loading an unnecessary script on a few pages of scaleyourcode.com.

It can be scary to get rid of scripts or stylesheets. What if it actually is needed on that page, but you just can’t remember? There are a few tools that can help with this. One of which is DevTools (under Audits).