This tool allows you to run free website speed tests from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

1.1.1 Mobile emulation mode


When setting up a test to run you can use the advanced settings to emulate a mobile browser.

Mobile emulation

This is will spoof the user-agent string reported to the website to be Chrome for mobile.

It also changes the viewport and screen dimensions of the captured output.

Tip:

This can be very useful if you serve a separate mobile website based on the accessing device or browser. Such as redirecting to a m.dot subdomain.

1.1.2 Waterfall view


Once you have ran a test you will be presented with the summary and details views. Click on the details view to view the waterfall chart from the test.

Waterfall view

Use the waterfall view from this test to answer the questions below:

  • How many kilobytes in size was the initial html file?
  • What time was the start render event fired?
  • How many open socket connections were there to the host news.bbcimg.co.uk?
  • How many 301 redirections where there on the page?
  • When did the socket connection chartbeat.js occur and why?

1.1.3 Filmstrip view


Whilst WebPageTest is recording your test results it captures screenshots of the browser screen at every frame. This data can then be presented as a filmstrip view for you to play back.

Filmstrip

Generate your own test or use the filmstrip view from this test to complete the tasks below:

  • At which frame was the brand logo painted to the screen.
  • Export the filmstrip as a video to playback later.
  • Use the horizontal scroll bar to see the correlation between the network waterfall and the painting to the screen. Note what happens when the last CSS file is downloaded.

Tip:

Exporting and saving the output video and image files on from the timeline can be very good to compare your website pre and post optimisations. Whilst also being a great resource to send to colleagues.

1.1.4 SPOF Advanced


A SPOF or "Single Point of Failure" is a when a core resource to your webpage fails to load. This can either prevent the page from rendering or make it entirely useless once rendered.

Due to the nature of the internet, networking often fails, even on domains that you have control of. The most common form of SPOF are from websites relying to heavily on 3rd party resources, this should be avoided at all costs.

Filmstrip

Using the SPOF tool on webpagetest.org. Try and create a SPOF to block the rendering of http://www.twitter.com

Warning:

It is a very common and good practice to load 3rd-[arty resources such as jQuery from external domains. Though doing so creates a tightly coupled reliance on that resource to always be available for your website to function. Always ensure you defend against the file not loading and prevent any SPOFs