Subject
- #Browser Optimization
- #Resource Loading
- #Page Loading
Browsers generally render in the following order.
- HTML parsing (top to bottom, head -> body):
1. HTML parsing and DOM creation
2. CSS file loading and application (blocking rendering)
3. Script loading and execution (blocking rendering)
4. Rendering the contents of the <body> section (images, text, etc.)
Controlling the browser's resource priority can optimize page loading speed.
I would like to record the following key attributes that can improve the rendering order below.
- JavaScript: async, defer, module
- CSS: preload, media
- Images: loading="lazy", srcset, sizes
- Others: prefetch, preconnect, dns-prefetch
JavaScript
async : Downloaded in parallel with HTML parsing, and executed immediately after download. If any resources on the page are related to this js, it is better to remove the async tag.
defer : Downloaded in parallel with HTML parsing, and executed after HTML parsing is complete. = Order is guaranteed. If it needs to be executed after all HTML is rendered, it is better to add the defer tag.
Browsers basically load HTML first, but if there is a script source in the head tag, rendering is blocked. Adding the above two tags can prevent HTML rendering blocking.
CSS
stylesheet : This is the default value. It is an element that blocks rendering, and it is used when CSS must be loaded.
preload : Downloads in advance without blocking rendering. It is changed to stylesheet at the time of onload event occurrence, and the style is applied.
media: Renders if it matches the screen size condition.
Images
loading="lazy" : Loads the image when it appears on the screen. (When the scroll position is near the element where the image is located)
srcset : Selects the optimal image according to the screen size. (Image size optimization)
sizes : Provides a hint to the browser to select the appropriate image according to the viewport size.
In the case of the last img tag, when there are images with widths of 480px and 1024px, the size attribute causes the 480px image to be displayed if the max-width is 600px, and the 1024px image otherwise.
* In e-commerce, since there are dozens of images on one page, reducing the image size has a significant effect.
For example, there are at least 20 images on the search results screen, and the search is executed 100,000 times a day...
Others
rel="prefetch": Improves loading speed on the next page by pre-downloading resources before moving to the page.
rel="preconnect": Pre-configures the network connection for a specific link. (Large videos, fonts, etc.)
rel="dns-prefetch": Looks up the DNS of external resources to load resources faster. (Mainly external CDN)
* preconnect vs dns-prefetch
preconnect is a heavy operation that holds browser resources because it involves TCP connection (DNS - TCP handshake - TLS handshake). It is used when external resources need to be loaded quickly. (When a very important resource and its fast rendering are important)
dns-prefetch is a lighter operation because it only queries the DNS. It is suitable for unimportant resources and when they are called later.
Comments0