Why is my website super slow?
Today we’re looking at the topic “Why is my website super slow?”
I’m sure you’ve seen a lot of movies where people slam their computers on the wall or the floor because of how slow a website that they just visited is. I promise I’ve never seen that happen in real life — that someone actually takes the computer that they bought with their hard-earned money, and slams it on the floor or the wall — but I think one true thing is that there’s a level of pain that is felt when you’re on a slow website. There’s this annoying feeling that you have when you’re on a slow website.
Communique:
Before we go on, I’d like to remind you that as a listener of the podcast, you now have free access to join the Rewire with Susan Slack community — a safe space where you can enjoy access to exclusive information and ask industry-focused questions. Note that this free access is for a limited time. Simply fill the form in the show notes, and you’ll be sent an invitation. Secondly, you also now have access to free one-on-one 15 minutes mentorship sessions with me and other tech trainers to discuss your experiences, concerns, and questions in your tech career. So book a session in the link on the show notes. And finally, I know you’ve been looking to show support to the podcast — this dream has become a reality. Simply visit patreon.com/rewirewithsusan to do so.
Now, what is this really about? This is about performance. And for this conversation, we’re looking at web performance. Web performance is all that goes into making your website fast, making it super small so that it loads fast. It also includes making even slow processes that happen on the website seem fast - this is known as perceived performance. So it’s going to look like the website is working fast, but really, it’s performing some slow processes.
Some of the things that determine a website’s performance are seeing how fast the content loads, how fast you see the images, how fast it feels to the user. Some of the ways to tell the performance level of a website are also noting if the site loads quickly. For example, how soon is a user able to interact with the website? Is there a way that you’re able to see something that is about to be loaded, such as a spinner? You know, all those things count.
Why do some sites feel sluggish and heavy?
I think this is the main question, right? There’s not just one reason for this — there are a couple of factors that could affect the performance of your website.
When you have lots of plugins or lots of third-party libraries or frameworks on your application, and of course, if they’re heavy, it increases the load time of your website. Also, there are CPU limitations that could impact the website’s performance. For instance, if the device you’re using is really old or is not compatible with your browser. Also, if you’re using a slow network, for example, maybe you’re in a remote location, that is, you don’t have good connectivity, which could impact how your website performs. There are also database or server issues. And of course, if you have heavy images on that website, it will impact the load time of the website.
Now, why should you care? As a developer about web performance, you can just decide to build your website and be like, “Yo! Whenever it loads, you get access to it.” But, when there is bad performance, it could lead to site abandonment because the fact is that content is not accessible, and therefore it’s not usable for whoever is looking at it. Imagine visiting a website for a particular functionality, and it turns out to be slow. Chances are that there are competitors (other websites where I can achieve the same goal faster) and that I will close the slower website and use the faster one instead.
So the thing is most people won’t be able to tell when a website has a good performance because nothing will feel odd. But they would be able to tell and recognise a slow website. And that’s just how life is. Many times when people do great, nobody really talks about it or gives it attention. But when there’s bad news, it travels at the speed of light.
Statistics show that 47% of users expect a website to load in two seconds or less, while 47%, will leave a page that takes three or more seconds to load. Now, the bottom line is that slow websites kill conversions. And this is one reason you might want to care about the performance of your website.
What are some of the things that I can do to ensure better web performance?
There are a couple of things to look into to ensure that you enhance the performance of your websites.
One of those is making sure that your files are as small as possible. You do this by minifying and combining your files. Minifying a file simply means removing unnecessary formatting, white spaces and code that’s irrelevant. Combining files is basically combining, for example, your JS files into one, and the same thing for your style files, so that you don’t deploy multiple files when you can just combine them and deploy them and have them smaller in size.
Another thing is reducing latency. And what is latency? Latency means the amount of time that it takes between when a user makes a request to when they get back a response. One of the ways that we reduce latency is to reduce the number of HTTP requests being made. And this is where different things come into play. For example, making use of the preload attributes in HTML. And what the preload attribute helps you to do is to load HTTP resources like fonts and images way before the page is rendered. And in this way, performance is improved.
Another thing to keep in mind is that you can make your site accessible as soon as possible by making sure that the time it takes for the user to interact with the site is as low as possible. One of the ways that this can be done is by reducing the critical rendering path. Now, what is the critical rendering path? The critical rendering path means the sequence of steps that the browser goes through to convert your HTML files, JavaScript files and your CSS files, to pixels on your screen. So what this means is that the lower the number of files, the shorter the critical rendering path, and invariably, the faster users can access your site. So this is one way to reduce your files.
Another thing to do is lazy loading. Lazy loading is a great way to reduce the critical rendering path. When lazy loading, you only load the necessary parts of the website that the user needs at a particular given time. And then you load the other parts when they are needed.
You can also make your website faster by optimising images. You can achieve this is by compressing the images, or by reducing the image dimensions. This can make your page faster by a few seconds.
And the final thing I’ll talk about is using a CDN. Now, when you have a website, for example, xyz.com, When your site is hosted on one server, every user visiting that website ( xyz.com) will access that one server. So two problems could arise. When there is high traffic, the load time slows down as a result. Also, in a situation where a client who is trying to access your website is physically far from the server, it can reduce the load time as well, even when there’s no traffic. Now, this is where a CDN comes in. The advantage that a CDN offers is that you’re able to cache your site on a number of different servers. And so when a user makes a request, the request is routed to the server closest to the client.
Those are some of the ways to enhance performance on your websites.
Now, of course, there are also a couple of tools to use to check your web performance. Examples are PageSpeed Insights, Firefox network monitor and Performance Monitor, Chrome’s lighthouse etc. And these tools basically help to show how fast or slow your website is, and indicate areas for improvement.
And that is all we’ll be sharing on performance today. Today we talked about what performance is, why some sites feel sluggish, why you should care about web performance, the things to do to ensure better performance and also tools to check your web performance.
Hope you learned something.
See you next week. Peace!
