我正在使用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属性，但到目前为止，它们都没有帮助。
我应该仔细研究哪些元素，以便在展示内容之前解决这一漫长的等待时间？
颜色键在顶部。它仅告诉您正在加载哪种类型的资产，除了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的服务器比典型的计算机要慢，因此它们在等待阶段花费更多的时间，但是针对最坏的情况进行优化可能是个好主意。无论如何，这就是等待的全部内容。