Typically, websites now have their own themes and plugins that are complemented by Java Script and CSS files at the top of the page. These commands will make the page load time longer and may be blocked from rendering. You will encounter website status error message, does not display until the browser has finished processing. So how to remove display blocking resources how? Let's Writing Posts Xuyen Viet Find out in the article below!
How to identify important resources
Before you want to learn how to eliminate display blocking resources, you need to identify important resources to avoid mistaken elimination. If accidentally identified, the resource recovery is often very difficult and time-consuming. To identify important resources, you need to use the Coverage tab in Chrome's Devtools to define CSS and JavaScript.
This tab will tell you how many codes are used compared to the number of codes downloaded. You can then click on the URL to check that file in Panel Sources.
Normally, the JavaScript and tyle code in CSS files will be marked with 2 different colors for you to easily identify:
- Green: Highlight important components, with core functions of the page. Frequently shown above the fold.
- Red: Unimportant element, not used for core page functionality. These resources are used for content that is not immediately visible.
Identify important resources that are essential in website management
>>> View now: What is the SWOT matrix? SWOT matrix structure applied to enterprises.
Of course, with important and unimportant resources, the way of handling is not the same. For important code, convert those from render blocking URLs to HTML Inline Inline. Downloaded web pages will use those resources.
As far as display code is not concerned, keep it in the URL to use for the appropriate time. For code that is not used best you should remove it.
How to remove display blocking resources
So how to get rid of rendering blocking resources? In fact, with different resources, the removal is not the same. As follows:
Remove JS from blocking display
How to get rid of render blocking JS code is quite simple. First of all, you need to clearly define, which JS code is important and which is not. After determining it correctly, you need to move those codes from URL -> Inline in the HTML page.
For the JS code blocking display does not matter you can delete it in case you will not use it. Alternatively, you can continue to keep these codes in the URL. Mark them with async or defer attributes to make them easier to identify.
Remove JS from blocking display by passing that code from URL to Inline
>>> View now: What is a brochure? The secret to creating an impressive brochure.
Remove CSS blocking display
Like the JS render block, the way to remove the CSS block is similar. Put important CSS in the