How to Eliminate Render-Blocking Resources (CSS) in Blogger Templates
Eliminating render-blocking resources (CSS) - In the previous post, we have discussed how to shorten blog load time by disabling the default CSS and JS code in blogger templates. However, disabling some of the default JavaScript code in blogger templates can have an unsatisfactory impact regarding the accessibility of the blog. For example, by disabling widget.js, some features in Blogger, such as post statistics, post archives, and contact forms, will not work at all. That's why we recommend using the async technique on every script tag in the Blogger template.
After adding async = 'async' into the script tag, you can immediately feel the difference; Your blog page will be displayed in less than two seconds. Of course this is relative, depending on the size of the JavaScript code in your Blogger template.
If you use Google PageSpeed Insights to measure the performance of your blog, you can immediately see your blog's score has increased sharply. Even so, PageSpeed Insights may still advise you to overcome Render Blocking Resources which in this case are CSS codes.
As you can see in the image above, PageSpeed Insights recommends eliminating render-blocking resources. There are two CSS files highlighted by PageSpeed Insights, CSS files dealing with font resources.
What is the Render-Blocking Resource?
As we wrote in the previous post:
Render blocking resources are any piece of codes (JS or CSS) which are either blocking or slowing down how your website or blog is displayed or rendered by the browsers. Simply put, some code (especially JavaScript) that is in the blogger template can "block" the blog loading process. Our blog page will only appear fully in the browser after the code has been executed by the browser.
The CSS file or code that is executed usually corresponds to the position where the CSS code is placed. In general, we are taught to put CSS code in the section between <head> and </head> tags so that the code is ready so that when the HTML code is executed, the appearance of our blog already has a style.
Some of the CSS code in the Blogger template is between the HTML codes. This causes the browser to not run the HTML code completely before the CSS code before the HTML code is executed. Example:
CSS A code
HTML A code
CSS B code
HTML B code
If the position of the CSS and HTML code looks like the above, it is conceivable that HTML A code will not be executed before CSS A code and HTML B code will not be executed before CSS B code is executed. In this example, the CSS B code is referred to as a render-blocking resource because it blocks the browser from executing HTML B code.
In fact, if the CSS code is simple and small, the browser can execute it relatively quickly. The problem is, some of the CSS code or files in blogger templates, both default and custom ones, are large CSS code or files as highlighted by PageSpeed Insights above. The larger the file size, the greater the load time required by the browser.
We're not going to remove these CSS codes even though PageSpeed Insights suggests "eliminating" them. These CSS codes or files may be the main stylesheet for the Blogger template that we are currently using. So what can we do to overcome this rendering-blocking resource?
Read Also: Three Keys to Write a Good Descriptive Text
The smartest way to eliminate render-blocking resources (CSS) in Blogger Templates
After exploring several articles that discuss render-blocking resource (CSS), we got some suggestions such as minifying CSS code, removing unnecessary CSS code, and adding some attributes to CSS code, especially in the <link> tags.
The first two suggestions, namely compressing the CSS file size by minifying the CSS codes and removing unnecessary CSS codes, seem to require caution and cannot be applied by many beginner bloggers. Therefore, we will explain how to eliminate render-blocking resources (CSS) by adding attributes to CSS <link> tags.
We need to mention that the async attribute only applies to JavaScript and not CSS. That's why adding the async attribute to the CSS link tag will not have any impact on the blog's load time.
All you need to do is find the code as below in your blogger template:
<link href='//fonts.googleapis.com/css?...' media='all' rel='stylesheet' type='text/css'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' media='all' rel='stylesheet'/>
The CSS link tag code generally looks like the one above. We took the example above from a suggestion given by PageSpeed Insights because it was identified as a render-blocking resource. You can find many CSS link tags in your blogger template.
Now, you need to change media='all' to media='print' and add an onload attribute like this onload="this.media='all'"
The CSS link tag, once modified, will look like below:
<link href='//fonts.googleapis.com/css?...' media='print' onload="this.media='all'" rel='stylesheet' type='text/css'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' media='print' onload="this.media='all'" rel='stylesheet'/>
After finishing changing some CSS link tags as recommended, save your blogger template by clicking the Save icon. Now, you can check your blog's performance and load time again in PageSpeed Insights; you probably won't see any more suggestions for eliminating render-blocking resources (CSS).
The reason of putting or changing the attribute media='all' to media='print' and adding onload attribute is, like Scott Jehl pointed out:
To start, the link's media attribute is set to print. “Print” is a media type that says, “apply this stylesheet’s rules for print-based media,” or in other words, apply them when the user tries to print the page. Admittedly, we want our stylesheet to apply to all media (especially screens) and not just print, but by declaring a media type that doesn’t match the current environment, we can achieve an interesting and useful effect: the browser will load the stylesheet without delaying page rendering, asynchronously! That’s helpful, but it’s not all we want. We also want the CSS to actually apply to the screen environment once it loads. For that, we can use the onload attribute to set the link's media to all when it finishes loading. - Scott Jehl (Filament Group)
By applying this method as well as the method we discussed in the previous post, you will get a shorter blog load time. Good luck and don't forget to backup your blogger template before making any changes in it.
Please, only relevant comments are accepted. Comments that are irrelevant and/or containing active links will be deleted. Thank you.
Post a Comment for "How to Eliminate Render-Blocking Resources (CSS) in Blogger Templates"