Higher Quality Screenshots with WebPagetest

Posted in Front End Engineering, Open Source, Web Performance, WebPageTest on by Rick Viscomi.

WebPagetest default image quality vs pngss=1

The advanced settings section of WebPagetest (WPT) includes a “Capture Video” option, which will record the page load of the tested web page as the user would see it. This makes it possible to provide visual performance metrics, such as visually complete time, visual progress percentage, and the filmstrip/video features on the Visual Comparison page. This is disabled by default, but once set it will be remembered the next time you visit the page. Even without this option, WPT still captures screenshots of the page at the start render, document complete, and fully loaded events.

These screenshots are saved as low-resolution JPEG images, which is usually good enough for most uses. However, sometimes you need to get a better look at what’s going on. Fortunately, WPT has you covered.

Full-Resolution PNG on Fully Loaded (pngss)

If you’re only interested in a clear view of the page after it has loaded completely, this option is right for you. All other screenshots during the page load are taken at default-quality JPEG levels. Here’s how to do it:

Public Instance

Tests initiated from webpagetest.org can be configured to save the final screenshot as a high-res image simply by setting the special pngss querystring parameter to 1.

http://www.webpagetest.org/?pngss=1

The open source PHP for the home page includes a condition to check the existence of this parameter then write its value to a hidden input element. When you hit the big “Start Test” button, this value is sent to the server and switches it into PNG mode for the final screen shot.

if (array_key_exists('pngss', $_REQUEST))
  echo "<input type=\"hidden\" name=\"pngss\" value=\"{$_REQUEST['pngss']}\">\n";

Public API

The public documentation of the API enumerates all of the parameters to the runtest.php script, which is the code responsible for initializing tests. One such parameter is, as expected, pngss. To enable the feature, we just need to set its value to 1. Here is an example jQuery code snippet to demonstrate how you might set this option when using the public API:

// Define the test parameters.
var params = {
  'url': 'jrvis.com',
  'location': 'Dulles:Chrome.Cable',
  'pngss': 1
};

// Start the test.
$.get('http://www.webpagetest.org/runtest.php', params, callbackFn);

Private Instance

In your settings.ini file, enable the pngss option and set its value to 1. In the file, it should look like this:

;save png full-resolution screen shots
pngss=1

When runtest.php executes, it will check for the existence of the pngss parameter set on the private instance home page or via the API. If not set, it will check the settings.ini file’s pngss option. To ensure that all private instance tests are run with this option, it’s a lot easier to set it once in the ini file as opposed to setting it for each test.

Image Quality (iq) for Screenshots and Video

Sometimes you need a clearer view of how your page is loading at every stage. As opposed to pngss, which saves a full-resolution screenshot of the fully loaded page, the iq parameter saves all screenshots as JPEGs but sets the compression level to your specification. By default, the compression level, or image quality, is set to 30. You can set this value to anything between 0 and 100 using the same mechanisms described for pngss, 100 being no compression (large file size, high image quality) and 0 being maximum compression (small file size, low image quality).

Be aware that higher resolutions result in larger file sizes. You may want to consider setting the image quality to 80%, which is almost imperceptibly different from the original quality and saves many bytes in storage.

Public Instance

http://www.webpagetest.org/?iq=80

Public API

// Define the test parameters.
var params = {
  'url': 'jrvis.com',
  'location': 'Dulles:Chrome.Cable',
  'iq': 80
};

// Start the test.
$.get('http://www.webpagetest.org/runtest.php', params, callbackFn);

Private Instance

; image quality (defaults to 30)
iq=80

Conclusion

WebPagetest gives you the ability to configure many more options than what you see on the home page. Explore the source code on GitHub and read the official documentation to learn more about configuring the tool for your particular use case.

One thought on “Higher Quality Screenshots with WebPagetest

  1. Pingback: Using a Heatmap to Assess Page Performance | WebPerf Ninja

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>