How to Optimize the Critical Rendering Path
This article explains how to improve web page rendering speed by reducing the number of critical resources, shortening the critical path length, and minimizing critical bytes through DOM, CSSOM, and JavaScript optimizations, including practical code examples and performance measurements.
Optimizing the critical rendering path (CRP) speeds up page rendering and improves user experience. The article identifies three factors that affect CRP time: the number of critical resources, the length of the critical path, and the amount of critical bytes.
Critical resources are files that block first‑paint, such as JavaScript and CSS. Fewer critical resources mean less work for the browser.
Critical path length is the total time taken to download and process those resources. It is influenced by network conditions, resource size, and dependencies.
Critical bytes refer to the size of the resources that must be downloaded; smaller files load faster.
DOM optimization : keep HTML files small by minifying, gzip‑compressing, and caching. Example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>Hello</body>
</html>Minify removes comments, whitespace and unused code, while gzip further reduces transfer size.
CSSOM optimization : make CSS files as small as possible, remove unused rules, and prevent non‑critical CSS from blocking rendering. Move print‑only CSS to a separate file and load it with a media query:
<link href="print.css" rel="stylesheet" media="print">Using media="print" makes the stylesheet non‑blocking for the initial render; it will only be applied when printing.
Another technique is to load CSS asynchronously with rel="preload" and switch to stylesheet on load:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">Avoid @import : @import adds an extra request and serializes loading, increasing critical path length. Example of problematic usage:
/* style.css */
@import url('https://example.com/extra.css');
body { background: red; }Replacing @import with separate <link> tags allows parallel downloading and reduces first‑paint time.
JavaScript optimization : treat JS like other text resources—minify, gzip, cache—and add the async attribute to prevent it from blocking DOM construction:
<script async src="app.js"></script>Performance tests show that async scripts eliminate the wait for CSS, moving the DOMContentLoaded event forward by several hundred milliseconds.
In summary, the article provides a systematic approach to CRP optimization: reduce critical resources, shorten the critical path, and shrink critical bytes by applying the described DOM, CSSOM, and JavaScript techniques.
360 Tech Engineering
Official tech channel of 360, building the most professional technology aggregation platform for the brand.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.