Render-blocking resources are elements that delay a webpage's loading efficiently. Typically consisting of JavaScript and CSS files, the browser must fully download, pars, and execute these resources before the page content can be displayed. Until the elements are completely processed, the browser's initial rendering is blocked, resulting in slower load times.
The browser needs specific resources to process the critical rendering path of a webpage. Such resources are essential for the webpage to be displayed correctly and to function as intended. However, due to their loading behavior, the resources must be managed and optimized correctly. Otherwise, they can negatively impact website performance and increase load times.
CSS files, JavaScript files, and web fonts are typically rendering blockers.
CSS files define a webpage's visual layout and styling, including layouts, colors, and animations. CSS can be included in a webpage in three different ways:
JavaScript files allow dynamic and interactive functionality on webpages, like real-time updates or animations, providing an inviting and functional user experience. There are different ways to include JavaScript in a webpage:
<script src="script.js">
to load JavaScript from an external file for reusability and modularity. <script>
tag within the HTML document for small scripts or specific functionality. <script type="module" src="module.js">
to enable ES6 module functionality and scoped execution. document.createElement('script')
for conditional or asynchronous loading.Web fonts enrich the visual appeal and branding of a webpage. They feature custom typography and allow a unique and consistent design on various devices and browsers. There are several common ways web fonts are included in webpages:
Images are not considered render-blocking resources because the browser can render visible content while images are still loading. However, image optimization images is important to enhance performance and reduce page load time.
Render-blocking resources can be identified with the help of various tools:
To improve webpage performance, it is crucial to eliminate render-blocking resources.
Category | Methods to fix rendering blockers |
---|---|
JavaScript | → use the async attribute for scripts that can run independently. → add the defer attribute to load scripts after HTML parsing. → minify JavaScript files to reduce size and load time. → remove unused JavaScript to eliminate unnecessary code. → dynamically load JavaScript only when needed. → use lazy loading for non-critical scripts. → place scripts before the closing </body> tag to prioritize HTML loading. → add essential code directly in HTML to eliminate extra HTTP requests. |
CSS | → inline critical CSS directly into the HTML for faster above-the-fold rendering. → minify CSS files to reduce file size. → preload key CSS files using the \ tag to prioritize important styles. → replace @import with <link> tags for faster loading. → remove unused CSS to streamline stylesheets. → combine CSS files by merging multiple stylesheets to reduce HTTP requests. → use media queries in <link> to load styles only when needed with the media attribute, such as media="print". |
Web fonts | → use the font-display: swap; property to display fallback fonts while custom fonts load. → preload font files using \ to prioritize their loading. → use modern, compressed font formats like WOFF2 to reduce file sizes. → subset font files to include only the characters needed in font files. → move scripts by placing them just before the closing </body> tag so the HTML loads first. → inline critical JS by adding important JavaScript directly into the HTML to avoid extra requests. |
Eliminating render-blocking resources directly improves page performance. By allowing the browser to render visible content faster, it provides several advantages: