我向所有 css 链接添加了属性 rel="preload"，如下所示：
<link rel='preload' onload='this.rel="stylesheet"' as='style'
id='reworldmedia-style-css' href='style.css' type='text/css' media='all'
/>
它在 Chrome 中运行良好，但在 Safari 或 Firefox 中运行不佳
我发现一个可能最好的解决方案是加载两个文件，如下所示 - 支持预加载的浏览器将按预期使用它，而那些不支持预加载的浏览器（如 Firefox）将仅使用常规（第二个链接）。此解决方案不需要使用
onload="this.rel='stylesheet'"<head>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>
我还发现了一个替代上述方法的方法，可以包含“rel”两次，例如：
<link href="style.css" rel="stylesheet" rel="preload" as="style">
对于 Firefox，仅在 Firefox 56 Nightly 中受支持。将于2017 年 9 月 26 日发货。您可以从这里下载。
更新：此功能在 FF 56 上登陆，但在 57 中被删除。这里是原因：
此功能在 Firefox 56 中可用，但仅适用于可缓存资源。由于各种网络兼容性问题（例如错误 1405761），它已在 Firefox 57 中被禁用。适用于不可缓存资源的改进版本预计将登陆 Firefox 59
更新 2：Firefox 现已支持此功能。
我想不出比文档本身更具解释性的东西了。在 caniuse.com 网站上有这个 http://caniuse.com/#feat=link-rel-preload 如果你遵循这个并转到 w3c 规范，你会发现这个。 https://w3c.github.io/preload/ 其中明确指出“这是一项正在进行的工作，可能会更改，恕不另行通知。”也许很快这个《草案》完善后，就会增加支持。
使用 loadCSS 跨浏览器可靠地预加载
预加载的一个问题是 Firefox 和 Internet Explorer 等浏览器不支持它（截至 2018 年 11 月）。因此，这些浏览器不会下载 CSS 文件，这可能会导致网页出现严重的显示问题。这使得包含用于预加载的 JavaScript polyfill 变得至关重要 - 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>截至 2021 年 11 月。我使用过以下内容，它适用于 Firefox/Safari/Chrome 和其他主要浏览器：
<link rel="stylesheet preload" as="style" href="style.css" >
您不需要将“rel”加倍或对同一个 CSS 文件使用两个。
这可以起到指示浏览器尽快下载关键资源的作用
<link rel="preload stylesheet" href="./style.css" as="style">我有解决方案，这是有效的，并且对于网站速度来说是最好的 这是作为默认值的每个浏览器的普通代码
<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><?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" />';}?>2021 年最佳解决方案：
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
为什么这是最好的选择？
目前（2021 年）所有现代浏览器都支持预加载标签，但如果有人使用未更新的浏览器、IE 或三星移动等某些本机移动浏览器的设备访问您的页面，您的页面仍然会看起来很糟糕或根本不会设计样式。另一方面，使用预加载获得的页面加载时间（和页面速度分数）太大，不能仅仅为了支持不到 1% 的设备而放弃它。
使用 2x rel 标签的最高投票答案仍然会对 FCP 渲染时间产生负面影响（您可以使用 chrome devtools 性能选项卡进行测试）。使用媒体属性开关，我们得到了不会阻止页面渲染的解决方案 并且适用于旧版浏览器。
获取优先级
重要的是，“预加载”标签会获取具有最高优先级的非关键 CSS，这可能会降低其他重要下载的优先级，但如果在您的情况下您希望预加载提供优先级，则可以使用此解决方法：
<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">