There are a couple of universal truths when we create content for the web. Smaller is better and faster is great. And to achieve smaller and faster you need to learn how to make images load faster.
To put it in plain English, if you want to compete you need to work on page speed. We already know that text loads fast. Images can also load fast but not by default. It is important that you learn how to make images load faster.
In this article I will give you 4 things action points and another 3 things that you need to understand and live by to succeed.
So let’s get started with the action points before we move on to the things you need to understand.
Images need to scale to correct size
Using WordPress as a Content Management System is really smooth and easy.
There is virtually no need to write any code. And if we do not use best principles – WordPress forgives us and corrects our ways.
This is however not always a good thing.
All wordpress templates have fixed dimensions for images used. These dimensions can be the same across pages but they may also be different depending on the layout.
When you download images from a Image bank you may find that the image is delivered with the dimensions listed below
- Width: 2886px
- Height: 1623px
- Size: 598 kB
Width and Height are self explanatory. Size simply shows how big the image is measured in KiloBytes. And as we already know, less is better. So we need to reduce the size to make images load faster.
But what if our WordPress template only needs an image with dimensions per below.
- Width: 1227px
- Height: 690px
What happen if we resize the image?
When we resize the image we get an image size of 170 kB.
So by simply resizing or scaling the image to the actual size needed we have cut the size of the image by more than two thirds. We have achieved a substantial reduction in size from only a couple of minutes of work.
Now 170kB is still a lot for a header. I think it is feasible to work towards an end result of less than 50 kB.
But scaling the image to the correct size is step 1. We will now look at compressing the image further.
Compress images to smallest possible size
So, we have already scaled or resized our image to the correct dimensions.
But we are not happy with the size of 170 kB.
Our next step is to compress the image by making it smaller without sacrificing visible quality.
Compare the images below and decide for yourself if it makes sense that one of the images is almost 9 times as heavy.
Use a Content Delivery Network (CDN)
A CDN will store cached copies of your website in multiple geographic locations, so called Points of Presence (PoPs). This speeds up the delivery time of your website as the cached copy will be closer in distance to you visitor.
Confusing? Think of it like this. You have a hosting company and your website lives on a server (read computer) stored in the hosting companies data center located in Canada.
When a visitor arrives at your website a request is sent to your web hosting company and the server that hosts your website. This would be true for all visitors, regardless of where they live.
Now, with a CDN we get stored cached copies of our website in many different geographical locations around the world. Hence, when for example a visitor from England requests a page from your website the cached CDN copy stored in England can be sent to the visitor. Delivery time will be faster and everyone is happier.
For most of you reading this it will be a matter of verifying that your host does offer a CDN solution. If yes, just make sure that the CDN is active and that the Cache control setting is set to a reasonable time frame.
Why reasonable timeframe you ask? Well, if you make changes to your website the cached CDN copies will not automatically be updated until the pre-set timeframe has passed. After the timeframe has passed a new copy with all the new updates will be created.
As an example I use a 6 hour Cache control setting. This means that my cached copy lives for 6 hours before a new cached copy is created in the CDN network. And if I have to update the site before the 6 hour window there is always the clear all CDN caches option.
If your hosting company does not offer an integrated CDN solution, read my tutorial on how to set up a free account with Cloudflare CDN.
Use a cache solution
Website caching speeds up performance and reduces usage of bandwidth.
And even though I already use a CDN I also employ website caching.
When there is a request for a page on your website it can happen in two different ways.
- If the page already exists in the cache it is returned to the visitor from the cache.
- If the page does not exist in the cache the request needs to be routed to the database. Now the correct page and all its assets and images needs to be retrieved from the database that stores the information before the page can be delivered to the visitor.
Needless to say option 1 is so much faster and way more efficient.
Listen to Google and take Mobile-first indexing to heart
When Google came out with Mobile-first indexing webmasters and developers finally had to realize that speed matters.
And the reason why speed matters is that Google is focused on providing a superior user experience.
And how do we deliver a superior user experience? We focus on writing epic content and make sure we deliver it as fast as possible.
Gone are the days when we focus on heavy navigation menus, animated gifs and slideshows.
Today we focus on smaller and faster. And so should you. How small is small enough? How fast is fast enough? As fast and small as possible without sacrificing quality.
Why just not install another plugin and be done?
If you are a WordPress developer you already know that there is a plugin for pretty much every little thing you can imagine.
But there is a drawback to using plugins to scale and optimize your images.
Plugins require resources to run. And when plugins use resources they will make your site load slower.
In my world the golden rule of plugins is to only use plugins when there is no viable alternative.
And you can learn how to make images load faster.
Read on and I will tell you how.
When all else fails, is your webhost good enough
So, your website still loads too slowly? And you have already completed all 4 action points above.
Then and only then you should consider upgrading to a faster web hosting company.
I recommend all to start with Bluehost as they are competitively priced and good enough when you start. Especially since it often takes longer to get going than we anticipate.
But I also know that Bluehost is not known to be the fastest host out there. After all, low prices and fastest rarely go hand in hand.
If you are looking to upgrade to a faster hosting provider the companies below offer high performance at a reasonable price.
- WPX
- Namehero
- Cloudways
- Kinsta
