Optimizing webpage load time and overall performance
To optimize webpage loading time and overall performance we need to first understand how the browser loads webpage behind the scenes. Once we understand all the steps involved then we can see where we can improve and render a better experience to the user.
Critical Rendering Path
The steps taken by the browser to convert HTML, CSS, and JS to rendered pixels on the screen is called Critical Rendering Path or CRA in short.
First, the browser receives initial HTML as a response to webpage requests. Browsers start parsing these HTML bytes into DOM (Document object model) and start loading external resources, like styles and scripts. If a resource(style/js) is critical for the first render of the page then it will block the initial render of the page. Such resources are called render-blocking resources. The lower number of render-blocking resources is important for a fast initial page load. By default styles, fonts and javascript are render-blocking and images/media is non-render-blocking.
DOM tree is computed in an incremental way from HTML. So for example, if the HTML response is very long browser will keep on converting the HTML to DOM as it receives new bytes.
Similar to HTML, CSS is parsed into CSSOM. Building CSSOM is generally very fast, so optimization opportunities are scarce. But, we should load only what is required for faster loads.
Both CSSOM and DOM together create the render tree. The render tree is what is visible in the browser. DOM nodes that are not visible like the script, link, meta tags are omitted from the render tree. Nodes hidden via CSS style (display: none) are also removed. Each remaining node is then attached with respective styles from CSSOM and there we have it, the render tree.
The next step is Layout where the browser calculates the position, dimensions of each node. It is also called Reflow because the browser needs to calculate this again in case of an event like node add/delete, class name add/delete, etc.
Minimizing Reflows is critical for fast-performing web apps. Not covering Reflow optimizations in-depth as part of this article, you can read more here.
Finally, browser fills the screen pixels to show the webpage. This step is called Paint. There can be more than one layer on a webpage, this step will paint each one.
If there are more than one layers to be rendered then browser needs to correctly place one layer over another. This step is called Composition.
Now that we understand the what happens behind the scenes of loading a webpage we can keep in mind some good practices to improve load times.
1) Lower the number of render blocking resources. Any javascript not needed at first paint should be either with defer or async attribute. For stylesheets there are a couple of ways to make them non-render-blocking (like using rel =preload)
2) Minize the JS and styles asset size.
3) Optimize on build bundles with code splitting and improve load times with lazy loading pages
After improving page load time its very important to further keep the user engaged by giving a seemless user experience while interating with the webpage.
The Pixel Pipeline
The above image shows stages a visual change made using Javascript will go through before making it to the browser screen.
Keep this pipeline in mind as it is useful for optimizing heavy visual changes like animations, transitions, etc.
Depending upon which CSS property you change some steps in the pipeline will be skipped resulting in better performance.
Some more optimizations
1. CDN
2. Cache policy to cache resources in browser
3. Minify JS and CSS
4. Send compressed(gzipped) resources from web-server
4. Image optimization.
5. Reduce number of Http calls
Not covering details of these optimizations here. Read in details here.