Introduction
Page Speed is a pretty big deal these days.
Since Google changed Googlebot's algorithm to highly favour fast, mobile-friendly websites, it has become more important to have a fast website. If that's not bad enough, users will typically spend less time, and convert less, the slower your website's experience is.
What is Page Speed
Page Speed is the amount of time it takes to completely load content on your webpage.
There could be dozens of reasons for any given user for why your page is slow. Your users could be on the train, passing through a tunnel with a weak signal, or their internet could just be slow.
By following best practices, we can at least mitigate the issue by ensuring we've done the best job we can.
10 Page Speed Improvements
Now that you know what it is, I'm going to teach you what you need to look at to speed up your page.
Note: these are listed in order of difficulty. At some point, you will need a developer to help optimise your site.
Table of Contents
- #1 - Use a CDN
- #2 - Enable GZIP compression
- #3 - Use smaller images
- #4 - Reduce the number of requests your page makes
- #5 - Avoid redirects where possible
- #6 - Reduce Time to First Byte
- #7 - Reduce and remove render blocking JavaScript
- #8 - Minify your CSS and JS
- #9 - Remove unused CSS
- #10 - Keep track of your site's speed
#1 - Use a CDN
CDN stands for Content Delivery Network. Using a CDN effectively gives you access to hundreds of little servers across the world that host a copy of your site for you, massively reducing the time it takes to fetch your site. If you're not using a CDN, every request to your website (including images, CSS and JavaScript), gets routed across the world, slowly, to your server.
According to 468 million requests in the HTTPArchive, 48% were not served from a CDN. That's more than 224 million requests that could have been more than 50% faster, if they spent a few minutes adding a CDN to their site.
Be sure to check you've configured your CDN correctly - cache misses in your CDN mean the CDN has to ask your origin server for the resource, which kind of defeats the purpose of using a CDN in the first place!
#2 - Enable GZIP compression
On some CDNs, GZIP compression will just be a checkbox labelled "enable compression". It'll roughly half the size of the files your users need to download to use your website, your users will love you for it.
#3 - Use smaller images
This means both reducing the resolution (such as from 4000x3000 pixels your camera outputs to 1000x750 for the web), and reducing the size by compressing the file.
If your site uses WordPress, there are plugins that will do this automatically for you as you upload images.
I personally use TinyJPG to compress images as I write blog posts.
#4 - Reduce the number of requests your page makes
The goal is to reduce the number of requests necessary to load the top part of your page (known as "above the fold content").
There are two ways of thinking here, you can either:
- Reduce the number of requests on the page as a whole, by removing fancy animations, or images that don't improve the site's experience
- Or, you can defer loading content that isn't a high priority through the use of lazy loading
#5 - Avoid redirects where possible
Redirects slow down your site considerably. Instead of having special subdomain for mobile users, use responsive CSS and serve your website from one domain.
Some redirects are unavoidable, such as www -> root domain or root domain -> www, but the majority of your traffic shouldn't be experiencing a redirect to view your site.
#6 - Reduce Time to First Byte
Time to First Byte is the amount of time your browser spends waiting after a request for a resource is made, to receive the first byte of data from the server.
There are two parts:
- Time spent on the server
- Time spent sending data
You can improve time spent on the server by optimising your server-side rendering, database queries, API calls, load balancing, your app's actual code, and the server's load itself (particularly if you're using cheap web hosting - this will impact your site's performance).
You can greatly reduce time spent sending data by using a CDN.
#7 - Reduce and remove render blocking JavaScript
External scripts (particularly those used for marketing) will often be written poorly, and block your page from loading until it is finished running.
You can reduce this effect by marking external scripts async:
<script async src="https://example.com/external.js"></script>
You can also delay the loading of your marketing scripts until your users start scrolling:
window.addEventListener(
'scroll',
() =>
setTimeout(() => {
//insert marketing snippets here
}, 1000),
{ once: true }
);
#8 - Minify your CSS and JS
Minifying means using tools to remove spaces, newline characters, and shortening your variable names. Typically this would be done automatically as part of your build process.
For JavaScript
To minify your JavaScript, check out UglifyJS.
For CSS
To minify your CSS, check out cssnano.
#9 - Remove unused CSS
Since Chrome 59 (released in April 2017), it's been possible to see unused JS and CSS in Chrome DevTools.
To see this, open the DevTools, show the console drawer (the annoying thing that appears when you hit Esc), click the three dots on the bottom left hand side, and open "Coverage".
Hitting the button with a reload icon will then refresh your page, and audit the CSS and JS for usage.
Here's what it looks like when you audit the starting page in Google Chrome:
#10 - Regularly track your site's speed
It's much easier to fix problems with your site's speed within moments of slowing your site down. On top of that, if you make reviewing your site's speed a habit, it becomes a much smaller task to fix things that are slow.
There are free tools to monitor your website's speed, two of the most popular being WebPageTest and Google Lighthouse. The downside to these tools is that you need to remember to run them before and after you make a change.
PerfBeacon is a service (that the author of this article created) that runs Google Lighthouse regularly, and lets you keep track of your site's speed over time.
Shameless plug
If you'd like more tips on how to improve your frontend's web performance, you can follow me on Twitter or subscribe to my newsletter as I regularly post articles there.
Top comments (9)
Here is my best practices
Try it out: blinkcourse.com ~ 100 page speed score
Considering your website loads in almost 7 seconds on Good 3G and 4.75 seconds w/o throttling (330mbps connection) it seems like your optimization only did so much.
You're looking at the wrong parameter. Page speed score means jack in the real world.
#11 - Vanilla JS
Absolutely, if you are working on a couple of pages on your own. Not a good choice for web apps, and/or teams
Nice list :-)
Checkout Brotli for compression.
ImageOptim is cool if you have a Mac!
Hi. Link to Brotli is broken
Fixed it, thank you!
Nice post, but a little surprised to see no caching advice :o
It'll be in the next update :)