We touched on render-blocking resources earlier in this guide when we discussed how to avoid the document.write() method. Render-blocking resources are anything that delays the web page from rendering content, such as CSS files, HTML, and JavaScript. Again, if a user lands on your page and it takes a few seconds to start loading content, they will become frustrated and find somewhere else to find what they were initially looking for. This also can affect the First Contentful Paint metric, which is the time it takes for the browser to render the first piece of content from the DOM.
Lighthouse will identify render-blocking resources, like JavaScript and style sheets, that are causing performance issues. Scripts that are detected in the
of the page document will cause a notification to appear, as will any scripts that do not have a
or attribute. Again, the sooner the users can see content being painted on the page, the more likely they will stay on the page and not abandon what they were doing. In terms of flagging style sheets, any style sheet that is not tagged with the disabled attribute will get flagged, as does any style sheet that does not include the media attribute for a specific device.
There are various methods web developers can take to reduce, or eliminate, render-blocking resources. Ideally, you want to be able to reduce the number of render-blocking activities taking place at the same time. One way is to inline only critical CSS into the
of HTML. The rest of the code can then be loaded asynchronously, or deferred, after the critical elements have been downloaded and rendered. Another method is to split up style sheets into multiple files based on specific devices. Again, if the style sheet is not tagged with a media attribute, it will always be render-blocking if the tag is missing. Applying the tag allows the browser to start retrieving the style sheet as soon as possible. Lastly, and we will talk more about this later in this guide, is to minify your CSS. Minifying removes any unnecessary characters or spaces in the CSS code that causes CSS files to become larger, in terms of file size, without affecting how the browser processes the styles. Minification can also be applied to JavaScript. We will discuss some methods to minify JavaScript later in this guide as well.
