我已经使用 Page Speed Insights 对我的网站的速度进行了分析，该工具给我的建议是：
“对于样式表，请考虑将样式拆分为不同的文件，按媒体查询组织，然后为每个样式表链接添加媒体属性。加载页面时，浏览器仅阻止第一次绘制以检索匹配的样式表用户的设备。请参阅 Render-Blocking CSS 以了解更多信息。诸如关键的构建工具可以帮助您提取和内联关键 CSS。"
但是我一直认为这种做法并不好，因为浏览器实际上正在读取所有 CSS 文件，即使它没有针对良好的宽度。
您对此有何看法？
【问题讨论】：
标签： pagespeed google-pagespeed
样式表（又称 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 不会用于屏幕宽度小于 500 像素的浏览器。它可以节省下载时间并防止在移动浏览器上出现渲染阻塞。
您还可以延迟加载您可能还不需要的其他 CSS 文件，例如用于弹出窗口、照片滑块、代码高亮等的 CSS...
defer.js（注意：我是这个脚本的作者）是一个超小脚本（小于 500 字节），可以有效地加载 JavaScript。扩展版（约 1KB）支持 CSS 文件、图像和 iframe。它们都易于使用。
完整的示例代码可以在here找到。
【讨论】：