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
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">
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.
<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>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.
This works <link rel="preload stylesheet" href="./style.css" as="style"> to instruct the browser to download key resources as soon as possible.
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" />';}?>
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'">