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

Question

我正尝试在我的页面上通过 google 获得 pageSpeed 的良好结果。

我得到了不错的结果，但是将 CSS 和 JS 放在了页面底部。

但我遇到了问题:我的页面在没有 CSS 的情况下呈现，然后在加载 css 后正常呈现(它产生像页面闪烁一样)

我试图通过在 body 展示上添加样式来解决:无 然后添加 jquery document.ready 并使显示正常，但我的谷歌页面速度结果再次下降。

是否有解决方案/提示可以通过良好的页面呈现获得良好的 pageSpeed 结果。

Answer 1

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

速度绝对是您希望在网站中改进的地方，但这里的重点是访问者面前可用内容的速度有多快。您使用的资源最终会增加大小，这不应该与用户等待能够使用该页面的时间成正比。 关注感知性能。

位于 head 中的 CSS 文件当前存在什么问题？标签？

A:它们会在文件加载之前阻止渲染。

你能做些什么？

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

This specification defines the preload keyword that may be used with link elements. This keyword provides a declarative fetch primitive that initiates an early fetch and separates fetching from resource execution.

来源:w3

然而，这仍然没有得到浏览器的完全支持。 (浏览器支持 here )。

解决方案是使用 loadCSS这基本上是一个 polyfill。

The new <link rel="preload"> standard enables us to load stylesheets asynchronously, without blocking rendering, and loadCSS provides a JavaScript polyfill for that feature to allow it to work across browsers, as well as providing its own JavaScript method for loading stylesheets.

---

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

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

---

注释:

• 如果你沿着这条路走下去，一定要检查工具，比如 webpagetest.org测试感知性能。