Tagged: webpagetest

Using Filmstrip

Measuring and optimizing performance is an important part of website development. There are a couple of tools that are irreplaceable in the process, and also some that are just plain cool. :)  Filmstrip is one of the latter, but it is certainly very useful!

Filmstrip is a feature that shows exactly how the page looks during the loading of specific resources. This way we can actually see which resources make the page loading an unpleasant experience for the users, so we can do something about it.

WebPageTest is a valuable resource for testing website performance. Here we can test page loading using different browsers and a number of locations from around the globe.

The tool is easy to use. After entering a website URL and choosing an appropriate browser and location from which the test will be run, the test will start. When it finishes, we are presented with the statistics for the first view and repeat view (got after the reload). For both of them there are waterfall views, screen shots, filmstrip and even the whole video of the page load!

When you click on Filmstrip View, the page load waterfall is presented, as well as screen shots taken every 0.5 seconds. Observe how resources loading affects user experience and how the page is rendered at different points in time. By clicking on a resource in the waterfall, you can see the request and response details: DNS lookup time, time required for establishing initial connection, time to first byte, content download time, resource size etc. Analyze which resources block the page rendering and make a plan for how to fix the issue.

I’ve set up a short demo to show how to use WebPageTest. Check it here:

When it comes to filmstrip, WebPageTest has had this feature for some time already, but recently it was also introduced to Chrome Developer tools. At this point, it can be found only in Chrome Canary and honestly, you have to be a kind of a detective to enable and use it! Here is what you have to do:

1. First, install Chrome Canary if you haven’t already. You can download it from here. I recommend that you install it even if you are not interested in filmstrip, since it has some features that are not yet available in ‘regular’ Chrome browser Developer tools.

2. Type chrome://flags/ in the address bar. Don’t be intimidated by the message:

Careful, these experiments may bite

:)

Find the option Enable Developer Tools experiments in the list and enable it.

Enable Developer Tools Experiments

This step is necessary for the Experiments menu to be visible in Developer tools.

3. Press F12 or Ctrl+Shift+I to open Developer tools. Click on Settings icon.

Settings icon 

Settings

4. Go to Experiments tab.

Settings Experiments

5. Click Shift button 6 times to reveal hidden options.

Settings Experiments hidden

(Yeah, I know – Experiments option is by itself secret, and this is its even more secret part! But the Chrome team wanted to be sure that these features weren’t turned on by mistake.) Anyway, check the option Filmstrip in Network and Timeline Panel and you’re ready to go!

At this point, new options appear in Network and Timeline panel. By turning them on, you’ll be able to start using the Filmstrip feature.

In Developer tools Network panel you’ll notice the small image of a camera, which can be turned on or off, as required:

Network

Also, in Timeline panel, there is a ‘Screenshots’ check box:

Timeline

Finally, go to the page you want to analyze. Turn the Developer tools on and go to Network panel. Hit F5 to refresh the page. When the page loading finishes, the screen shots are presented below the menu bar. Important – and this applies to Timeline panel also: be sure that the focus during page refresh is on Developer tools window, not the whole browser window, or you won’t get any screen shots!

Network  filmstrip

You can double-click on a screen shot to see a magnified image of the page, taken at the specific moment during the page load:

Network screen shot details

Similarly, after the page reload, the screen shots are presented on the Timeline panel. By hovering over them, you can see how the page was loading in time.

Timeline dcreen shot

I have to say that I was pretty excited when I found out that the filmstrip feature has been introduced to Chrome Developer tools, but at this point I find it easier to use WebPageTest to get better (visual) overview of the page loading. We’ll see what the future Chrome DevTools releases will bring us.