Comparing Synchronous and Asynchronous loading is essential for performance optimization. As both of them are deciding factors of a quick or delayed response time, let us discuss the same in-depth. In Synchronous loading, browser/server perform operations ( eg: fetch, manipulate, render, etc) in a sequence from top to bottom. It blocks further execution until the current operation finishes in order to complete the request.
This affects overall performance like a delayed response, per request resource blocking, on browser overall page performance etc.
The two key factors that decide the site performance are:
- Good user experience
- Performance optimization
Here comes the concept of Asynchronous loading.
What is Asynchronous loading?
In layman terms, Asynchronous loading deals with identifying operations we can load independently that can be loaded in parallel. Along with this, also load the things later which is not immediately needed. It will not block the most meaningful data to load due to other operations.
We at Readwhere, have several sections and types of data on a news page. It comes with trending news and current news data with other data like ads and analytics. It also includes some background files, theming assets, libraries, fonts, and other rich media resources like images videos, etc.
So here are the methodologies related to asynchronous loading we added to boost our overall server/browser-side performance.
Readwhere CMS makes your site performance better with the best tech trends. Try out!
If you implement these techniques too, it will show a positive impact on your site performance as well.
Server-side Asynchronous loading:
-
Move out operations that can be avoided in the request-response life cycle.
Find out the tasks that can be moved out from the request-response lifecycle. For example, on some requests, we need to update some logs or send some notifications. Such activities can be performed using workers. Let’s say, you wish to send a welcome email on login, this job can be assigned to a worker.
-
In case the data is too much, send it in chunks:
On a request, you might need to respond with large data like video files or some big size data. Utilizing some techniques to serve data in chunks or parts is the hack in such cases. For serving a big video file you can use a stream to serve the file. Streams are objects that let you read data from a source or write data to a destination in a continuous fashion.
-
Process data in parallel when possible for asynchronous loading:
At times current news data or trending news data is required from a request. Both are not dependent on each other. So, you can use threads/ async-await or other available methods in different programming languages to load data in parallel.
When both data is (i.e News data and Trending data ) available, you can combine and send back the response. It will dramatically improve the overall response time as well as resource utilization and improved per time request serve capacity.
Browser side Asynchronous loading:
When we request web-page on a browser, it consists of a head and a body. When the page loads in a browser, the browser starts reading the HTML from top to bottom. A web-page contains external resources like scripts, style-sheets, images/video links, iframe, etc.
Let’s take a look at some points regarding the browser for asynchronous loading of the web-page.
-
Lazy load off-screen images for asynchronous loading:
Images are heavy resources and it affects overall loading. So what we do we add one default/placeholder image to all the images sources? Our main motto is to not affect the page structure at all. When a user scrolls to the image, one can load it in the background and replace it with a placeholder image. So the page only loads the images currently user is looking at and it improves initial page load time as well as user experience.
-
Loading data after initial document loads is helpful:
When a page loaded from top to bottom on a browser, you can use JavaScript event listeners.
You can prioritise data and load in a waterfall or in parallel using JavaScript events and promises. Like DOMContentLoaded event tells that initial HTML page is loaded.
Now one can simply schedule other data loads like adding some analytics, initiate user event actions, render ads, render widgets etc.
-
For large length data, Load data from the server in parts and load on the scroll:
Let’s say you want to show a lot of data which is more than 2-3 fold of a device screen. Just use scroll event and load data as user scroll using AJAX. It overall reduces the initial page load size as well as only data is loaded when it is needed on the screen. It saves our resources if the user doesn’t scroll the request will not send to serve more. This is called infinite scrolling.
-
Data or library which is required after some action can be loaded on the user action:
In order to show some information on the info button, click and also used chart library on the information. When a user clicks, you can then only dynamically load the chart library and the information from the server.
-
Use the async keyword to load assets in parallel with other resources to support asynchronous loading:
While an HTML page is loading, there can be assets like some Library scripts which you won’t immediately require to the subsequent resources. One can add ‘async’ to the script tag.
It will load the script in parallel with other resources.
In conclusion, these are some of the listed things that Readwhere uses on the server and browser-side code to perform jobs asynchronously. It improves the overall performance of the product.
So, why don’t you try any of these techniques? You can divide your data, load when you need so and load parallel if not interdependent.
Also, let us know what are the techniques that you use to achieve performance optimization for your site.
