CSS 04: HOW TO COMBINES ALL CSS STYLESHEET IN ASYNCHRONOUS MODE

The custom stylesheet that contains usually have an extension *.css (example.css). If we want that CSS loaded in asynchronous mode, it can be loaded in Async tag code.

COMBINES ALL CSS IN ASYNCHRONOUS MODE

FEATURES: It can make your website loading more faster and nicely. Site's loading time due using asynchronously mode would be faster. For an example, it loaded the text first than the font style, another plugins or maybe the image.

CSS IN ASYNC / ASYNCHRONOUS - SINGLE MODE

This is an example of single version of Async mode of FontAwesome's CSS.

<script>
//<![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.3.0/css/font-awesome.min.css");
//]]>
</script>

CSS IN ASYNC / ASYNCHRONOUS - MULTI SCRIPTS MODE

Here the raw code for making all *.CSS combined in Async mode - Multi Sheet Async Mode.

<script>
//<![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("//STYLESHEET-01.CSS");loadCSS("//STYLESHEET-02.CSS");loadCSS("//STYLESHEET-03.CSS");
//]]>
</script>

EXAMPLE OF USAGE - MULTIPLE CSS + ASYNC LOADS

This is an example of combined version of Async mode between FontAwesome's CSS and Highlight's CSS.

<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.3.0/css/font-awesome.min.css");loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/dark.min.css");
//]]>
</script>

LATEST HIGHLIGHTJS JavaScript

LATEST FONTAWESOME JavaScript


Put it at footer.php or before </body>.