0

我正在使用 WebPageTest 并且正在努力理解不同颜色的含义以及为什么显示我的图像需要这么长时间（几乎 2 秒）。使用 WebPageTest 瀑布视图，我可以看到很多“等待”。我只是不知道如何正确阅读瀑布并了解我的所有内容都在等待下载。

您可以在 WebPageTest 上看到我的测试结果：http ://webpagetest.org/video/compare.php?tests=190928_QX_41979a80ef721f72c65dba5363475192-r%3A1-c%3A0-l%3Awww.kaybojesen.dk%2F ，

我做了一些研究，发现我必须使用 preload 属性来解决这个问题：

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="img.jpeg" as="image">

我已经尝试通过预加载一些 js 和一些图像（请求 93-100）来使用这个 preload 属性，但到目前为止它们都没有帮助。

为了解决我的内容显示之前的漫长等待时间，我应该仔细查看哪些元素？

4

1 回答 1

0

颜色键位于顶部。它只是告诉您正在加载的资产类型，除了 DNS + 连接 + ssl 组合在一起构成了与域建立初始连接的过程。

Atelier 主题似乎并没有以性能为中心，但您仍然应该能够更快地加载内容。您可以解决的一件事是您可以确保只为每个页面加载必要的脚本/css。https://www.kaybojesen.dk/wp-content/plugins/instagram-feed/css/sb-instagram.min.css不需要在首页加载。某些项目，例如 cookie 通知，可以在其他所有内容之后加载。解决这个问题应该会给你带来很大的改进。您还可以从 CDN 加载 CSS/JS。如果您还没有这样做，请确保您正在使用一个好的缓存插件。

很容易发现其中一些问题，例如 cookie 通知加载过早。棘手的部分是找到可用于解决这些性能问题的插件或代码片段。

如果您查看底部的“浏览器主线程”，它会告诉您“等待”期间发生了什么。据此，发生了一堆布局。Chrome 在接收到所有 CSS 后只需要一些时间来处理它，然后再继续加载页面。我认为webpagetest的服务器比您的典型计算机慢，因此它们在等待阶段花费更多时间，但针对最坏的情况进行优化可能是一个好主意。无论如何，这就是等待的全部内容。

于 2019-09-28T21:49:31.747 回答