如何将良好的结果与谷歌页面速度结合并将css放在页面底部？

Question

我正试图在我的网页上使用google的pageSpeed获得良好的结果。

我得到了很好的结果，但在页面底部放置了CSS和JS。

但我遇到了问题：我的页面渲染没有CSS，然后在加载css之后正常渲染（它像页面闪存一样产生）

我尝试通过将样式放在正文显示上来解决：无 然后添加了jquery document.ready并将显示设置为正常，但我的谷歌页面速度结果再次下降。

是否有一个解决方案/提示可以获得良好的pageSpeed结果，并且具有良好的页面呈现效果。

Answer 1

不幸的是，对于HTTP / 1，我们被迫将所有css规则集捆绑到一个文件中以防止多个资源请求，HTTP / 2不会出现这种情况。

速度肯定是你想在网站上改进的东西，但重要的一点是访问者面前的可用内容有多快。您使用的资源最终会增加，这与用户等待使用页面的时间不成比例。 关注感知表现。

head代码中CSS文件的当前问题是什么？

答：它们会阻止渲染，直到文件加载完毕。

你能做些什么？

有一个规范涉及preload标记中使用的link关键字，以异步方式加载css文件。

  

此规范定义了可以使用的preload关键字   链接元素。此关键字提供声明性提取原语   启动早期提取并将提取与资源分开   执行。

来源：w3

然而，浏览器仍未完全支持此功能。 （浏览器支持here）。

解决方案是使用基本上是polyfill的loadCSS。

  

新的<link rel="preload">标准使我们能够加载样式表   异步，不阻塞渲染，并且loadCSS提供了   该功能的JavaScript polyfill允许它工作   浏览器，以及提供自己的JavaScript加载方法   样式表。

     

最后，通常提出的技术如下：

1. 加载具有关键css规则集的样式表，以便能够显示 向{* 1>} head标记中的用户信息（例如布局格式设置，这通常包括在内）。
2. 使用css规则集加载样式表，这些规则集对于将使用loadCSS加载的页面的初始呈现并不重要。

注意：

• 如果你沿着这条路走下去，一定要查看像这样的工具 webpagetest.org来测试感知到的表现。