JS: RENDER-BLOCKING JAVASCRIPT JQUERY SOLVES

Fix Blocking Javascript

This tutorial contains:
• Fix Render Blocking JavaScript script
• How to change CSS code ► Inline CSS code.
• How to make JavaScript with ASync feature.

JS: RENDER-BLOCKING JAVASCRIPT JQUERY SOLVES

SCRIPT FOR ASYNC .JS FILE

Location of this code at before </body>.
<script async='async' src='//LINK.JS' type='text/javascript'/>

SCRIPT FOR INLINING .CSS FILE

Inlining the script contents eliminates the external request for small.js and allows the browser to deliver a faster time to first render. However, note that inlining also increases the size of the HTML document and that the same script contents may need to be inlined across multiple pages. As a result, you should only inline small scripts to deliver best performance.
<link href='//LINK.CSS' rel='stylesheet' type='text/css'/>

SCRIPT FOR ASYNC .CSS FILE

Solving Render-Blocking on CSS - Copy this script before ]]></b:skin>. And you must change 'LINK-2.CSS' to your css's url.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//LINK-1.CSS");loadCSS("//LINK-2.CSS");
//]]>
</script>

Example of Usage

CSS Source:
https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

Become:
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
//]]>
</script>

Then find (CTRL+F) and delete the original CSS link. Do not have duplicate code. Delete this for this example:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>







Rebates Bonus
Exclusive Rebate

Sign up today and be the first to get notified on new updates.


LOAD DISCUSSION