根据Google推荐的优化CSS交付

时间:2015-02-09 14:32:38

标签: javascript html css optimization seo

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

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

并尝试修复找到的所有问题。一个主要问题是强调红色作为必须解决的问题:

“在首屏内容中消除渲染阻止JavaScript和CSS”

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

我首先将一些CSS文件组合在一起,以减少对我的<外部css文件的调用量。头>标签和我添加“延迟”到我的所有javascript调用除了jquery.min.js之外,因为必须首先调用它。

这修复了谷歌告诉我修复的一些例子。但我仍然有更多。我读到将CSS放在HTML中的<头>标签修复了这个问题。然而,我的CSS总共大约有18,000行,这对我来说不是一个选择。

然而我突然意识到我可以使用PHP包括将我的.css文件包含在我的<头>而不是传统的方法来调用它们。

所以现在我这样称呼我的CSS:

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

而不是像这样:

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

这使我的代码简洁而整洁,谷歌似乎喜欢它。我的网站现在用于桌面的90/100和用于手机的86/100。

我遇到的问题是,由于包含CSS和Javascript,我的页面的源代码现在真的很大。

在搜索引擎眼中,这会产生任何无法预见的负面搜索引擎优化效果或影响我网站的表现吗?

我所做的不赞成了吗?

1 个答案:

答案 0 :(得分:3)

新方法的主要缺点是,如果您将CSS和JS包含在文件的头部,那么最小化DNS查找(这可能有助于在Google速度测试中获得更好的排名)但所有源代码将不会被浏览器缓存(因为它将在页面请求时再次下载)。 因此,如果您的用户访问了可能使用相同资源的网站的其他网页,则他们的响应速度会很慢。

如果由于漫长的等待而有相当数量的用户离开您的网站,这对您的网站来说并不好,也就SEO而言,因为跳出率会更高并影响您的整体排名。

我的建议:

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