Render-Blocking Resources

Render-blocking resourcesRender-blocking resources are files such as CSS or JavaScript that the browser must load and process before it can render the page, thereby delaying rendering.Open glossary entry → are files that the browser must fully load and process before it can display a page's visible content. These are typically CSSCascading Style Sheets (CSS) is the language used to define the layout and design of web pages. CSS controls colours, fonts, spacing and arrangement, among other things.Open glossary entry → (Cascading Style Sheets, the language for laying out web pages) and JavaScript in the upper part of the document. They delay renderingJavaScript rendering is the process by which a browser or crawler executes JavaScript code to build the final, visible page. Content that is not already in the delivered HTML only appears after this step.Open glossary entry → and thereby worsen Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) measures when the largest visible content element in the viewport has loaded, representing the perceived loading speed.Open glossary entry →.

Common measures to reduce render-blocking resources:

• load critical CSS early and with priority, remove unused CSS,
• minify CSS and bundle or split it sensibly,
• load non-critical JavaScript with defer or async,
• remove unnecessary scripts and defer third-party scripts.

Render-blocking resources can be identified in PageSpeed Insights and LighthouseLighthouse is an open-source diagnostic tool from Google that audits a page's performance, accessibility and other quality aspects in a simulated lab environment.Open glossary entry →, among others. The goal is for the code needed for the visible area to be available quickly and not held up by unnecessary files.