Optimizing the key rendering path allows browsers to draw web pages as quickly as possible: faster web page rendering speeds can increase appeal, increase web page views, and increase conversion rates. In order to minimize the time that visitors see the blank screen, we need to optimize the loaded resources and their loading order.Analyze the performance of critical rendering paths Web | Google Developers
Rendering tree construction, layout and drawing
1. Process HTML tags and build a DOM tree, the initial HTML will be fully loaded and parsed will trigger the
2. Process CSS markup and build a CSSOM tree.
3. Combine DOM and CSSOM into a render tree.
4. Layout according to the rendering tree to calculate the geometric information of each node.
5. Draw each node on the screen.
Optimizing the critical rendering path _ refers to minimizing the total time spent performing steps 1 to 5 above. In this way, the content can be rendered to the screen as soon as possible, in addition to shortening the screen refresh time after the first rendering, that is, achieving a higher refresh rate for interactive content.
Block rendering CSS
In the rendering tree construction, both HTML and CSS are blocking rendering resources. HTML is obviously necessary, because without DOM, we have no renderable content, but the necessity of CSS may not be obvious.
1. By default, CSS is considered a resource that blocks rendering
2. We can mark some CSS resources as non-blocking rendering by media type and media query
3. The browser will download all CSS resources, whether blocked or not blocked, so ** block rendering ** refers only to whether the browser needs to suspend the first rendering of the webpage ** for the first time until the resource is ready
<style>/* styles here */</style>
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
Several ways to introduce CSS resources, whether to block the first rendering
Link introduction, yes
The style tag is written directly,yes
Introduced through DOM api, no
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = 'index.css';
Use preload to load CSS, no
<link rel="preload" href="index_print.css" as="style" onload="this.rel='stylesheet'">
Add media query for link, when the media query does not match, it will not block
* The more detailed the CSS selector, the more matching work, the slower the matching nodes
* renderTree contains only the elements needed to render the webpage, the unnecessary ones will not be added, such as
display: none node
Although the element with
visibility: hidden is not visible, it still occupies space and will still be added to RenderTree
* Layout refers to calculating the size and position of the DOM element displayed on the final screen. Since the element layout of the web page is relative, any change in the position of one of the elements will link other elements and reflow will occur
* Screen rotation
* Browser window changes, triggering resize event
* CSS properties related to size and position have changed
* Try not to use table layout, a small change may cause the entire table to be re-layed out
repaint (repaint): the node needs to change the appearance, but does not change the layout and geometric properties, it is called repaint, such as color
Effect of JS on rendering
In addition, because JS can read and modify CSSOM properties
If the browser has not completed the download and construction of CSSOM, and encountered a script that needs to be run at this time, ** the browser will delay script execution and DOM construction until it completes the download and construction of CSSOM
So by marking the external JS file as asynchronous (async / defer), instruct the browser not to prevent DOM construction while waiting for the script to be available
In addition, for JS code that takes too long to execute, you can consider using
Web Worker to process it, it will not manipulate DOM elements, and can only do some pure computing work
Impact of other resources
There is no need to wait for every asset on the page when building a rendering tree or even drawing a webpage: ** Not all resources are critical to quickly provide the first drawing **.
Optimize key rendering path
In order to complete the first rendering as soon as possible, we need to minimize the following three variables:
* Number of key resources: resources that may prevent the first rendering of web pages
* Critical path length: the number of round trips or total time required to obtain all critical resources
* The number of keyword sections: the sum of the size of all key resource transfer files
The general steps to optimize the critical rendering path are as follows
* Analysis and characterization of critical paths: number of resources, number of bytes, length
* Minimize the number of critical resources: delete them, delay their download, mark them as asynchronous, etc.
* Optimize keyword sections to shorten download time (round trips)
* Optimize the loading sequence of the remaining key resources: you need to download all key assets as early as possible to shorten the length of the key path
PageSpeed rules and recommendations
- Optimize the use of CSS
* Put the CSS in the head tag of the document, the browser will find the tag as soon as possible and issue the CSS request as soon as possible
* Avoid using CSS import, they will increase the number of round trips in the critical path
* Inline blocking of rendered CSS will not increase the number of round trips in the critical path