How to Improve your Website's Loading Speed
Fast website load times have been the hot talk for the past 3-4 years - mainly because everyone can get their website to load at an impressive 200ms. I’ll explain my take on how to approach these load time numbers, so all you have to do is put some effort and read through this article.
Such fast load times will increase engagement and make visitors feel good about their decision on coming to your website. We all dislike slow websites. In today’s time, a slow website means it’s cheap and the owner isn’t putting an effort to catch with the times - which makes you think whether you will get any value by visiting that old website at all.
I will be writing about faster load time concepts that will apply to a CMS, server rendering, or static site generators – however, this blog post will not be a tutorial on how to fine-tune your specific setup, you will have to take the idea from here and research on how to apply it yourself.
Optimize your images!
Images are stored in hard discs using bytes created by photo editors or cameras. Most of the time cameras and editors add unnecessary byte clutter. Optimizing your images does not mean losing quality, it means removing this unnecessary byte clutter - while only keeping the bytes that build the image!
Use modern image formats
Every image format has a unique way of storing the image bytes in the hard disc, and then a unique way of how it draws the image in the screen from bytes. Some formats are better at this job than others, for example, the WEBP and AVIF formats.
You may wonder though if it's a modern format, then what about the older browsers? In that case, you use the plain old JPG as a fallback. A whole HTML tag has been built around this issue called PICTURE, which you can read more about in the MDN docs...
We use modern image formats here at Answerly and it works fine for all browsers - feel free to inspect an image and see how we do it!
CDN (content delivery network)
Using a content delivery network can also drastically improve website speed. The CDN is a network of servers that are spread all over the world, and they are keeping a copy of your website. The good thing here is that when you are connected to a CDN, their regional server will serve the customer with a much faster loading time for your website.
You have less latency, and the website works even better. It is the best of both worlds, and the experience is exciting and unique because of that. Plus, there are many CDN options to choose from, and each one of them can be adapted to your requirements. It’s a good idea to test out every CDN you want to use, just to be sure that you are making the right pick. You want to Increase Page Speed as much as possible without hampering anything else.
Not enough websites minify their files and they’re completely missing out. When programmers write code such as HTML and CSS, they write it in a way so it is readable and accessible – which means there’s a lot of white spaces and unnecessary clutter. All of this takes kilobytes which add up very quickly. Minifying your files is a logical decision that you should check and enable on your website.
Try to use static site generators
Static site generators will take your content and convert it to HTML files which you can then upload to a server. When a visitor makes a web request to a static HTML file - it means the server rendering that HTML file does not have to go through all the trouble of looking in the database, finding the content for said file, then rendering it.
If you can't convert your CMS setup to a static site generator, then there are multiple plugins or processes to save the outcome of your CMS into static files, ready to be served to the internet.
So go ahead, and check the server that is serving your website whether it has GZIP enabled and if it doesn’t, enable it immediately to see an instant increase in load times.
When trying to improve your website load times, most of the suggestions revolve around minimizing either the file size and/or the workload required by the server to render a file. It doesn't hurt your SEO or causes things to break - in fact, computers and search engines love processing data faster.
These techniques are well aware by people that create the CMS and static site generators so there's built-in support for the methods I've suggested (usually) by all of them.
I will be updating this article periodically as new ways to improve website load times emerge. It is hard to stay in the front lines when it comes to having the fastest website, so come back soon for new updates!