gpt4 book ai didi

javascript - 按照 Google 的建议优化 CSS 交付

转载 作者:塔克拉玛干 更新时间:2023-11-03 02:33:05 29 4
gpt4 key购买 nike

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

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

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

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

“优化 CSS 交付”“移除阻止呈现的 JavaScript:”

我首先将我的一些 CSS 文件组合在一起,以减少在我的 < head > 标签中调用外部 css 文件的数量,并且我向除了 jquery.min.js 之外的所有 javascript 调用添加了“延迟”必须先调用一个。

这修复了 Google 告诉我要修复的一些示例。但我还剩下更多。我读到将您的 CSS 放在 HTML 中的 标签内可以解决此问题。然而,我的 CSS 总共有大约 18,000 行,这对我来说不是一个选择。

然而,我突然意识到我可以使用 PHP include 将我的 .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 查找(这可能有助于在 Google 速度测试中获得更好的排名)但所有源代码不会被浏览器缓存(因为它会在页面请求时再次下载)。因此,如果您的用户访问您网站上可能使用相同资源的其他页面,他们可能会遇到响应缓慢的情况。

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

我的建议:

  • 压缩并连接 JS 和 CSS。
  • 不要将代码嵌入 <head> ;相反,使用 <link> .
  • 如果您的 JavaScript 和 CSS 文件很大,您需要使用模块化方法(例如:将 AMD 用于 JS)。您可以附加 <link>还可以在需要时即时为 CSS 标记(查看一些 library examples )。
  • 如果您使用 jQuery 等常见 JS 库,请考虑使用流行的 CDN。

关于javascript - 按照 Google 的建议优化 CSS 交付,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28412118/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com