Preload CSS file not supported on Firefox and Safari Mac

Question

I added the attribute rel="preload" to all css links like this :

   <link rel='preload' onload='this.rel="stylesheet"' as='style' 
id='reworldmedia-style-css'  href='style.css' type='text/css' media='all' 
/>

It works fine in Chrome but not in Safari or Firefox

try media=print instead, check this https://css-tricks.com/the-simplest-way-to-load-css-asynchronously/ — Hassan Alhaj, Sep 02 '20 at 07:51

Tomasz · Answer 1 · 2019-11-20T02:40:52.557

36

I found a possibly best solution is to load two files as below - browsers that support preload will use it as intended and those that don't (like Firefox) will only use the regular (2nd link). This solution doesn't require using the onload="this.rel='stylesheet'" since the style is used right after the preload:

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

What I also discovered is a hacky alternative to the above could be including "rel" twice, like:

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

edited Nov 20 '19 at 02:40

answered Dec 18 '18 at 05:03

Tomasz

1,288
18
36

2

This works! And I have confirmed that in both Chrome and Firefox only 1 request is sent for the stylesheet, even though there are 2 tags for it. Thanks! – FirstVertex Jun 04 '19 at 16:54
yeah this worked for me as well. Since firefox doesn't support it yet, i think this one will do the trick and I can also verify that only 1 request is sent for the stylesheet! #win – Suresh Lamichhane Jul 28 '19 at 17:46
Yeah this works for me :) but need to double confirm, this doesn't affect the google page speed. – Joseph Miller Mar 23 '20 at 06:28
From my further tests, it doesn't affect Google (they still have the Site Speed tool in development / buggy; after initial possible problems, it came back to normal). – Tomasz Mar 26 '20 at 15:21
I love the double `rel` attr solution – Héctor León Apr 08 '20 at 11:49
3

`rel="stylesheet preload"` should work and doesn't have any parse errors – gsnedders Jun 13 '20 at 00:26

Sevban Öztürk · Answer 2 · 2017-12-01T13:58:55.010

8

~~For Firefox, it's only supported in Firefox 56 Nightly. It will ship on September 26, 2017. You can download it from here.~~

Update: This feature is landed on FF 56 but removed in 57. Here is the reason:

This feature was available in Firefox 56, but only for cacheable resources. It has been disabled in Firefox 57 because of various web compatibility issues (e.g. bug 1405761). An improved version that works for non-cacheable resources is expected to land in Firefox 59

edited Dec 01 '17 at 13:58

answered Jul 26 '17 at 08:16

Sevban Öztürk

1,796
1
11
8

13

Still not working in early 2020 :/ (even when Google recommends this on their Lighthouse CSS optimization page) – Sliq Jan 09 '20 at 06:11
For more info on the status of this: https://bugzilla.mozilla.org/show_bug.cgi?id=1626997 – dkniffin Jan 08 '21 at 16:28

score 4 · Answer 3 · answered Jul 26 '17 at 08:17

4

See can I use.

It is not supported in Firefox and will be added in the next release of Safari.

So what you are seeing is expected behaviour.

answered Jul 26 '17 at 08:17

Quentin

914,110
126
1,211
1,335

1

I'm on 60 and it still doesn't work. So based on the experience of people here as well as myself, "caniuse" seems to be mistaken in this case. – AndyO Jun 20 '18 at 10:42

score 1 · Answer 4 · answered Jul 26 '17 at 08:19

I can't think of something more explanatory than the documentation itself. On the caniuse.com site there is this http://caniuse.com/#feat=link-rel-preload and if you follow that and go to the w3c specifications you find this. https://w3c.github.io/preload/ where is clearly stated that "This is a work in progress and may change without any notices." Maybe soon when this "Draft" will be refined, support will be added.

score 1 · Answer 5 · answered Oct 24 '19 at 07:03

Reliably preload across browsers with loadCSS

One issue with preloading is that it is not supported by browsers like Firefox and Internet Explorer (as of Nov 2018). As a result, these browsers will not download the CSS file and this can result into serious display issues for your web-pages. This makes it critical to include a JavaScript polyfill for preload - loadCSS.

Download the loadCSS JavaScript file or simply copy it’s JS code from here.
Load the loadCSS polyfill wherever CSS stylesheet preload is performed:

<style>
[Your critical CSS goes here]
</style>


<!– Reliably defer loading of non-critical CSS with loadCSS–>
<link rel=“preload” href=”[yourcssfile]” as=“style” onload=“this.onload=null; this.rel=‘stylesheet’”>
<noscript><link rel=“stylesheet” href=”[yourcssfile]” ></noscript>



<!– Inline the loadCSS preload polyfill code or load it via external JS file–>
<script src=“./cssrelpreload.js”></script>

score 1 · Answer 6 · answered Nov 23 '21 at 00:16

1

As of November 2021. I've used the following and it works on Firefox/Safari/Chrome and other major browsers:

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

You don't need to double the "rel" or to use two for the same CSS file.

answered Nov 23 '21 at 00:16

Yawar Abbas

11
3

score 0 · Answer 7 · answered Dec 17 '19 at 22:02

0

This works <link rel="preload stylesheet" href="./style.css" as="style"> to instruct the browser to download key resources as soon as possible.

answered Dec 17 '19 at 22:02

Camilo.t

9
2

score 0 · Answer 8 · answered Oct 06 '20 at 07:24

I have soulution this is works and best for website speed This is for normal code for every browser put as a default <link rel="stylesheet" rel="preload" href="css/xyz.css" as="style" onload="this.onload=null;this.rel='stylesheet'" /> <noscript><link rel="stylesheet" href="css/main.css" /></noscript> and for mozilla firefox use this, when file run in mozilla its show this code otherwise its show default css code <?php if(isset($_SERVER['HTTP_USER_AGENT'])){$agent = $_SERVER['HTTP_USER_AGENT'];} if(strlen(strstr($agent,"Firefox")) > 0 ){$browser = 'firefox';} if($browser=='firefox'){echo '<link rel="stylesheet" href="css/xyz.css" />';}?>

score 0 · Answer 9 · answered Aug 19 '21 at 08:26

Best solution for 2021:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Why is this best option?

Currently (in 2021) all modern browsers support preload tag but if someone visits your page with device using not updated browser, IE or some native mobile browser like Samsung Mobile your page will still look bad or wont be styled at all. On the other hand gain in page load time (and pagespeed score) using preload is too big to give it up just to support less than 1% of devices.

Top voted answer using 2x rel tag still negatively affects FCP render time (you can test that with chrome devtools performance tab). Using media attribute switch we get solution that doesnt block page render and works for older browsers.

Fetch priority

Its important to say that 'preload' tag fetches non-critical css with highest priority which can deprioritize other important downloads, but if in your case you want priority provided with preload you can use this workaround:

<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Preload CSS file not supported on Firefox and Safari Mac

9 Answers9

Linked