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'/>