If you have a website, you want it to load quickly. This is one of the key aspects of a great user experience. Why wouldn’t the website load quickly, you may ask?
There are different factors that affect the speed of a website. Let’s understand how a website works.
When someone clicks on a link that leads to your website, the server responds by sending over the text, images and also runs all the scripts (Js and CSS) that have been coded into it.
Among these three, text alone takes very little file-size even if it is an article of a few thousand words. A 3500 word article minus all the images and scripts is around 50KB in size and that loads fast.
So what do you do with Js? Some people will move them to the footer so that the page can load first before tackling the scripts. This doesn’t always work because there may be certain functions in the page that require the scripts to load first before they can work.
Finally, we look at images and this is where I encourage you to focus on. If you take any webpage, chances are that the images demand the most bandwidth and contribute to a slower website. By ensuring images are optimised and kept small to small file-sizes, you already improve the speed of the website significantly.
An optimised image should be less than 100KB, even for a header image going at 2000 x 1200 and images that are smaller should be in the range of 10-20KB apiece.
I have done it, and will share the resources and steps for achieving that level of optimisation.
There are 3 things you need in order to optimise any image for your website so that it loads fast.
- Image Resizing and Cropping
- Compression of image
- Further Compression via WordPress Plugin
If you just perform these 3 steps, you will have optimised images every time and the effect on your website will be tremendously great. Your website will load really fast and user experience will be top-notch.
Okay, let me show you what programs I use to achieve the above. The best part...they are all FREE!
Image Resizing and Cropping
The dimensions of your image can be adjusted before you publish it. This is an important step because you don’t always need such a large image.
Imageresize.org is a free online program and I use it to resize and crop images.
Compression of Image
Step 2 is to optimise the image by reducing its file size without visible loss in quality.
The program I use is Kraken.io. Again, this is a free program but it does have a file size limit of 1MB. In other words, if your original file is more than 1 MB, you can’t upload it for optimisation.
Make sure you set the optimisation mode to LOSSLESS.
In a few seconds, you have your optimised image. Here is an example of the optimised image shown above.
It was 13.32KB before optimisation. After optimisation, the file size dropped to 4.42KB (a 66.79% reduction). In web speak, your website will load this image 66.79% faster!
How’s that for a start?
Just imagine doing this for all your images and you will be blazingly fast.
The last and final step is to install a WordPress plugin for image optimisation. There are many plugins for this but to save you time, I recommend the EWWW Image Optimizer. You can find this plugin easily and what it does is to optimise your image further (if possible) prior to publishing it online with the rest of your content.
By taking these 3 steps to optimise your images, your website will become lean and load fast.
My recommendation is to focus on image optimisation and not to fret over the Js. When it comes to Js, these scripts are there for a purpose and trying to fix them with coding or other plugins will probably lead to other problems even as you resolve this one. Besides, if you use another plugin to solve the Js issue, the additional plugin may just as much slow your website down, bringing you back to square one.
I hope you find this tutorial useful. If you like it, please share and comment below.