How to load CSS files asynchronously in WordPress?

How to optimize the css files in Wordpress by loading it asynchronously.

A website developed in wordpress has a problem of speed. To speed up the website speed we use some cache plugin, optimize the js, css and image files. Optimizing these stuffs gives a good result and we see some improvement in speed no doubt. Here what i'm going to share is about loading js and css files asynchronously with the help of some scripts. It will give you a huge improvements in website speed for mobile and desktop. Before applying the scripts check status in google speed test and re-check after applying this script, you will see a great improvement. 

Paste the below code in functions.php of wordpress active theme: 


<p>add_action(&#39;wp_head&#39;,&#39;add_load_css&#39;,7);<br />
function add_load_css(){ </p>

<p>        if(!is_admin()){<br />
            ?><script><?php <br />
            readfile(get_stylesheet_directory() . &#39;/js/loadCSS.js&#39;); <br />
            ?></script><?php<br />
        }<br />
    <br />
}<br />
add_filter(&#39;style_loader_tag&#39;, &#39;link_to_loadCSS_script&#39;,9999,3);<br />
function link_to_loadCSS_script($html, $handle, $href ) {</p>

<p>        if(!is_admin()){<br />
            $dom = new DOMDocument();<br />
            $dom->loadHTML($html);<br />
            $a = $dom->getElementById($handle.&#39;-css&#39;);<br />
            $html = "<script>loadCSS(&#39;" . $a->getAttribute(&#39;href&#39;) . "&#39;,0,&#39;" . $a->getAttribute(&#39;media&#39;) . "&#39;);</script>\n";<br />

<p>        return $html;<br />
    <br />


After pasting the about code, now paste the below javascript code in loadCSS.js in keep it in "js" folder of the active theme.

function loadCSS( href, before, media ){ 
"use strict"; 
var ss = window.document.createElement( "link" ); 
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ]; 
ss.rel = "stylesheet"; 
ss.href = href; = "only x"; 
ref.parentNode.insertBefore( ss, ref ); 
setTimeout( function(){ = media || "all"; 
} ); 
return ss;