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.

Optimizing Browser Rendering: Strategies for Enhancing User Experience
In the digital landscape, the performance of a website hinges significantly on how efficiently a browser renders its pages. This process, inherently dependent on the data provided by the website, is designed to progressively render content to ensure that users are not left staring at blank screens. However, this approach
Optimizing Website Performance: Key Strategies for Reducing Time to First Byte (TTFB)
In today’s digital age, with an increasing reliance on the web for consuming digital content, it has become more challenging than ever to meet the sophisticated demands of consumers. A vital aspect of business success lies in retaining website visitors, who typically decide within the first 15 seconds whether to

What is FUNCTION12?

The ultimate design to code tool for professionals.
You've successfully subscribed to FUNCTION12 Blog - Design to code automation for professionals
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.