how to overcome Render-Blocking JavaScript and CSS

how to overcome Render-Blocking JavaScript and CSS  - It's been two months since Hatiku mata make this blog, there are two issues that are very "stubborn" on the check result PageSpeed​​. One is the problem Render-Blocking JavaScript and CSS. Mancari searching fro ways to overcome the problem of no avail. Until Hatiku mata think to leave it alone and give up what some dream last night this morning opened Mang Techno Magic Company blog. hatiku mata sidetracked by an article with the title of the Render-Blocking JavaScript on jQuery.

how to overcome Render-Blocking JavaScript and CSS

Plus cute little irritated when reading the contents of the article, it turns out for this solution is in the Google Developers Documentation page. Whether because of drowsiness or fatigue seems Hatiku mata missed the part about asynchronous loading. Previously, thanks to mas Adhy in Suryadi who have given this knowledge through his blog.

How to Overcome Render-Blocking

As explained on the Google Developers Documentation and Magic Company blog, Render-Blocking this happens because the browser has to download a JS or CSS file externally before loading the blog page. To fix this, simply by adding the attribute "async" on caller jQuery code.

JQuery calling code:

<script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type = 'text / javascript' /> 

Add attribute "async" on the jQuery calling code:

<script async = 'async' src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type = 'text / javascript' /> 

Save the template and see the result, the following is the score of the previous Tekno Mang PageSpeed ​​blog:



And that's after adding the attribute "async":



But there are few new problems that arise. Ie some JS Mang Techno blog can not work like JS for Syntax Highlighter and paginator. If my friend is also having to cope simply by moving the JS code that does not work and put it above the code </ body>. Examples of JavaScript code is like this:

<script src = 'https: //mt-blog.googlecode.com/svn/trunk/js/highlight-pack.js' type = 'text / javascript' />

Move the code just above the </ body>.

Meanwhile, to cope with Render-Blocking on CSS simply with an external CSS menginlinekan pal. Examples of CSS code is like this:

<link href = "https: //netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css 'rel =' stylesheet 'type =' text / css" /> 

Copy the URL of the code that is in the href = 'copy-url-in-here', all the CSS code ending with the extension "css". Open a new tab in the browser and paste the URL .css earlier then press Enter. After that, copy all the existing CSS code and put all the code above the code ]]> </ b: skin>. If so, please just erase external CSS source code above:

<link href = "https: //netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css 'rel =' stylesheet 'type =' text / css" /> 

Delete the code because its CSS has become internally within your blog.

Now this blog loading noticeably lighter than ever, need to know that the speed of blog buddies are very influential in the SERP. Google likes blogs or websites with fast loading. It also makes the visitor feel at home, my friend just imagine if my friend opened a heavy blog loading? That certainly will be pressing the back button and choose to open another blog alone. Of course, my friend did not want my friend's blog visitor to do that instead?