CODEWITHSUNDEEP
javascripthtmlcss
user2657943
user2657943

Reputation: 2758

How to load css async the proper way?

As a test to learn more about optimizing websites, I've been trying to get my site to have the perfect score on PageSpeed Insights. Everything is going great so far except for the CSS delivery.

I did manage to get a perfect result by using the preload tag, but for some reason that didn't load for Firefox. So I tried using other solutions.

I switched then over to this: 

<link rel="stylesheet" href="~/css/site.min.css" media="none" onload="if(media !== 'all')media='all';">
<noscript><link rel="stylesheet" href="~/css/site.min.css"></noscript>

Which seemed very effective but pagespeed doesn't pick it up so it only gives me a 85 score rating.

Same happened when I used <link rel="stylesheet" href="~/css/site.min.css" media="none"/> in head and <link rel="stylesheet" href="~/css/site.min.css"> at the end of my body.

Then I tried loading my css with Javascript like this:

<noscript id="deferred-styles">
    <link rel="stylesheet" href="~/css/site.min.css"/>
</noscript>
<script>
    var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement);
        addStylesNode.parentElement.removeChild(addStylesNode);
    };

    var raf = requestAnimationFrame ||
        mozRequestAnimationFrame ||
        webkitRequestAnimationFrame ||
        msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
</script>

But this also had the same effect! Pagespeed didn't pick it up and gave me a bad rating. Any reason why for this? Because the above code can be found on their site!

Upvotes: 3

Views: 2277

Answers (2)

Ashish Kumar
Ashish Kumar

Reputation: 230

According to my experience with google pagespeed, to optimize CSS delivery, you have to write the inline CSS of the first fold of your webpage. So that it can be painted fast, and rest of the CSS, you can write in the external file. Minimize and concatenate CSS files used in the page. Refer this link for more info optimize css delivery

Upvotes: 2

Gerard
Gerard

Reputation: 15796

This is what I use just before the </body> and works fine.

	<script type="text/javascript">

	function downloadAtOnload() {
	// Dynamically load CSS
	var ls = document.createElement("link");
 	ls.rel="stylesheet";
 	ls.href= "css/my-css-file.css";
 	document.getElementsByTagName("head")[0].appendChild(ls);

	}
	if (window.addEventListener) window.addEventListener("load", downloadAtOnload, false);
	else if (window.attachEvent) window.attachEvent("onload", downloadAtOnload);
	else window.onload = downloadAtOnload;
	</script>

Upvotes: -1

Related Questions