Javascript 按照谷歌的建议优化CSS的交付

我一直在通过谷歌的网站速度测试仪运行我的网站

（）

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

“消除折叠内容上方的渲染阻塞JavaScript和CSS”

“优化CSS的交付”&“删除渲染阻塞JavaScript:

首先，我将一些CSS文件组合在一起，以减少对标记中外部CSS文件的调用量，并在除了jquery.min.js调用之外的所有javascript调用中添加了“defer”，因为这必须首先调用

这修正了谷歌告诉我要修正的一些例子。但我还有更多。我读到，将CSS放在标记中的HTML中可以解决这个问题。然而，我的CSS总共有18000行，这不是我的选择

然而，我突然意识到，我可以使用PHP includes在我的中包含我的.css文件，而不是传统的调用方法

现在我这样称呼我的CSS：

<style><?php include "css/style.min.css";?></style>

<link rel="stylesheet" href="/css/style.min.css">  

而不是像这样：

<style><?php include "css/style.min.css";?></style>

<link rel="stylesheet" href="/css/style.min.css">  

这使我的代码简洁整洁，谷歌似乎很喜欢它。我的网站现在选择了90/100的桌面和86/100的手机

我的问题是，由于包含了CSS和Javascript，我的页面的源代码现在非常庞大

在搜索引擎的眼中，这会对我的网站的性能产生任何不可预见的负面SEO影响吗

---

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

如果有相当数量的用户因为长时间的等待而离开你的网站，这对你的网站是不好的，同样在SEO方面，因为跳出率会更高，并影响你的整体排名

我的忠告是:

• 缩小并连接JS和CSS
• 不要将代码嵌入到
  中；相反，请使用

• 如果您的JavaScript和CSS文件很大，则需要使用模块化方法（例如：使用AMD for JS）。当需要时，您还可以动态地为CSS添加
  标记（查看一些）
如果使用像jQuery这样的普通JS库，请考虑使用流行的CDN。

---

我不会在

标签中包含网站的CSS。您正在增加站点每个网页的文件大小，CSS不会被缓存。使用

并设置适当的标题将缓存CSS。第一次访问时，首次下载文件时，性能会略有下降。在其他和将来的页面访问中，该文件将在缓存中（立即）可用。所以不，我不会做你做的事。如果可以的话，将JS文件移动到关闭标记之前，这包括jQuery，首先包括它。最小化DNS查找似乎会让Google满意。我想这是因为查找越少，页面加载越快。但是如果你像我一样，浏览器在每次加载页面时都要加载所有的CSS和JS代码，这可能会抵消这一点。我已经连接了我所有的CSS和JS。（这实际上是谷歌想让我解决的另一个问题）我得到的印象是，我的新方法不被推荐，所以我会改回，因为我的CSS文件很大，我会研究你关于动态添加标签的建议。感谢you@Kevlar很乐意帮忙！