我已经使用Page Speed Insights对网站的速度进行了分析，该工具给我的建议是：
“对于样式表，请考虑按照媒体查询将样式拆分为不同的文件，然后将媒体属性添加到每个样式表链接。加载页面时，浏览器仅阻止第一个绘制来检索与之匹配的样式表用户的设备。请参阅渲染阻止CSS以了解更多信息。诸如critical这样的构建工具可以帮助您提取和内嵌关键CSS。”
但是我一直读到，这种做法不好，因为浏览器实际上正在读取所有CSS文件，即使它的目标不是良好的宽度。
您对此有何看法？
答案 0 :(得分：1)
样式表（又称CSS）是阻止渲染的资源，因此您的浏览器可能会在继续渲染之前解析页面上的所有样式表块。
您可以考虑将设备特定的CSS放入不同的文件（例如，对于PC版本为pc_styles.css，对于智能手机为sp_styles.css），并将media属性添加到<link>标签中。
<link rel="stylesheet" href="sp_styles.css">
<link rel="stylesheet" href="pc_styles.css" media="screen and (min-width: 500px)">
在上面的示例中，pc_styles.css不会用于屏幕宽度小于500px的浏览器。这样可以节省下载时间，并防止在移动浏览器中出现渲染阻塞。
您还可以延迟加载您可能不需要的其他CSS文件，例如用于弹出窗口的CSS，照片滑块，代码突出显示等...
defer.js（注意：我是该脚本的作者）是一个超小型脚本（小于500个字节），可以有效地加载JavaScript。扩展版（约1KB）支持CSS文件，图像和iframe。它们都很容易使用。
可以找到完整的示例代码here。