将首屏页面要用到的CSS文件，放在页面头部加载，其他模块的CSS可以使用异步加载：loadCSS 和 Preload。
关于preload,推进2篇文章给大家看下：
1、通过rel="preload"进行内容预加载： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
2、preload 的w3文档： https://www.w3.org/TR/preload/
对于一些不是首屏加载的css，我们可以如下写法：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel=‘stylesheet‘">
防止浏览器禁止js，保险起见，也可以如下
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel=‘stylesheet‘"><noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
为了避免有些浏览器会重新调用处理程序rel=‘stylesheet‘这个属性，我们一般推荐如下写法：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel=‘stylesheet‘"><noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
为了更好的兼容rel=preload，可以使用loadCSS ，github地址： https://github.com/filamentgroup/loadCSS
因此， 不考虑浏览器兼容问题的情况下 （考虑兼容问题，可以使用loadCss，这里不多演示），我们对上面代码再次进行优化：
<head> ?<link rel="stylesheet" href="/首屏加载css.css"> ?<link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel=‘stylesheet‘"></head><body> ?<header>…</header> ?<main>…</main> ?<section class="comments">…</section> ?<section class="about-me">…</section> ?<footer>…</footer></body>
转自：https://www.tuicool.com/articles/Yfeeu2J
CSS加载性能优化
原文地址：https://www.cnblogs.com/xuepei/p/8119448.html