Optimize website performance: Resource load

In our previous post, we explored the optimization of the rendering process, highlighting how certain resources, such as CSS (render-blocking) and JavaScript (parser-blocking), can hinder webpage loading times. Today, we delve deeper into techniques for optimizing Critical Rendering Path (CRP) to enhance website performance significantly.

Utilizing the Preload Scanner

A preload scanner is a browser optimization technique that acts as an auxiliary HTML parser. It scans the raw HTML response to identify and fetch resources before the HTML parser discovers them. This functionality allows, for instance, the download of resources specified in img tags even when HTML parsing is blocked. However, not all resources benefit from preload scanning, and certain patterns should be avoided for optimization purposes:

Images loaded through CSS background-image properties are not detectable by the preload scanner as these references are embedded within CSS.
Modules loaded using JavaScript or dynamic imports that insert <script> elements into the DOM are invisible to the preload scanner.
Client-rendered HTML through JavaScript, where the markup is embedded within JavaScript resource strings, remains undetectable by the preload scanner.

Optimizing CSS Loading

Minification: Reducing the file size of CSS files through minification enables faster downloads.
Removing Unused CSS: Tools like the Coverage tab in Chrome DevTools can help identify and eliminate unused CSS, streamlining the styling process.
Avoiding CSS @import: This can create a request chain, delaying the initial render. Replacing @import with <link rel="stylesheet"> can mitigate this issue. Using CSS preprocessors like SASS or LESS allows for more modular source files without incurring request chain penalties.
Inline CSS: Placing critical styles necessary for rendering the above-the-fold content directly within the <head/> eliminates network requests for CSS resources, potentially improving initial load times, especially when the browser cache is not primed. The remaining CSS can be loaded asynchronously or added towards the end of the <body>.

Optimizing JavaScript Loading

Using async and defer Attributes: Loading scripts without defer or async attributes blocks browser parsing and rendering until the script is downloaded, parsed, and executed. Scripts loaded with async are parsed and executed immediately upon downloading, while those with defer are executed after the HTML document is fully parsed, coinciding with the browser's DOMContentLoaded event. Furthermore, async scripts execute out of order, whereas defer scripts maintain their sequence as specified in the markup.
Impact on LCP (Largest Contentful Paint): Client-side rendering, commonly employed in Single Page Applications (SPAs) like those built with React, can delay the download of critical resources such as images. The browser only begins downloading these resources after scripts execute and elements are added to the DOM, potentially affecting the LCP metric.

Minification: Similar to CSS, JavaScript code can also be minified to accelerate download speeds, enhancing overall site performance.

Adopting these advanced techniques for optimizing the critical rendering path not only improves the speed and efficiency of web pages but also contributes to a better user experience by reducing load times and enhancing the responsiveness of web applications.