了解WebPageTest瀑布

Question

我正在使用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">

我试着使用这个preload属性，通过预加载一些js和一些图像(请求93-100)，但到目前为止都没有帮助。

在我的内容显示之前，我应该仔细查看哪些元素才能解决如此长的等待时间？

Answer 1

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

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

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

如果你看一下底部的“浏览器主线程”，它会告诉你在“等待”期间发生了什么。根据this的说法，有一堆布局正在发生。Chrome只需要在接收到所有CSS后的一段时间来处理它，然后才能继续加载页面。我认为webpagetest的服务器比一般的计算机慢，所以他们在等待阶段花费了更多的时间，但在最坏的情况下进行优化可能是一个好主意。无论如何，这就是等待的意义所在。