Eliminate Render Blocking Resources [JS]

eliminate render blocking resources solved

Hi guys, how are you? Hope you are fine and doing well!.

Long years back when tigers used to smoke (just kidding ), I posted a solution on how to eliminate blocking resources for CSS?. Also, I already found a solution to eliminating javascript blocking resources but cannot post due to college exams.

Javascript is one of the important components for an awesome website but, they are heavier than CSS to an extent hence they easily cause rendering blocking resources problems.

Lazy loading a block of javascript is preferred most of the time, some people do call them async and defer respectively.

What is the difference between async and defer?

difference between async and defer

When a script tag does not have any attributes the HTML file will be parsed until the script file is hit, at that point parsing will stop and a request will be made to fetch that external file. The script will be executed before the parsing of HTML begins.


<script src="./path/to/script.js"></script>

The async attribute downloads the HTML file during parsing and will pause the HTML parser to execute it when it has finished downloading.


<script async="async" src="./path/to/script.js"></script>

The defer attribute downloads the HTML file during parsing and will only execute after the parser has completed.


<script defer="defer" src="./path/to/script.js"></script>

How to eliminate render-blocking resources (JS)?

Copy and paste the below script above </body> in the Blogger template.


<script type="text/javascript">//<![CDATA[
eval((function(x){var d="";var p=0;while(p<x.length){if(x.charAt(p)!="`")d+=x.charAt(p++);else{var l=x.charCodeAt(p+3)-28;if(l>4)d+=d.substr(d.length-x.charCodeAt(p+1)*96-x.charCodeAt(p+2)+3104-l,l);else d+="`";p+=4}}return d})("var _0x424e = [\"8ILbXkR\", \"288256yTHcUl\", \"write\", \"414283smIfkO\", \"atob\", \"<script>\", \"3357GlNfkr\", \"ZnVuY3Rpb24gbGF6eUpzKGUpe3ZhciB0PWRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoInNjcmlwdCIpO3QuZGVmZXI9ITAsdC5hc3luYz0hMCx0LnR5cGU9InRleHQvamF2YX` W%sdC5zcmM9ZSwoZG9jd` ~\"uZ2V0RWxlbWVudHNCeVRhZ05hbWUoIkhFQUQiKVswXXx8` .FJPRFk` R\"SkuYXBwZW5kQ2hpbGQodCl9\", \"515904LyqSwM\", \"80435suMgW`#u!3mzLpZC`#w!68674xhlGnX\", \"694490uxMOCS\"];`$g$30140 = _0x23fd;function` )$(_0x1c869c,` K!a9e74) {retur` =% = ` P%(`%_#1b` M!23fd9f) {` .%`!(\"` %#- 341`!F$5cc90`!G#424e[` ?%];`!'&` @\";}` v%`!N2;}(`!G)1767ca` =!11f7c7) {`!1#2e7b2`\"Z(while (!![]) {try` A&bff53 = parseInt(` W%(349)) + -` (151)) *` B27` =741` 8!` &16` <88`!+!` &34`!N82` y550));if`#L!`\"c$=`#3!`#K%break;} else`%1!`#s\".push`#~&.shift());}} catch` o!7218fc`%h\"` 7=})`&D$, 343120)`&\"$94x59x82`&%#`'a!(345);document`&7!` 1#53)]` f!` @$3) + window` <(42` B\"` v$) + \"</`,f$);"))
//]]></script>

Use the below javascript to eliminate render-blocking resources.


lazyJs("./path/to/script.js");
lazyJs("./path/to/script1.js");
lazyJs("./path/to/script2.js");

Place above javascript at the end of main script to avoid any conflicts.

Frequently asked questions

  • Why is the script encrypted?
    Last time, I created a script for eliminating the CSS rendering blocking resources problem but, most of the YouTubers and bloggers just copy-paste the same script without giving proper credits. so this time I purposely encrypted the script to mark my copyright over it.
  • Will the encrypted script cause any problem?
    NO, the concept of solving the problem is by lazily loading javascript files and encryption/obfuscation of the code will take more time to render and less time for executing required code. ultimately increasing delay time which is perfect for us.
  • Can I compress/beautify the script?
    Not recommended, as the script is encrypted. Any change in the above script will cause the script to defend itself and will not work further.

Comments

You Are Welcome To Share Your Ideas With Us In Comments!

Archive

Contact Form

Send