Idle Until Urgent — A web performance experiment
Drastically improve web performance with a simple change
There are 2 main categories of performance in the frontend.
- Network loading performance: The time it takes to send resource from server to the client.
- Parsing, compiling and rendering performance: The time it takes for the browser to unzip, parse, construct DOM, CSSOM, compile JS, create a render tree and render the page. (A diagram similar to Google render path)
A browser has a main renderer thread. This is where all the main JS, parsing HTML, CSS, style calculation, layout and painting happens. If the thread is busy, such as executing JS when the user interacts with the page such as clicking a button or scroll the page, there will be a delay in the page response.
Idle-Until-Urgent
This is a strategy created by a Google engineer, Philip Walton. Instead of evaluating all the JS bundles asap (eager evaluation) or evaluating JS when the functionality is needed (lazy evaluation), it allows the chosen JS code to be deferred to idle periods but then run immediately as soon as it is needed.
To experiment how this strategy could improve the responsiveness of a website, I made a slow React site with lots of heavy carousels. Most of the carousels are hidden underneath the viewport and users will not see them until scrolling down the page. The site was loaded using 3 different ways:
A. Render all carousels on page load
B. Render carousels when they are scrolled into view (Using React-onVisible)
C. Render carousels when the thread is idle or when they are scrolled into view (React-onVisible and Idle Queue)
The comparison of the First Contentful Paint of all 3 shows the time FCP time for C (1000ms) is better than that of B (5000ms) than that of A (6000ms).
With the Google Idlize library, it is easy and effective to implement the Idle-Until-Urgent strategy and shorten the site loading time by delaying the execution of JS of components not in viewport until needed or when browser is idle!
Reference:
https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint