Introduction
No one likes to stare at a website that takes forever to load the content. In this series of two blogs, I will be talking about a few ways and principles that can help to reduce overall page loading time. In the first part, I'll be focusing on the frontend perspective, and in the second part on the backend.
As AWS CTO, Werner Vogels has said "Everything fails, all the time". It’s quite obvious that there will be a few requests that will take time or error out, as 100% success is a north star, but failing fast is a much better user experience than keeping the user waiting forever. I will be outlining ways and basic principles from a full stack perspective i.e. frontends such as Vanilla JavaScript/ReactJS or any other JS libraries and backend APIs like Java or any other programming language that would definitely be going to reduce the page loading time.
Three-tier Architecture
An enterprise-grade application is normally architecture in three-tier application layers as depicted below:
It’s important to fine-tune each tier to gain maximum improvement in overall page loading time. So without further ado, let’s deep dive into it.
Ways and Principles
1. Pre Loading Resources
The sooner the static resources could be loaded or downloaded in the browser quicker the user will see the content loaded and can interact with it (though sometimes pages are dependent upon dynamic values from backend API), however, the goal is to keep the user engage with the content and make sure the user could see the progress of page.
Usinglink element rel=preload in the HTML head section, you can indicate your intention to the browser that you intend to fetch the resources sooner as those will be needed early in the page lifecycle. More information on preload MDN Web docs
Example:
<link rel="preload" href="some-imp-style.css" as="style" />
<link rel="preload" href="some-imp-font.woff2" as="style" />
2. Parallel Components or Sections Loading
Generally, a page can be divided into different sections and it's good practice to build different components to render each section that are dependent on different backend APIs. This strategy will help to increase interaction with the user as it won't be looking at a white page. Below is an example how a page is divided into different sections and each of the sections are loading of its content.
3. Frontend Timeouts
Again, repeating Werner Vogels's quote, "Everything fails, all the time".
Hence, we need to handle the failure cases gracefully. Sometimes backend APIs will take more time to respond back, so simple measure like defining adequate timeout value could enhance the user experience by failing fast instead of waiting forever. Here is an example from the most widely used Axios library. More information on Axios request config
axios
.get("https://example.timeout.com/user",{timeout: 2000})
.then(response => {
//some logic
})
.error(err => {
// handle error condition
});
4. Browser Level Caching
Using either session or local web storage techniques, data at the browser level can be cached. This way backend APIs calls can be avoided, obviously improving page loading time and enhancing user experience.
5. Static Resource Caching
Defining the right caching policy for static resources (files like JavaScript, CSS, image, fonts) of a frontend application is of great importance. As you probably don't want to download these resources again and again, as it'll slow down the page loading speed. There is no escape from not downloading on the first-page load, but subsequent page loads could be sped up by caching the resources. However, be cautious of the time you define to cache the resources, as there could be some potential issues that you could run into by caching the resources forever. Here is an example from the Nginx server. More information on the Nginx server expire config and Cache-Control
location ~* \.(js|css|png|svg|woff|woff2)$ {
expires 30 days;
add_header Cache-Control "no-transform";
}
Note - Here setting cache for all types as 30 days, but there is no one T-Shirt size all problem, so better to handle it differently.
6. Content Delivery Network
It does not matter on which type of server you are running the frontend application or directly serving the resources from AWS S3, having a Content Delivery Network (CDN) will immensely reduce the time to deliver the static content to the user. A CDN serves the static resource from a network of servers located nearer to the user, reducing the latency, and improving the overall loading speed of the web pages. This results in enhanced user experience, especially for users browsing the web page from a location far away from the application server.
Well! that is pretty much about it from frontend perspective, did I miss anything or do you know more ways?
Soon, I'll link the second part here, hopefully, you'll interested in knowing about it.
If you have reached here, then I did a satisfactory effort to keep you reading. Please be kind to leave any comments. Happy Learning!
Top comments (0)