How To Optimise Your Website
So lets say you're looking for a plumber. You search it in google and it comes up with a list. You click the first link.
Loading...
God it's taking forever. You press the back button to go back to the search and you click on the next link. It works, thankfully, but uh-oh, why is the text really small? Why can i scroll sideways? Oh man it isn't optimised for mobile view. You press the back button again. You click the next link and finally, a website that displays on mobile.
How many of us have been in that situation? Maybe not a plumber, but a restaurant? A product site? How many of us have been put off by slow loading times and unresponsive designs?
You don't want your website to be skipped over for poor performance, so let's do something about it. Lets optimise, baby!
Hare are the things you can do:
-
Optimise images. (To be expanded)
Images are big in size, and with higher resolutions, they are only getting bigger. And that's great if you have a 4k screen to see all the pores in a persons skin through a photograph, but for normal people with normal monitors and phones, its probably overkill. Plus that big of an image will make your website load slowly.
When it comes to SEO, performance is king. Therefore small images = smaller load times = faster performance = better SEO.
-
Defer non-essential javascript. (To be expanded)
When you are taught how to make a website, they tell you two things: that code renders top to bottom, and that you stick script tags in the header. What they only tell you later, and sometimes not at all, is that if you have a javascript file in the header and its not deferred, the browser will pause the rendering of the webpage to parse the javascript file before it continues displaying the website. Obviously this is bad for performance.
To get around this, we add "defer" to the script tag. Or another method is to just not put the script tag in the head of the html document and to put it just above the closing body tag.
-
Preload fonts and essential images. (To be expanded)
You ever load a website and theres a flash of black and stuff quickly move around the page for a split second before it settles and "loads properly"? They call that FOUC or Flash of Unstylised Content, and for text heavy websites, the biggest culprit of it is the loading of fonts.
The way fonts work is there is the browser default font, and then there is the nice typography chosen by your web designer. And depending on how the font is loaded into the website, you may get one of those flashes every now and again. Avoid this by preloading your fonts.
-
Lazy load the other images. (To be expanded)
For any image that isn't above the fold, you want to lazy load them. This is as simple as adding the html property loading="lazy" into the img tag when you're writing it. Lazy loading, as opposed to eager loading, is basically telling the browser to display images as they are about to appear within the viewport of the screen. This increases performance as the browser isn't bogged down with downloading every single image on the website at once, and for an image heavy website, its a major performance gain.
Also, you can slap a decoding="async" on there too. This is similar to lazy loading, but it tells a browser that it's okay to continue displaying other content on the webpage while the picture is decoding, and that the image can be displayed later. Those in the know will know that the opposite is "sync", in which an image must be rendered first before the other content is displayed. This may be done when the image is important to the design of the website and would feel empty or incomplete without it.
