The Website Speed Foundation
Part 1: Platform Core, Themes, Plugins, Images & Media
Part 2: Redirects, External Scripts & a DNS
Brilliant Explanation of DNS
Part 3: Servers, Hosting & Domains
What We'll Cover:
In this training we will teach you about the various components that make up a website.
It’s vital you understand these as throughout the rest of our training we’ll refer back to each one individually.
What You’ll Learn
- Part 1: Platform Core, Themes, Plugins, Images & Media
- Part 2: Redirects, External Scripts & a DNS
- Part 3: Servers, Hosting & Domains
The rest of our training will cover various tweaks that impact each of these aspects, to give you a faster website.
Quick Speed Stats
- 57% of visitors will abandon a page that takes over 3s.
- A 1s improvement yields 16% INCREASE in customer satisfaction
Your Next Action Steps:
- Watch the training & make sure you undertand the big picture.
- Continue the training & learn how to optimize each component in turn.
Your Next Training Video
In order to learn how to speed up a website it’s vital that you understand what it’s comprised of.
Let’s take a peek at the core components of a website.
A website is made up of many parts that all work together to give you a final picture.
What I find really helps to understand this, is to group the elements of code by the various functions they perform.
If the goal of a website is to transport information from a server to a user, let’s use the transport system as an analogy to explain the components.
The core of your website is the platform that it’s built on!
There are various platforms available such as Shopify, Wix, WordPress, Joomla, Drupal & many others!
So if we’re coming to our transport analogy the platform is like the fuel.
You need to decide if you’re going to be using petrol, diesel, electric or gas to power your car!
What is a theme?
In WordPress, a theme is a collection of templates & stylesheets used to define the appearance & display of the website.
OK, hold on…let’s use less geeky language…
A website theme takes the data & content stored by WordPress & displays it nicely in the browser for the user to see.
When you choose a theme, you decide how that content looks & is displayed.
Let’s compare a theme to our transport analogy.
A theme would be like a car brand & model. It broadly provides the look & feel.
If you buy a BMW you can have a range of different models that all look different.
Alternatively, you could go for Mercedes & have a totally different look and feel again!
A 4×4 vs a roadster will have different speeds & features. It’s the same with themes.
What is a plugin?
A plugin is a collection of functions that can be added to a WordPress website.
They normally extend the functionality or add new features.
Think of it like an app on your smartphone.
Each app has a different purpose & functionality.
Whatsapp does one thing, while your camera app has a totally different function!
Sometimes they depend on each other & other times they’re totally separate.
So if we come back to our transport analogy when you’re choosing your car, after you’ve chosen the brand & model you can now choose a number of extra features.
Do you want a sunroof?
Do you want leather or synthetic seats?
Do you want cruise control?
They’re not vital in getting you from A to B, but they each have a specific purpose.
Remember that each feature has weight & will slow your car down.
So there’s always a speed trade-off!
That’s the reason racing cars don’t have heated seats, parking sensors, sunroofs, or cruise control.
Unless it helps them go faster it’s not wanted.
It’s the same with a website.
Each plugin slows down the website (except speed plugins of course!).
There’s always a trade-off between functionality & website speed.
Images & Media
These are sliders, videos & the images that show on your website.
So in the transport analogy you can compare media to the luggage in your car.
A little bit of luggage is great if you’re going away for a weekend, but too much & it will slow you down.
It’s a delicate balance.
Let’s talk about…
Over time a website’s content changes & pages get moved around. Some get deleted, some get added and some get merged.
Simply put a redirect is a way for your website to send a quick message to your reader’s browser & tell them that the page they want to visit has been moved, so their browser can automatically point them to it’s new location.
It’s like your website says ‘hey, what you’re looking for used to be here but it has now moved. Please check if it’s over there.’
So what happens is that over time as the website grows, pages get moved you’ll often find there are many redirects & eventually it all looks a bit like a messy ball of string.
Let’s come back to our transport analogy. The easiest way to think of a redirect is to think of them as a signpost. You want to go somewhere but not quite sure how to get there.
So you follow a signpost. If the signpost is wrong, you’ll waste time going in the wrong direction or even end up in a dead end.
If the signpost is correct it will take you straight to your destination, without any detours.
You’ve been working hard at producing amazing content. You’re reaching out to websites to promote it, you’re slaving away on Facebook, Twitter, Instagram, LinkedIN & Pinterest to spread your brand.
You want to know if it’s working. So you install some analytics. A 3rd party script.
Maybe you want to show adverts on Facebook to people who’ve visited your website.
You install their 3rd party tracking script.
Maybe you want to have live chat or a chatbot, again you install a 3rd party script.
So by now you’ve got a merry group of 3rd party code that you also need to run on your website.
All of this code needs to be executed & loaded which requires resources & as you can guess…time.
So when thinking of this 3rd party code, I like to think of it like the passengers you’re going to take on your trip.
Are you just taking one person?
Or are you taking 10 different people along on the journey.
Each person adds character but together they can slow things down.
The trick is choosing just the right combination. Not too many and not too few!
Did you know that every website has a long 16 digit number that’s associated with it?
This number is called an IP address & is the backbone of how the internet works.
The internet would be a lot harder to use, if each time you had to share your special 16 digit number.
If someone said visit my website on 161.178.189.002, it would make things tricky.
So, to make life a little easier the smart tech people invented something called a DNS server.
The best way to think of this, is to think of it like a massive phone book that your computer can access.
Remember that if you type https://yourwebsite.com into the browser, your computer has no idea what that means, or where to fetch the data from. It somehow needs to connect that name to the actual server & IP address, which could be anywhere in the world, & then find the specific files for that website.
A DNS server is what translates a URL into the IP address that indicates a the location of the websites filies online.
Let’s talk about a
What’s the first thing you think about when you hear the words ‘hosting’ & ‘server’?
Most people think of it as a service that magically holds their website stuff.
Other people confuse it with a domain name.
So, to ensure we’re on the same page I’ll quickly explain the difference.
What is a Domain?
A domain name is the entry in the phone book that represents your website’s name.
The domain is the actual URL that you type into a browser.
It’s a name & there are no files or anything else. It’s like a company’s name.
What is Web Hosting?
Web hosting is the physical location of your website on the internet.
It’s normally an online storage center that holds all the video, images, & code of your website.
This is stored on a server.
A server is like your computer without, the screen, mouse & keyboards.
When you’re looking at hosting, you generally have three options:
- Shared hosting
- VPS hosting
- Dedicated server
It all comes down to costs & resources.
The more you pay, & the less people you share it with, the better the technology & the faster it is.
Imagine the laptop that you’re on right now is the server.
If you share that laptop with 10 other companies it might get a little busy & slow.
Each company has many staff that can access your laptop & perform certain functions.
So you could easily be sharing that single laptop amongst 1000 people.
That’s what shared hosting is like.
This stands for Virtual Private Server & it’s a lot better than shared hosting.
A VPS gives you a dedicated portion of the servers resources that you can do with as you please.
Coming back to the shared laptop analogy.
A VPS would be similar to you sharing your laptop ONLY with your own staff.
You can control who uses it & when.
You can also control how many people have access to it.
As the name implies you’re getting ALL the resources from the server.
So in the laptop analogy, with a dedicated server you are the only person using the laptop.
Like you are now
You have total control & are not impacted by any other people at all.
As you can imagine the luxury of this fast dedicated laptop costs more than if you share it with other people.
So, when choosing hosting, you need to strike a delicate balance between cost & service.
I hope you’ve found this broad overview of a website’s core components interesting & useful.
It will provide a strong framework for you to understand how to improve the speed of your website.