layout | title | description | date | updated |
---|---|---|---|---|
layouts/doc-post.njk |
Eliminate render-blocking resources |
Learn about the render-blocking-resources audit.
|
2019-05-02 |
2020-08-11 |
The Opportunities section of your Lighthouse report lists all URLs blocking the first paint of your page. The goal is to reduce the impact of these render-blocking URLs by inlining critical resources, deferring non-critical resources, and removing anything unused.
{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/8xAmOUQsM8sfEAgzLBis.png", alt="A screenshot of the Lighthouse Eliminate render-blocking resources audit", width="800", height="271" %}Lighthouse flags two types of render-blocking URLs: scripts and stylesheets.
A <script>
tag that:
- Is in the
<head>
of the document. - Does not have a
defer
attribute. - Does not have an
async
attribute.
A <link rel="stylesheet">
tag that:
- Does not have a
disabled
attribute. When this attribute is present, the browser does not download the stylesheet. - Does not have a
media
attribute that matches the user's device specifically.media="all"
is considered render-blocking.
The first step towards reducing the impact of render-blocking resources is to identify what's critical and what's not. Use the Coverage tab in Chrome DevTools to identify non-critical CSS and JS. When you load or run a page, the tab tells you how much code was used, versus how much was loaded:
{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/Y2Yc8DMcBYMknz5y0Are.png", alt="Chrome DevTools: Coverage tab", width="800", height="407" %} Chrome DevTools: Coverage tab.You can reduce the size of your pages by only shipping the code and styles that you need. Click on a URL to inspect that file in the Sources panel. Styles in CSS files and code in JavaScript files are marked in two colors:
- Green (critical): Styles that are required for first paint; code that's critical to the page's core functionality.
- Red (non-critical): Styles that apply to content not immediately visible; code not being used in page's core functionality.
Once you've identified critical code,
move that code from the render-blocking URL to an inline script
tag in your HTML page.
When the page loads, it will have what it needs to handle the page's core functionality.
If there's code in a render-blocking URL that's not critical,
you can keep it in the URL,
and then mark the URL with async
or defer
attributes
(see also Adding Interactivity with JavaScript).
Code that isn't being used at all should be removed (see Remove unused code).
Similar to inlining code in a <script>
tag,
inline critical styles required for the first paint
inside a <style>
block at the head
of the HTML page.
Then load the rest of the styles asynchronously using the preload
link
(see Defer unused CSS).
Consider automating the process of extracting and inlining "Above the Fold" CSS using the Critical tool.
Another approach to eliminating render-blocking styles is to split up those styles into different files, organized by media query. Then add a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device (see Render-Blocking CSS).
Finally, you'll want to minify your CSS to remove any extra whitespace or characters (see Minify CSS). This ensures that you're sending the smallest possible bundle to your users.
Use tools such as AMP Optimizer to server-side render AMP layouts.
Consider using a module to inline critical CSS and JavaScript, or potentially load assets asynchronously via JavaScript such as the Advanced CSS/JS Aggregation module.
There are a number of Joomla plugins that can help you inline critical assets or defer less important resources.
There are a number of WordPress plugins that can help you inline critical assets or defer less important resources.