根据 Google 的建议优化 CSS 的交付
Optimising Delivery of CSS as recommended by Google
我已经通过 Google 的站点速度测试器 运行 我的站点
(https://developers.google.com/speed/pagespeed/insights/)
并尝试解决所有发现的问题。作为必须解决的问题以红色突出显示的一个主要问题是：
"Eliminate render-blocking JavaScript and CSS in above-the-fold content"
"Optimise Delivery of CSS" & "Remove render-blocking JavaScript:"
我首先将我的一些 CSS 文件组合在一起，以减少在我的
标记中对外部 css 文件的调用量，然后我将 "defer" 添加到所有我的 javascript 个调用与 jquery.min.js 调用不同，因为必须先调用它。
这修复了 Google 告诉我修复的一些示例。但我还剩下更多。我读到将 CSS 放在
标签内的 HTML 中可以解决此问题。然而，我的 CSS 总共大约有 18,000 行，这对我来说不是一个选择。
然而，我突然意识到我可以使用 PHP includes 将我的 .css 文件包含在我的
中，而不是传统的调用它们的方法。
所以现在我这样称呼我的 CSS：
<style><?php include "css/style.min.css";?></style>
而不是像这样：
<link rel="stylesheet" href="/css/style.min.css">
这使我的代码简洁明了，Google 似乎很喜欢它。我的网站现在为台式机选择 90/100，为手机选择 86/100。
我遇到的问题是，由于包含 CSS 和 Javascript。
，我页面的源代码现在非常庞大
这是否会产生任何不可预见的负面 SEO 影响或影响我的网站在搜索引擎眼中的表现？
我的所作所为令人不悦吗？
你的新方法的主要缺点是，如果你在文件的头部包含 CSS 和 JS，你会最大限度地减少 DNS 查找（这有助于在 [=34] 上获得更好的排名=] 速度测试）但是你所有的源代码都不会被浏览器缓存（因为它会在页面请求时再次下载）。
因此，如果您的用户访问您网站上可能使用相同资源的其他页面，他们可能会遇到响应缓慢的情况。
如果相当数量的用户因为长时间等待而离开您的网站，这对您的网站不利，对于 SEO 而言也是如此，因为跳出率会更高并影响您的整体排名。
我的建议：
- 缩小并连接 JS 和 CSS。
- 不要在
<head>中嵌入代码；相反，使用 <link>.
- 如果您的 JavaScript 和 CSS 文件很大，您需要使用模块化方法（例如：将 AMD 用于 JS）。您可以在需要时为 CSS 附加
<link> 标签（查看一些 library examples）。
- 如果您使用 jQuery 等常见的 JS 库，请考虑使用流行的 CDN。
我已经通过 Google 的站点速度测试器 运行 我的站点
(https://developers.google.com/speed/pagespeed/insights/)
并尝试解决所有发现的问题。作为必须解决的问题以红色突出显示的一个主要问题是：
"Eliminate render-blocking JavaScript and CSS in above-the-fold content"
"Optimise Delivery of CSS" & "Remove render-blocking JavaScript:"
我首先将我的一些 CSS 文件组合在一起，以减少在我的
标记中对外部 css 文件的调用量，然后我将 "defer" 添加到所有我的 javascript 个调用与 jquery.min.js 调用不同，因为必须先调用它。这修复了 Google 告诉我修复的一些示例。但我还剩下更多。我读到将 CSS 放在
标签内的 HTML 中可以解决此问题。然而，我的 CSS 总共大约有 18,000 行，这对我来说不是一个选择。然而，我突然意识到我可以使用 PHP includes 将我的 .css 文件包含在我的
中，而不是传统的调用它们的方法。所以现在我这样称呼我的 CSS：
<style><?php include "css/style.min.css";?></style>
而不是像这样：
<link rel="stylesheet" href="/css/style.min.css">
这使我的代码简洁明了，Google 似乎很喜欢它。我的网站现在为台式机选择 90/100，为手机选择 86/100。
我遇到的问题是，由于包含 CSS 和 Javascript。
，我页面的源代码现在非常庞大这是否会产生任何不可预见的负面 SEO 影响或影响我的网站在搜索引擎眼中的表现？
我的所作所为令人不悦吗？
你的新方法的主要缺点是，如果你在文件的头部包含 CSS 和 JS，你会最大限度地减少 DNS 查找（这有助于在 [=34] 上获得更好的排名=] 速度测试）但是你所有的源代码都不会被浏览器缓存（因为它会在页面请求时再次下载）。 因此，如果您的用户访问您网站上可能使用相同资源的其他页面，他们可能会遇到响应缓慢的情况。
如果相当数量的用户因为长时间等待而离开您的网站，这对您的网站不利，对于 SEO 而言也是如此，因为跳出率会更高并影响您的整体排名。
我的建议：
- 缩小并连接 JS 和 CSS。
- 不要在
<head>中嵌入代码；相反，使用<link>. - 如果您的 JavaScript 和 CSS 文件很大，您需要使用模块化方法（例如：将 AMD 用于 JS）。您可以在需要时为 CSS 附加
<link>标签（查看一些 library examples）。 - 如果您使用 jQuery 等常见的 JS 库，请考虑使用流行的 CDN。