Optimise your website’s assets
Wait, wait, wait. What does optimising assets mean? Are you saying my websites are investing in assets that I didn’t know about? 🤔
Not really. Let me explain.
But before I do, let me just state: if you don’t have any experience with coding AND you’re not using services like Webflow or Netlify, you will need a developer.
What are optimised website assets?
Don’t worry, we won’t get deep into the technical stuff.
Basically, every time you access a website, you’re requesting and downloading each asset that website needs to fully load — every image, every html, every CSS, every JS, and so on.
That means if you have three images that weight four megabytes, your user will have to download at least 12 megabytes to load your website. And a full website with more than 2 megabytes is already considered heavy.
So 12MB… That’s VERY heavy!
Why you need to optimise your website
In order for people to find your website, they rely on indexing tools like Google — a big catalogue for websites of all kinds. These are Search Engine tools.
Thing is: there are currently 1.9 BILLION websites live right now. To make sure your website is fairly positioned on platforms like Google, you need to make sure your website is ready for Search Engine tools, in other words: You need to make your SEO — search engine optimisation — good.
But before we get into how to optimise your website, we need to know what needs to be optimised.
How to know if your website needs optimising
Thankfully, there are a few online softwares that generate reports on how your website is doing in terms of performance and SEO:
- GT Metrix:This will give you an overview of every asset that needs optimising.
- SEO Site Checkup:This will give you a complete report of your SEO score, and a list of things that need to be optimised.
Once you get the reports, it’s time to start optimising your website.
It’s okay if you don’t understand much of what the report says, that’s what you’re hiring a developer for, right?
How to optimise your website — per asset
I won’t extend much with this, as an experienced developer should know what to do, so here are the things you can do:
Optimise your images
There are 2 ways to make an image optimised:
- Make sure the image size is appropriate for the screen-size you’ll be delivering it to.
- Make sure the image weight is compressed to the max — without losing quality.
The number 1 means you’ll need to have a different image for each type of screen: 4k, full-hd, desktop, tablets and mobile phones. Webflow already optimises your images this way, and some WordPress themes also do this.
The number 2 means you’ll need to run your images through some minify tool like TinyPNGto make sure its weight is compressed to the max.
Tip: JPEGs are smaller than PNGs in weight — but they tend to deliver low quality gradients.
Minify your CSS and JS
As I said, I won’t get into details, so if you’re running your website on services such as Webflow or Netlify, this is the process to minify your files:
On Webflow: log in → select the website → go to Website Settings → under Hosting → Advanced Publishing Options → toggle Minify HTML, CSS and JS.
On Netlify: log in → select the website → go to Site Settings → under Build & Deploy → enable Asset Optimisation → select Bundle & Minify for CSS and JS.
Again, if you have no idea what this means, just leave it to your developers.