了解 WebPageTest 瀑布
Understanding WebPageTest waterfall
我正在使用 WebPageTest 并且正在努力理解不同颜色的含义以及为什么显示我的图像需要这么长时间（几乎 2 秒）。使用 WebPageTest 瀑布视图我可以看到很多 "wait"。我只是不知道如何正确阅读瀑布并理解我所有等待下载的内容。
你可以在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）来使用这个预加载属性，但到目前为止都没有帮助。
我应该仔细查看哪些元素，以解决我的内容显示之前等待时间过长的问题？
颜色键在顶部。它只是告诉您正在加载什么类型的资产，但 DNS + 连接 + ssl 组合在一起构成了与域建立初始连接的过程。
Atelier 主题似乎并没有以性能为中心，但您仍然应该能够更快地加载东西。您可以解决的一件事是，您可以确保只为每个页面加载必要的 scripts/css。 https://www.kaybojesen.dk/wp-content/plugins/instagram-feed/css/sb-instagram.min.css不需要在首页加载。某些项目（例如 cookie 通知）可以在其他所有内容之后加载。解决这个问题应该会给你带来很大的进步。您还可以从 CDN 加载 CSS/JS。如果您还没有这样做，请确保您正在使用一个好的缓存插件。
很容易发现其中的一些问题，例如 cookie 通知加载过早。棘手的部分是找到可用于修复这些性能问题的插件或代码片段。
如果您查看底部的 "browser main thread"，它会告诉您 "wait" 期间发生了什么。根据 this，发生了一堆布局。 Chrome 在收到所有 CSS 后只需要一些时间来处理它，然后再继续加载页面。我认为 webpagetest 的服务器比你的典型计算机慢，所以他们在等待阶段花费更多时间，但针对最坏的情况进行优化可能是个好主意。无论如何，这就是等待的意义所在。
我正在使用 WebPageTest 并且正在努力理解不同颜色的含义以及为什么显示我的图像需要这么长时间（几乎 2 秒）。使用 WebPageTest 瀑布视图我可以看到很多 "wait"。我只是不知道如何正确阅读瀑布并理解我所有等待下载的内容。
你可以在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）来使用这个预加载属性，但到目前为止都没有帮助。
我应该仔细查看哪些元素，以解决我的内容显示之前等待时间过长的问题？
颜色键在顶部。它只是告诉您正在加载什么类型的资产，但 DNS + 连接 + ssl 组合在一起构成了与域建立初始连接的过程。
Atelier 主题似乎并没有以性能为中心，但您仍然应该能够更快地加载东西。您可以解决的一件事是，您可以确保只为每个页面加载必要的 scripts/css。 https://www.kaybojesen.dk/wp-content/plugins/instagram-feed/css/sb-instagram.min.css不需要在首页加载。某些项目（例如 cookie 通知）可以在其他所有内容之后加载。解决这个问题应该会给你带来很大的进步。您还可以从 CDN 加载 CSS/JS。如果您还没有这样做，请确保您正在使用一个好的缓存插件。
很容易发现其中的一些问题，例如 cookie 通知加载过早。棘手的部分是找到可用于修复这些性能问题的插件或代码片段。
如果您查看底部的 "browser main thread"，它会告诉您 "wait" 期间发生了什么。根据 this，发生了一堆布局。 Chrome 在收到所有 CSS 后只需要一些时间来处理它，然后再继续加载页面。我认为 webpagetest 的服务器比你的典型计算机慢，所以他们在等待阶段花费更多时间，但针对最坏的情况进行优化可能是个好主意。无论如何，这就是等待的意义所在。