按照 Google 的建议优化 CSS 的交付答案

【问题标题】：Optimising Delivery of CSS as recommended by Google按照 Google 的建议优化 CSS 的交付
【发布时间】：2015-02-09 14:32:37
【问题描述】：

我一直在通过 Google 的网站速度测试器运行我的网站

(https://developers.google.com/speed/pagespeed/insights/)

并尝试修复发现的所有问题。一个以红色突出显示为必须解决的主要问题是：

“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”

“优化 CSS 的交付” & “移除阻止渲染的 JavaScript：”

我首先将我的一些 CSS 文件组合在一起，以减少在我的

标记中对外部 css 文件的调用量，并在除 jquery.min.js 之外的所有 javascript 调用中添加了“延迟”一个，因为必须先调用它。

这修复了 Google 让我修复的一些示例。但我还有更多。我读到将您的 CSS 放在 HTML 中的

标记内可以解决此问题。然而，我的 CSS 总共有大约 18,000 行，这对我来说不是一个选择。

但是我突然意识到我可以使用 PHP 包含将我的 .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 影响或影响我的网站在搜索引擎眼中的性能？

我的所作所为是否令人不满？

【问题讨论】：

我不会在 <style> 标记中包含网站的 CSS。您正在增加您网站的每个网页的文件大小，并且 CSS 不会被缓存。使用<link> 并设置正确的标题将使您的CSS 被缓存。第一次访问时，首次下载文件时性能会略有下降。在额外的和未来的页面访问时，该文件将在缓存中（立即）可用。所以不，我不会做你所做的事情。如果可以的话，将 JS 文件移动到关闭 </body> 标记之前，这包括您的 jQuery，请先包含它。

标签： javascript html css optimization seo

【解决方案1】：

您的新方法的主要缺点是，如果您在文件的头部包含 CSS 和 JS，您可以最大限度地减少 DNS 查找（这有助于在 Google 速度测试中获得更好的排名），但您的所有源代码不会被浏览器缓存（因为它会在页面请求时再次下载）。因此，如果您的用户访问您网站上可能使用相同资源的其他页面，他们可能会遇到响应缓慢的情况。

如果大量用户因为长时间等待而离开您的网站，这对您的网站不利，在 SEO 方面也是如此，因为跳出率会更高并影响您的整体排名。

我的建议：

缩小和连接 JS 和 CSS。
不要在<head>中嵌入代码；请改用<link>。
如果您的 JavaScript 和 CSS 文件很大，您需要使用模块化方法（例如：为 JS 使用 AMD）。您可以在需要时为 CSS 动态附加 <link> 标记（查看一些 library examples）。
如果您使用 jQuery 等常见 JS 库，请考虑使用流行的 CDN。

【讨论】：

最小化 DNS 查找似乎让 Google 满意。我想这是因为查找次数越少，您的页面加载速度就越快。但是，如果您按照我所做的那样，您的浏览器必须在每个页面加载时加载所有 CSS 和 JS 代码，这可能会被取消。我已经连接了我所有的 CSS 和 JS。（这实际上是谷歌希望我解决的一个单独问题）我觉得我的新方法不被推荐，所以我会改回相反，我会考虑你关于动态附加标签的建议作为我的CSS 文件很大。谢谢
@Kevlar 很高兴为您提供帮助！