Website Speed Optimization

Website Speed Optimization

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!

Technical SEO speed

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:

[insert screen shots of each – linked to each page in a new tab] If you’ve not looked at website speed optimization before, I think you will probably be alarmed how slowly your page loads! Gulp! Which leads me to how you can optimize the speed of your website:

How is website speed optimized?

  1.  Cache – browser cache, add expires
  2. Optimize images – by size and format
  3. Defer or Async javascript
  4. Combine and minimise CSS
  5. Don’t load script you don’t need
  6. External resources – fonts
  7. Compress your HTML
  8. Content Distribution Network or CDN

I will take each of these in turn and explain further.

#1. Cache

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.

Enter caching.

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.

#3. Defer or Async javascript

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

Making your page interactive – as in the menus and expanding boxes etc. relies upon a web language called javascript or ‘script’ for short.

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

Fonts

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

Summary

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
  • Lose the javascript if you can by not using a million plugins (or use Gonzales or Asset Clean Up to disable selectively from the pages you don’t need them on)
  • 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?

Yes.

Get in touch and let’s make your content fly!

What people talk 2 Comments

15 Aug 2020 Wasim Khan

Thanks, Waheed for this amazing content.

19 Aug 2020 admin

Hi Wasim. Thanks for commenting. Check back soon as we’re keeping this post updated – everything changes.

Back to Top
Back to Top
Close Zoom
Context Menu is disabled by theme settings.