Don't you find it frustrating when a website takes an eternity to load, or when it finally does, crucial elements are mysteriously absent? Doesn't it evoke a sense of annoyance? Well, personally, I can't help but feel that way.
According to google, an optimal page load time falls within the range of 0 to 2 seconds, with 3 seconds also being deemed acceptable. Anything exceeding 3 seconds significantly elevates the chances of visitors exiting your website. Quite the eye-opener, isn't it?
In this article, I'll present several methods to enhance the speed of your website. By the end, I'll also provide an example.
Disclaimer: The following statements represent my personal opinions. Although they may contain factual information, their validity largely hinges on various contextual factors.
Just like many endeavors, achieving a goal involves a series of steps, and here are some (though not all) that I prefer to follow when striving to enhance website speed.
- Identifying the performance bottlenecks.
- Optimize the performance bottlenecks.
- Remove unnecessary scripts, assets, animations and other superfluous elements .
- Caching, optimizing queries / rendering processes.
1. Identifying the performance bottlenecks
Immediately you notice your site being slow, you would want to trouble shoot to discover what’s making it slow right? Well yes that’s the first step. To effectively troubleshoot you’ll need some tools, the ones I like to use are Chrome's lighthouse, PageSpeed, webpage test and the networks tab in the browser dev tools. In the networks tab, look for the responses with large waterfalls, those are the slow ones, with webpagetest you get a full report and how you can improve.
For a comprehensive understanding of the issues, it's advisable to conduct scans multiple times to ensure accuracy, this would help you identify what assets, scripts are causing the slow loads. In my experience, the primary culprits for poor performance often include large unoptimized images, excessive / unoptimized fonts, unused scripts, and occasionally, inefficient re-rendering practices. Now that you’ve identified all the performance bottlenecks we can proceed to optimizing them.
2. Optimizing the performance bottlenecks.
Here, it is essential to create a priority list, as some aspect of the bottlenecks may be slow, and there may be limitations on what can be improved. In my opinion your first approach should be to optimize the static images in the website so that your website has a good First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metric. In my opinion no static image should exceed 200kb at most, compress them as much as possible. In this regard, Opting for image formats such as .webp or .avif is adviceable as they offer smaller sizes while preserving a reasonable level of quality. I recommend .webp due to better browser support, Once you've completed these steps, you should begin to notice improvements.
To further enhance your site's performance, consider implementing lazy loading for your remote images. If you're concerned about layout shifts, employ a skeleton or placeholder while waiting for the images to load.
The next priority should be optimizing your fonts since they necessitate additional requests, downloads, parsing and rendering time. If you have locally hosted fonts, it's a good practice to compress them and ensure they can be cached effectively through a Content Delivery Network (CDN) during deployment. If you’re using services like Google Fonts or cdn fonts, you should consider preloading them, but be cautious not to preload all fonts as you may lose the gains you are aiming for. Only preload the essential fonts and ensure they match the fonts specified in your CSS file.
Optimizing scripts can be a complex and time-consuming task, but it's crucial, especially when dealing with business logic. Neglecting this aspect can lead to some rather humorous (or not-so-humorous) consequences!. One thing you can do is to minify your scripts, I am not going to say refactor because less code does not mean more performance, else python would be faster than C++ or rust. This phase may occasionally require a reevaluation of the logic or its implementation, potentially leading to a rewrite in a more performance-oriented language or runtime. However, caution is essential when undertaking such a task.
3. Remove unnecessary scripts, assets, animations and other stuffs .
This step is also crucial because there might be scripts and assets on your website that serve no purpose, yet you've unintentionally left them in place. Consequently, they are also downloaded by the browser increasing load times. Addressing the animations aspect can be tricky. Most times, the performance hit is as a result of the implementation and excessive usage, especially when you're using a package that requires JavaScript to execute animations. Animations possess the power to either enhance or diminish your site's overall quality. When applied thoughtfully, they elevate the UI and UX. Otherwise, they can make your site feel buggy and considerably annoying. So, why wait? Remove all those superfluous animations now! They're simply not adding any value.
4. Caching, optimizing queries / rendering processes
Now that you’ve successfully identified, optimized and removed unnecessary stuffs from your site. You can take your optimization efforts even further by refining your data fetching logic and scripts. In this context, caching plays an important role. Additionally, consider implementing loading states into your website to enhance the user experience. When deploying your site, choose a fast server with CDN capabilities to further improve performance. You might want to consider deploying to the edge for extra performance boost. However, do keep in mind that not all Node.js APIs are supported in this context, which can be a limitation. Optimizing queries / query response times involves minimizing latency. One effective way to do this is by ensuring that your server and database are physically close to each other or in the same region. This proximity reduces cold starts and minimizes the back-and-forth read and write operations, ultimately enhancing performance.
Another valuable practice is to cache assets and data that don't frequently change. This strategy allows your users to be served cached data, resulting in faster load times.
Lastly, If your server suffers from slow cold start times, consider setting up a cron job to periodically send requests to your server. This approach keeps your server "warm" and ensures it can respond promptly to requests without the delay associated with cold starts.
Whew!! I promised to show you an example 😊.
Well in this example the original site was built with Nuxt but mine was built with just Vuejs.
On the original the performance was just outright bad with excessive bandwidth consumption.
A total of 89 requests were made resulting in the download of 19.6mb of resources and the page completed loading in 44.07sec
For my site, we have a total of 27 requests, resulting in the download of 547KB of resources, and the page completes loading in just 2.05 seconds.
I could go further but I'm lazy
Here are the lighthouse scores
Before
After
Here's the link to the websites
original - Original
Optimised - Optimised
Absolutely, optimizing for speed is paramount. Avoid subjecting your visitors to a slow and frustrating user experience. Prioritize speed to guarantee a smoother and more enjoyable user journey. 🚀🚀
Happy coding 🚀 and bulaba 👍✌️
Top comments (1)
Network latency could cause unexpected delay. Understanding the dependencies or changing the order in which files are fetched can have a great effect on FCP. See this post for details