Website Speed Optimization
The Definitive Guide
This is your Definitive Guide for Website Speed Optimization.
Website speed optimization is the process of improving the speed of your website – how quickly a webpage loads.
No one has time to wait for content to load.
Let’s dive right in!
What is website speed optimization?
Website speed optimization is technical Search Engine Optimization or technical SEO.
Wikipedia defines web performance as:
… the speed in which web pages are downloaded and displayed on the user’s web browser
So speed optimization is about optimizing your webpage to arrive in front of the user as close as possible to immediately.
Which leads me to why it matters:
Why does Website Speed Optimization matter?Today, something like 71% of all search traffic is on Google, according to NetMarketShare. And if your content isn’t visible – there was little point creating it in the first place.
First the bad news:
No one cares how good your content is – if your page is super slow to load.
They just browser back or ‘bounce’ back to the search engine results page or SERP.
Which hurts your website visibility:
Your page bombs.
Now the Good News
Website speed optimization is perfectly feasible.
You can improve your page speed.
And take seconds at a time from it – and do a lot of it for FREE!
How is website speed measured?
To optimize your website speed, you need to know how fast (or slow) your webpage is right now.
So, to do that, you need a ‘baseline’.
A baseline is your starting point – where you are now. This gives you something to measure your efforts against.
Run your webpage through each of these tools and download this simple XLSX spreadsheet to track your progress by URL.
Here is a PDF version (if you prefer to write rather than type).
Now go ahead and click on each of the links below (they deliberately open in a new tab so you won’t lose this page) and where necessary create a free account.
In this way, you can see your history and (hopefully) track your progress to super-fast website. Tick!
FREE website speed testing tools:
- Google Page Speed Insights (No account needed)
- GTMetrix (no account needed but a free account increases your range of test locations and browsers and you get to jump the queue of those not logged in)
- WebPageTest.org (no account needed)
- Pingdom speed test (no account needed)
How is website speed optimized?
- Cache – browser cache, add expires
- Optimize images – by size and format
- Combine and minimise CSS
- Don’t load script you don’t need
- External resources – fonts
- Compress your HTML
- Content Distribution Network or CDN
I will take each of these in turn and explain further.
Caching simply means storing component parts or all of a webpage so its ready to go.
Today, webpages are commonly constructed ‘on the fly’ which means the server has to do some work to create the page before transmitting it.
If EVERY page for EVERY user has to be individually created this load increases dramatically.
The cache can be on your server, your user’s browser or ideally both!
Its important to select what is cached (and for how long) as nobody is interested in yesterday’s news (because you mistakenly cached it and served it up cold today).
#2. Optimize your website images
Images are what make the web visually appealing.
But they can be crazy large file sizes and if they are, they take FOREVER to download. And if you’re not on wifi that makes your page slow and quite literally costly to view.
None of this is necessary.
Images can be optimized BEFORE they’re uploaded to your server (getting the image dimensions right is the winner here) and then converted into modern image formats.
While some browsers do, and some don’t support the cutting-edge versions like WebP (I’m looking at your Safari) a great deal of file size reduction or ‘compression’ is possible without it detracting noticeably from the user’s perspective.
Check out: Imagify.
Imagine the doors of a bus being like those of a train.
Getting on and off is much quicker with a train which has multiple doors.
In web language this would be ‘asynchronous’ loading. Whereas with the bus, we all have to join a queue and wait in line.
The alternative to asynchronous loading is to set the priority order correctly and ‘defer’ (make the script wait!) until the page appears and is being viewed by the user.
You may have heard of the term ‘render blocking’ which simply means that your page doesn’t appear or ‘render’, until whatever is blocking it is loaded and executed first.
It’s the priority order.
#4. Combine and minimise CSS
Your webpage is made up from layers.
Each layer adds to the whole.
You might have a background colour and then an image overlaid. Then some text.
All this needs to be structured and laid out.
The language to tell the user’s browser how to lay out your page is called
Cascading Style Sheets or CSS.
Each time you add a plugin it typically adds a CSS file of its own.
Which means more overhead and less speed.
#5. Script order and necessity
Get the order of things right is important for user experience.
Back to the bus analogy:
Loading will be slow if there is only one door to get on – and even slower if we wait for someone to do something (for the script to execute) before the rest of the queue gets on.
And finally, if you don’t need a functionality on a page then remove it!
Back to ‘less is more’.
#6. External resources
You know all those fancy fonts that make your website look cool?
Well they each have to be ‘requested’ across the web and the more requests it takes to load your webpage the slower it loads.
Requests takes time and need data – which on a handheld device is important to minimise.
It’s ironic, but Google’s own fonts are an external resource that are an overhead that slows your website down.
The trick is to host them on your own server.
#7. Compress your HTML
This is where the programmers comments are removed, line breaks and spaces removed.
It’s about reducing your page ‘weight’. Might be a minor thing in itself but it all adds up.
#8. Content Distribution Network or CDN
Cloudflare DNS, cache, page rules, firewall, expiration dates
There is an old adage:
Keep It Simple Stupid.
Which in a website speed context means: less is more:
- Images are the single biggest contributor to page size (and therefore how slowly your page loads) so it is absolutely a case of less is more
- If you don’t need a fancy font then don’t use one
- Use a cache solution and a CDN
Finally, I consider Colin Chapman from Lotus Cars summed it up very well:
“Simplify, then add lightness”
It works for webpages as well as racing cars!
Can you do this for me?
Get in touch and let’s make your content fly!