渲染阻塞资源 Page Speed
Render blocking ressources Page Speed
我已经使用 Page Speed Insights 分析了我网站的速度，该工具给我的建议是：
"For stylesheets, consider splitting up your styles into different files, organized by media query, and then adding a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device. See Render-Blocking CSS to learn more. Build tools like critical can help you extract and inline critical CSS."
然而，我一直读到这种做法并不好，因为浏览器实际上正在读取所有 CSS 文件，即使它没有针对良好的宽度。
你对此有何看法？
样式表（又名 CSS）是渲染阻塞资源，因此您的浏览器可能会在继续渲染之前解析页面上的所有样式表块。
您可以考虑将您的设备特定 CSS 放入不同的文件（例如 pc_styles.css 用于 PC 版本，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。
我已经使用 Page Speed Insights 分析了我网站的速度，该工具给我的建议是：
"For stylesheets, consider splitting up your styles into different files, organized by media query, and then adding a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device. See Render-Blocking CSS to learn more. Build tools like critical can help you extract and inline critical CSS."
然而，我一直读到这种做法并不好，因为浏览器实际上正在读取所有 CSS 文件，即使它没有针对良好的宽度。
你对此有何看法？
样式表（又名 CSS）是渲染阻塞资源，因此您的浏览器可能会在继续渲染之前解析页面上的所有样式表块。
您可以考虑将您的设备特定 CSS 放入不同的文件（例如 pc_styles.css 用于 PC 版本，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。