rel=preload for stylesheet isn't applying the styles once downloaded

Question

I'm trying out rel=preload for the first time, using it for a couple of stylesheets. Here is the code in question:

<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">

I'm testing in Chrome 61, and I can see that the stylesheets are downloaded as expected, however they're never actually applied, and I get the message on the console saying that a preloaded resource isn't being used.

If I remove the rel=preload in favour of just rel=stylesheet, then it works perfectly fine.

Is there something I'm missing?

Did you include `` for each of them as well? Preloading isn’t really useful on stylesheets like that because they’re already in the `` anyway. — Ry-, Oct 17 '17 at 10:37
Oh right, I somehow missed that in the online examples.. Thanks — Denno, Oct 17 '17 at 10:39

score 56 · Answer 1 · answered Feb 12 '18 at 16:49

56

What do you think about this approach:

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

Resource: https://www.filamentgroup.com/lab/async-css.html

answered Feb 12 '18 at 16:49

M. Paulikas

840
10
14

3

Despite its inline js nature, I find this to be most in line with DRY and therefore I consider it a more elegant solution than the accepted answer. Cheers! – Chad Jan 23 '19 at 22:10
Amazing. Thank you so much for this. It's beautiful. – Alex Morris Oct 01 '20 at 20:40
Only issue I see is that it jumps a bit on load. Might be that I need to inline my header style – Alex Morris Oct 01 '20 at 21:30
2

This won't work in Firefox, like @John says, you need both rel="preload" and rel="stylesheet" – Mario Nezmah Jan 19 '21 at 10:00
1

Also won't work in IE11 or pre-chrome Edge, in case you need to support those https://caniuse.com/link-rel-preload – ptim Feb 02 '21 at 06:50

John · Accepted Answer · 2017-10-17T10:40:32.983

44

You need to have 2 lines for each one with rel=stylesheet and one with rel=preload. As preload is just fetching it and not applying.

However you will probably not notice much performance improvement as it hits one line just before the other.

The better option is to inline the css (see here) that is seen above the fold then use javascript to add in the in the css file on page load (see here).

edited Oct 17 '17 at 10:40

answered Oct 17 '17 at 10:36

John

29,788
18
89
130

Same answer here that I replied to Ryan in the comment. I've only got a small application so there probably isn't much point trying to use preload at all.. Thanks for the in depth answer – Denno Oct 17 '17 at 10:40
I agree all depends on the application, I have seen significant savings doing this on large applications but it is quite a bit of work to keep it manageable. – John Oct 17 '17 at 10:43

brc-dd · Answer 3 · 2021-05-27T06:29:00.943

21

Technically, you can specify multiple values for rel attribute. Something like this should do the job, without writing 2 lines per stylesheet:

<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">

You can verify this using Lighthouse. This was result on my browser (there was no chained request as stylesheet was preloaded, and was properly applied):

edited May 27 '21 at 06:29

answered May 27 '21 at 06:14

brc-dd

10,788
3
47
67

Very nice solution, thanks a lot for sharing! Like it much more than inline applying JS :) – dave0688 Jun 08 '21 at 17:32
Works in the browsers I care about. Thanks! – Cliff Helsel Jul 01 '21 at 18:19
1

is `crossorigin` required for stylesheets? – Crashalot Aug 12 '21 at 23:34
Thanks a ton.. let me give a try.. – Developer Jan 18 '22 at 20:49
According to [this question/answer](https://stackoverflow.com/a/61889123/1191147) this solution doesn't work, and it's not that old either. Are you sure you're reading Lighthouse correctly? – Hashim Aziz Mar 02 '22 at 01:04
2

@HashimAziz that answer looks like it has outdated information, it seems to contradict [MDN's "rel" docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). In my case, this does fix the Lighthouse warning about critical request chaining. – Chris Hayes Apr 13 '22 at 18:53
This is my preferred solution as it is clean and avoid duplications – Gianpiero Jun 20 '22 at 16:10
Note that `type="text/css"` is rarely necessary. – CubicInfinity Jun 20 '22 at 20:42

score 4 · Answer 4 · edited May 29 '22 at 20:10

4

The accepted answer is correct but not very clear. For one file, you need 2 lines, and not one:

<link rel="preload" href="css/styles.css" as="style"> 
<link rel="stylesheet" href="css/styles.css">

I used this approach mostly because of css background images. Apparently this will speed up the loading.

You can see this approach in a similar fashion for google fonts links:

<link rel='preconnect' href='https://fonts.googleapis.com'> 

<link href='https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300&family=Source+Sans+Pro:wght@300;400;600&display=swap' rel='stylesheet'>

It's also useful for fonts. See Mozilla Docs

edited May 29 '22 at 20:10

André Chalella

13,788
10
54
62

answered Jul 11 '21 at 10:12

Minsky

2,277
10
19

I don't think it's correct to use 2 `link` tags to load 1 resource. They are completely two different things. First one (`rel="preload"`) is not render-blocking. But the second one is. So when the browser encounters with the `rel="stylesheet"`, will block rendering until it is loaded. – AliN11 Sep 06 '22 at 08:33

rel=preload for stylesheet isn't applying the styles once downloaded

4 Answers4

Linked