Screpy page speed audit flags and lists the URLs it detects are render-blocking for you. The list is as follows:
Which URLs are considered as render-blocking resources and flagged by Google Lighthouse?
Detailed scanning studies of the Google Lighthouse platform have detected two types of render blocking resources. The first of these are scripts. The second is the style sheets.
Among the <script>tags marked as render-blocking resources are:
- Under the
headtag of the document - Those who don’t have the
Deferattribute - Those who do not have the
asyncattribute
Among the <link rel="stylesheet">tags marked as render-blocking resources are:
- Those that are enabled.
- Those with no
mediaattribute,media="all", or a valid media query that matches the current conditions. A valid query that does not match does not block the initial paint, although the browser can still download the file.
Identifying critical resources
After detecting render-blocking resources, what you need to do is to mitigate them. For this, it is necessary to determine which problems are critical and which are not. For that, use Chrome DevTools and go to the Coverage tab. On this tab, you can discover non-critical CSS and Js and decide what you want to edit.
Use this tab when you want to load a page or when a page is running. Tab gives you information about how many codes are used in real-time. It also tells you how many have been loaded. In this way, you get a chance to compare and easily notice the codes that prevent rendering. Let’s examine an example of the audit report:
It’s obvious what you need to do in order to minify the size of your pages. You have to ship what you need among the code and styles. When you come to this page, click on the URL of your choice and easily review that file. You will see that the styles inside the CSS files are marked with two colors. The same is true for codes in Javascript files:
- Green colors indicate critical situations. These contain the styles that are absolutely necessary for the first paint. The basic functions of your web page are also supported by them.
- Red colors indicate non-critical situations. These codes are not used for basic functions within the page.
How to pass the audit? – Eliminating render-blocking scripts
Have you decided which critical codes are? Now is the time to move the URL preventing this code from running. In this way, the page can be loaded easily.
If there is some non-critical code in the render-blocking URL, you can opt-out of deleting the URL if you wish. A good solution would be to replace the URL using the async or defer attributes instead.
But if you are not using the code in question at all, you should definitely remove it. For this, you can see our remove unused code article.
How to pass the audit? – Eliminating render-blocking style sheets
Way 1: We know that there is an inlining code inside the script tag. Similarly, inline critical styles may be required for first paint in a style block located in the head of an HTML page. All you have to do is load the remaining styles. But be careful about doing it asynchronously and using the preload link.
Way 2: Split styles used only under specific conditions into separate files and give each stylesheet link an appropriate media attribute. The browser waits for stylesheets whose media conditions match before the initial paint. For example, <link rel="stylesheet" href="print.css" media="print"> does not block the initial paint when the page is viewed on screen, but the file can still be downloaded. Use this file for print styles only, and keep styles needed for the current view available for the first paint.
Way 3: Another thing you can do is minify the CSS. As we mentioned before, there can be many ways to do this. But it is enough to remove unnecessary white spaces or unnecessary code and characters in the file. In this way, your users receive a small package instead of a large file.