page speed
If you’ve spent any time testing the performance of your websites and applications, then at some point you may have come across WebPagetest.org. If you haven’t, then it’s well-worth checking out.
如果您花了任何时间测试网站和应用程序的性能，那么有时您可能会遇到WebPagetest.org 。 如果您还没有，那么值得一试。
WebPageTest.org seems to have just about every feature you could ask for when doing performance testing, and it was even praised by Steve Souders back in 2010 as a top tool in this area.
WebPageTest.org似乎具有执行性能测试时可能要求的几乎所有功能，甚至在2010年，史蒂夫·索德斯(Steve Souders)都称赞它为该领域的顶级工具。
In his post, Souders briefly mentioned a feature of WebPagetest.org that I think has gone relatively unnoticed: Filmstrip view. Paul Irish introduced me to this really cool feature in a chat a few weeks ago and I thought I would present it here.
Souders在他的帖子中简要提到了WebPagetest.org的一项功能，我认为该功能相对不为人知： Filmstrip view 。 几个星期前， 保罗·爱尔兰(Paul Irish)在一次聊天中向我介绍了这个非常酷的功能，我想我会在这里介绍它。
To use this feature, go to WebPagetest.org and enter a URL in the primary field. To demonstrate Filmstrip View in this article, I’m going to use the MLB.com home page — which will also serve as a friendly reminder that the greatest sport in the world is starting a new season very soon. :)
要使用此功能，请转到WebPagetest.org，然后在主字段中输入URL。 为了在本文中演示Filmstrip View，我将使用MLB.com主页 -还将友好地提醒您，世界上最伟大的运动即将开始一个新赛季。 :)
WebPageTest.org has a number of settings we could change on the initial entry page (e.g. browser to emulate, test location, connection speed, etc.) but we’ll just go with the defaults for this one. When we click the “Start Test” button, the test starts to run. When the test is complete, you should see something like this:
WebPageTest.org有许多设置，我们可以在初始输入页面上进行更改(例如，要模拟的浏览器，测试位置，连接速度等)，但我们只使用该设置的默认设置。 当我们单击“开始测试”按钮时，测试开始运行。 测试完成后，您应该会看到以下内容：
There’s already lots of good stuff to look at here, but we specifically want to focus on the “Filmstrip View” link found under the “Video” column, to the right of the first screenshot:
这里已经有很多不错的东西了，但是我们特别要关注第一个屏幕截图右侧“视频”列下的“电影胶片视图”链接：
Update: As some have pointed out in the comments, the “video” column that you see above may not be visible. If you’re visiting WebPagetest.org on Firefox or IE11, the default “Browser” chosen when you run the test is (for some odd reason) “IE9”. With that option, the “Video” column and thus the “Filmstrip View” link will not appear. Choose Chrome, Firefox, IE11, or another browser to see the Filmstrip view option.
更新：正如一些评论中指出的那样，上面看到的“视频”列可能不可见。 如果您正在Firefox或IE11上访问WebPagetest.org，则运行测试时选择的默认“浏览器”为(出于某种奇怪的原因)“ IE9”。 使用该选项，“视频”列以及“电影胶片视图”链接将不会出现。 选择Chrome，Firefox，IE11或其他浏览器以查看Filmstrip视图选项。
After clicking that link, you’ll be presented with the following (you might have to wait again):
单击该链接后，将显示以下内容(您可能需要再次等待)：
As you can see, the “filmstrip” feature shows us the progress of the page load from a visual standpoint, basically showing you what the user will see during the load process. As you scroll to the right in the filmstrip pane, you’ll see the rendering progress as new elements start to appear.
如您所见，“幻灯片”功能从视觉的角度向我们显示了页面加载的进度，基本上向您显示了用户在加载过程中将看到的内容。 在幻灯片窗格中向右滚动时，随着新元素开始出现，您将看到渲染进度。
But more importantly, the first filmstrip unit shown by default is where the page initially starts to render. If you scroll the filmstrip to the left, you’ll see the blank filmstrip units that represent the browser waiting for the page to start rendering:
但更重要的是，默认显示的第一个胶片单元是页面最初开始渲染的位置。 如果将幻灯片向左滚动，则会看到空白的幻灯片单元，它们代表浏览器等待页面开始渲染：
Based on what we see above, the MLB.com home page took approximately 1 second before anything that the user could see appeared on the page. But we can break this timing down even further. Notice the options below the filmstrip pane:
根据上面的内容，MLB.com主页花了大约1秒钟的时间才使用户可以看到的任何内容显示在页面上。 但是我们可以进一步打破这一时机。 请注意胶片面板下方的选项：
Here we can change the “Thumbnail Interval” to a tenth of a second, allowing us to see even more accurately when the page load switched from blank to the start of the visible render:
在这里，我们可以将“缩略图间隔”更改为十分之一秒，以便在页面加载从空白切换到可见渲染的开始时可以更准确地看到：
By comparing the screenshots, you can see that by changing the interval to “0.1 sec” we were able to more accurately observe that the page render begins at the 0.9s mark.
通过比较屏幕截图，您可以看到，通过将间隔更改为“ 0.1秒”，我们可以更准确地观察到页面渲染从0.9s标记开始。
So what can we do with this info?
那么我们该如何处理呢？
On the same page, you’ll see the waterfall chart displaying the page assets along with their respective load times:
在同一页面上，您将看到瀑布图，显示页面资产及其各自的加载时间：
The dark green line represents where the page render begins. The red line represents where the filmstrip has been scrolled to (this changes when you scroll in the filmstrip pane).
深绿色线表示页面渲染的开始位置。 红线表示幻灯片已滚动到的位置(当您在幻灯片窗格中滚动时会更改)。
MLB.com’s time of 0.9s for starting to render the page is very good. But it seems that there could still be improvements based on what we see in the waterfall and comparing that to the end of the blank frames in the filmstrip.
MLB.com开始呈现页面的时间为0.9秒。 但是，根据我们在瀑布中看到的内容以及将其与胶卷中空白帧的末尾进行比较，似乎仍然可以进行改进。
For example, there are a few CSS files and some scripts that load prior to when the page begins to render. If the scripts were loaded at the bottom of the page rather than in the head, and if the CSS was inlined, the page render might begin as early as 0.5s or better. One of the blocking scripts that is loaded at the bottom is inserted using document.write, which is probably part of the problem.
例如，在页面开始呈现之前，会加载一些CSS文件和一些脚本。 如果脚本加载到页面底部而不是页面顶部，并且内联 CSS，则页面渲染可能最早在0.5秒或更短的时间内开始。 使用document.write插入了底部加载的阻止脚本之一，这可能是问题的一部分 。
Try it out by testing your own pages. If you notice a significant delay of white frames prior to the initial page render (2s or more), then you may have to look into which resources are causing the delay and consider ways to optimize.
通过测试自己的页面来尝试一下。 如果在初始页面渲染之前注意到白色帧的显着延迟(2秒或更长时间)，则可能必须查看造成延迟的资源，并考虑进行优化的方法。
A related feature that you may have noticed in an earlier screenshot is the “Watch Video” link that appears below the “Filmstrip View” link when the initial test is completed. This feature, which is also available on the Filmstrip View page, lets you create a video that you can watch, so you can see exactly how the page rendered in real time.
您可能已经在较早的屏幕截图中注意到的一个相关功能是，在完成初始测试后，“观看视频”链接将显示在“ Filmstrip View”链接下。 在“幻灯片显示”页面上也可以使用此功能，该功能使您可以创建可以观看的视频，从而可以准确地看到页面的实时呈现方式。
You can view the video that I created when doing the test on MLB.com at this location and the Filmstrip page for this test can be found here.
您可以在此位置在MLB.com 上进行测试时查看我创建的视频，并且可以在此处找到该测试的Filmstrip页面。
Of course, what I’ve discussed briefly here regarding MLB.com is just my own superficial reading of the chart and I’m certainly not familiar enough with that website’s resources and processes to even begin to suggest improvements.
当然，我在这里简要讨论过的有关MLB.com的内容只是我对图表的肤浅解读，我当然对该网站的资源和流程还不够熟悉，甚至无法提出改进建议。
And it should be noted that a performance analysis like this one would be repeated many times and with different options, to ensure the problems observed can be replicated. My single test here may not give accurate results. But this just serves to illustrate how useful WebPagetest.org’s filmstrip view can be.
应当指出的是，这样的性能分析将被重复多次并采用不同的选择，以确保所观察到的问题能够被复制。 我在这里的单项测试可能无法给出准确的结果。 但这只是用来说明WebPagetest.org的幻灯片视图有多有用。
We should all be aware how important it is that pages load quickly. This feature in WebPagetest.org can help you make changes to your website’s performance that could have a profound impact on your website’s success.
我们都应该意识到页面快速加载的重要性 。 WebPagetest.org中的此功能可以帮助您更改网站的性能，从而可能对网站的成功产生深远的影响。
If you’ve had any experience with the Filmstrip View feature, I’d love to hear your thoughts in the comments.
如果您有使用Filmstrip View功能的任何经验，我很乐意在评论中听到您的想法。
More info:
更多信息：
Filmstrip View results for MLB.com
电影胶片查看MLB.com的结果
Speed Index – WebPagetest.org Documentation
速度索引– WebPagetest.org文档
Deciphering the Critical Rendering Path
解读关键渲染路径
翻译自: https://www.sitepoint.com/page-speed-soon-visitors-see-content/
page speed
