Menu
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
629
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">
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
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
