CODEWITHSUNDEEP
htmlcsspreloadweb-performance
chulinguy
chulinguy

Reputation: 31

Client-side performance question: how to combine 'media="print"' async CSS setup and early hint?

I wish to configure my async CSS and early hint setup. I would like to start loading XXX.css as early as possible but giving bandwidth priority to the main HTML (which has inline CSS and inline JS that are more urgent).

I am getting these two warnings in browser console:

A preload for 'XXX.css' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

The resource XXX.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

HTML
<link id="main-css" rel="stylesheet" media="print" href="/XXX.css">
<script>
  var css_link=document.getElementById("main-css");
  css_link.addEventListener("load", function() { mainCssLink.media = "all"});
</script>
103 Early hint

Adding the below response header

Link: </XXX.css>; rel=preload; as=style; crossorigin, </YYY.js>; rel=modulepreload; as=script

I added crossorigin to the early hint, but that was not enough to resolve the warning

Upvotes: 0

Views: 39

Answers (1)

Barry Pollard
Barry Pollard

Reputation: 46040

I wish to configure my async CSS and early hint setup. I would like to start loading XXX.css as early as possible but giving bandwidth priority to the main HTML (which has inline CSS and inline JS that are more urgent).

This seems a bit of a contradiction in terms. If it's not a high priority then you shouldn't be trying to load it as early as possible. In particular Early Hints (on Chrome at least) does not support different fetch priorities so there's a good chance it will interfere with the more critical HTML and JS.

A preload for 'XXX.css' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

I don't think this is anything to do with the crossorigin attribute and think it's more to do with your media attribute being missing (and so it not matching your link).

The resource XXX.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

I suspect this is partially due to your missing media attribute on your Early Hint as mentioned already, but I also think there is a risk with the following (particularly when using Early Hints) that the link may be loaded already by the time you start the <script> evaluation so the onload event has already fired before you attach the event handler.

IMHO you're be better inserting the <link> element (with the load handler at the same time) in your script:

<!-- Another preload for browsers that don't support Early Hints Preload (Safari) -->
<link rel="preload" as="style" href="/XXX.css" media="print">

<!-- Add the real link with an onload handler -->
<script>
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.media = "print";
  link.href = "XXX.css";
  link.addEventListener("load", function() { link.media = "all"});
  document.head.appendChild(link);
</script>

<!-- Handle when JS is disabled -->
<noscript>
<link id="main-css" rel="stylesheet" media="all" href="/XXX.css">
</noscript>

But honestly I'd remove it from Early Hints completely and let that deal with the more critical JS. The async stylesheet can wait IMHO if it really is async.

Upvotes: 1

Related Questions