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 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.

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.

Filmstrip View on WebPagetest.org

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 home page

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 complete

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:

Link to Filmstrip View

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.

After clicking that link, you’ll be presented with the following (you might have to wait again):

Filmstrip View

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:

Blank frames in Filmstrip view

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:

Thumbnail interval

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:

Thumbnail interval changed

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.

So what can we do with this info?

Analyzing the Data

On the same page, you’ll see the waterfall chart displaying the page assets along with their respective load times:

Filmstrip View waterfall

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.

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.

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.

Using the Video Option

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.

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.

Conclusion

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.

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.

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.

If you’ve had any experience with the Filmstrip View feature, I’d love to hear your thoughts in the comments.

More info:

Louis is a dev blogger at Impressive Webs, author, and is currently SitePoint's HTML and CSS editor. He loves all things front-end, and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.


  • http://www.growingwiththeweb.com/ Daniel Imms

    It’s a brilliant tool, definitely the most comprehensive out there currently. I just redesigned/upgraded my blog and with its help I cut above-the-fold loading time in half.

  • http://newsviews.satya-weblog.com/ Satya Prakash

    I could not find filmstrip view. I liked that after reading here but where is that. I cannot find the video column.

    • OsakaWebbie

      Same here – no Video column at all.

      • Clay Nichols

        I tried it several times and no filmstrip. Then went back a third time to make sure I had it set to Chrome (I did) and … it worked. Gotta love technology.

    • LouisLazaris

      I’m not sure how you guys are missing that…. Just follow what I say in the article. To be as specific as possible: Go here:

      http://www.webpagetest.org/

      Enter any URL in the big URL field. Don’t change any settings. Then hit “Start Test”. You’ll see the page will say “Testing…” Wait for the “testing” to be complete (sometimes up to a minute).

      After it’s complete, you’ll be brought to a page that looks like this: (2nd screenshot in article):

      http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/03/1393868077wpt-done.jpg

      On the right of the thumbnail, you should see “filmstrip view” in the “video” column. If you don’t see a “video” column, then I don’t know what to say… Maybe make your browser window bigger…??

      cc @OsakaWebbie:disqus @satya_prakash:disqus

      • tsolomons

        Also did not get the filmstrip view if you use the default browser option of IE9. However, if you set it to chrome, you’ll get the filmstrip view.

        • LouisLazaris

          @tsolomons:disqus You’re right! Wow, I didn’t realize that. There must be something about choosing other browsers that limits what they can do with that feature…? And oddly, when you visit in Firefox, the default browser is “IE9″, which hardly anyone uses now, so that’s not really helpful.

          I find if you choose Chrome or IE11, you get the “video” column. I also got the video column for Chrome on one of the mobile devices. But I didn’t test every option. IE9 must be tough to render in that fashion, or else they just didn’t want to bother with the overhead of dealing with older browsers for that feature.

          I’m going to update the article to reflect this.

          cc: @satya_prakash:disqus @OsakaWebbie:disqus

  • http://jigarjain.com/ Jigar Jain

    Is it possible that the priority of loading for different elements on web page would be different for different browsers ?

  • http://webdesy.com/ Vitaliy Kolos

    Thanks for the post and the info on how to use the tool. I’m sure that the data can be used by developers and marketers for properly loading site components so that the most important portions load faster and first.

Related books & courses
The Principles of Beautiful Web Design, 3rd Ed

Available on SitePoint Premium. Check it out now!