How to load css async the proper way?

Question

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!

starball · Accepted Answer · 2023-07-12 22:43:17Z

2

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

edited Jul 12, 2023 at 22:43

starball♦

59.5k52 gold badges312 silver badges1k bronze badges

answered Jul 31, 2017 at 11:12

Ashish Kumar

2301 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2657943 Over a year ago

So what I have is a loading spinner that is made inline. This spinner is styled in a style tag. The rest of the page is in the inline style also hidden. In the css file that gets loaded I then hide the spinner and display the page. Is that an okay way to do it? Is that what they mean with above the fold?

Ashish Kumar Over a year ago

what is your logic of removing the loader ? how are you removing the loader. ? i mean if the data is loader or you had fixed some interval ?

user2657943 Over a year ago

Maybe it's easier if you see the code here. Here you see I set my page to display none, and my spinner takes up the enitre screen. In the site.css file I then hide the spinner and show my page. So the spinner is gone when the css is loaded

Ashish Kumar Over a year ago

ok now move all your css files in the head tag. remove that noscript that you are using as fallback. and the logic of removing loader is generally based on the document.ready or window.load functions of jquery. Try to concat all your css files in one single file.

Ashish Kumar Over a year ago

and do let me know the pagespeed score after this.

|

Gerard · Accepted Answer · 2017-07-31 10:57:10Z

-1

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>

answered Jul 31, 2017 at 10:57

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

3 Comments

user2657943 Over a year ago

It doesn't seem to work for me. Pagespeed still tells me to optimize the CSS delivery

Gerard Over a year ago

Strange. When I remove it from my page, Pagespeed tells me to optimize. When I add the code again, Pagespeed is a happy bunny and I score 97.

Ashish Kumar Over a year ago

@Gerard i think it is happeing because your code is running after the pagespeed test completion. When you remove your code , your css file is called immediately.

Collectives™ on Stack Overflow

How to load css async the proper way?

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related