4 Easy Changes That Will Boost Your Site Speed Quickly

Everyone wants a faster site. Site performance affects not only your page rank, but has been proven to be directly related to bounce rate.

Simply put, a quick site = happy and engaged visitors. So, how do you get a fast site? Well, that’s the hard part — but it doesn’t need to be.

Here's a list of some quick things you can do to create a potentially big impact on performance.

1. Optimize Images

This is the big one. Images are probably the largest things coming down the proverbial pipes when serving your site. Also, images tend to be haphazardly uploaded and used within pages.

These two factors combine to make images one of the lowest hanging fruits for optimizing your site’s performance. There are a few things we can do to optimize the images:

Make Sure They’re No Larger Than They Need to Be.

This is the biggie and is the easiest to take care of. If your image is displayed at 600px wide, there is no reason to serve a 5,000px image. Too often, images that are much larger than they have any need to be are served up.

Simply resizing the image to the appropriate dimensions can yield huge performance gains. If you’re worried about retina graphics, you can size your images to ~1.5-2x the size they’re displayed (this is a good compromise of size vs quality). That said, there are better ways to handle retina images these days, but that’s for another post.

Losslessly Compress Them.

So you’ve made sure they’re the right size, but now that you’ve started down this road, you’re not satisfied — you want more gains. I’ll let you in on a secret. It's called lossless compression. What that means is crunching down the file size by stripping out data that doesn’t matter, reordering bits, etc.

That may sound like witchcraft (and it is), but the good news is there are easy-to-use tools that will take care of this for us. One of the go-to options is ImageOptim. Simply drop your files into the tool and let it do its magic. We’ve seen reductions as large as 25 percent with no loss in quality.

Now, you just need to replace your site’s images with your new "lean and mean" versions.

2. Remove Unnecessary Scripts

If you fire up a Google Lighthouse test against a slow site, you’re likely to see "Minimize main-thread work" or "Reduce JavaScript execution time." Those messages are pretty vague, and tracking down the true cause of excess JS execution time isn’t a quick win. However, there is a quick win that will help with this issue.

Just remove any scripts you’re not actively using. Tracking scripts are the largest offenders for unnecessary JS bloat.

For instance, do you really need HotJar, Crazy Egg, Google Analytics, HubSpot Analytics, a Facebook Pixel (or two), LinkedIn Insights, LeadLander, DemandBase, GoogleAd Conversions, and AppNexus loading on every single page?

I know what you’re thinking, and yes, I have seen this exact combination in the wild. The answer to the question of, "Are all of these necessary?" is likely no — you don’t need them all.

Consider consolidating and dropping services that offer the same data. For ad conversion tracking, make sure they’re only running on pages that you’re driving ad clicks to. That’s a few hundred kilobytes right there — aka a medium-to-large size image's worth of things that slow the site down without providing benefit to the visitor.

3. Move Scripts to the Bottom of the Page

You’re not going to be able to remove every script from your site. Even if you could, JS makes the web exciting and interactive. So, what are you going to do with the scripts you do need? Get them out of the head of the document.

Many scripts ask to be in the head of the page, but don’t actually need to be there. Tracking scripts like to be in the head to help track drive-by traffic (think people who bounce before the page is done rendering). If that’s truly useful to you, then leave those specific scripts in the head. But for everything else, make sure they’re the last items before the closing `</body>` tag.

This will ensure that your content and styles will get downloaded, parsed, and rendered before the browser makes itself busy with downloading and running the remaining JavaScript.

It’s worth noting that this will affect the perceived speed of the site rather than its absolute speed. What that means is that the site will feel faster to your visitors, but in actuality, will be the same speed it was before.

4. Minify and GZIP

Just like images, there are ways to compress down the size of your CSS and JS. The first of which is called minification (sometimes called uglification).

What this entails is basically stripping out all of the whitespace in your code and, in the case of JS, renaming arguments and rewriting certain functions/clauses more efficiently. There are plenty of tools to do this for you as part of your dev process (most modern text editors, like Vim, Atom, Sublime Text, and Visual Studio Code, will even have a plugin for it).

Great news for HubSpot users: All CSS and JS served from the platform will automatically be minified for you (you’ll never see the minified versions while editing the files though).

GZIP can be thought of like ImageOptim for any type of file that runs on the server. Behind the scenes, it does some clever compression and de-duping of repeated text. What this does is reduce the size of files (including further shrinking your images).

How you set this up will depend on your hosting environment, but it is usually pretty simple. Varvy has an excellent write up on this to get you going. That said, for HubSpot customers (and even customers on some economy hosting platforms), this will be enabled by default with nothing for you to do in order to enjoy its benefits.

Wrapping Up

This isn’t the end-all-be-all of improving your site’s performance and indeed does only scratch the surface. However, this collection of quick wins can go a surprisingly long way to getting yourself a snappier, more responsive website.

Let us know in the comments below what your favorite optimization techniques are.