Unveiling the new WebPageTest UI
Today we’re super excited to pull back the curtains and unveil a new UI for WebPageTest—one we’ve been working on for a while now and that we think will make it a lot easier to use for WebPageTest power users as well as folks who are just getting started in their performance journey.
WebPageTest is definitely a power tool, and it was important to us that we didn’t lose the depth and accuracy of the data that we surface. So if you’ve been using WebPageTest for a while, don’t worry—everything is still there.
But being a powerful tool doesn’t mean we want to exclude folks who may not be familiar with WebPageTest, or may be newer to performance. Quite the opposite, in fact. We want to make it easier for everyone to be able to see how their sites perform and figure out what they can do to make them more usable, quick and resilient. So whether you are a front-end developer, performance specialist, SEO expert, marketer, product manager, or just someone who deeply cares about how great web experiences are delivered to users, WebPageTest is now more adaptable to your needs!
So a lot of what you’ll notice in the new UI is about better organization and making some of WebPageTest’s most valuable features a bit more easier to get to.
The filmstrip, one of the features folks seem to like the best, has been given some love. We’ve pulled the filmstrip page into the main navigation, rather than hiding it behind a link in the summary table as it was before. We’ve also pulled the filmstrip itself into the summary and detail pages, to give you that immediate visual feedback.
The homepage has been updated to make it a bit more apparent to new users what WebPageTest does. We’ve also made it easier to fire off a quick test, by providing a few simple configuration presets. The test form itself also got a bit of an update to make it easier to switch to our custom test types: the Core Web Vitals test type that drops you directly on our vitals debugging page, the traceroute test, and a dedicated Lighthouse-only test.
The test results pages have gotten a number of useful updates: a more prominent and easy to find screenshot of the page, more attention on the major performance metrics for any given test result, an easier to scan test header so that you can quickly spot the device, browser and location a test was run from and much more.
Also, if you have been used to going further into the test results and analyzing the various components that used to be horizontally laid out, fear not. They are not missing, they have been neatly folded into a drop down
This update also brings some significant clean-up and overall usability improvements for the mobile experience, making it easier to do your testing regardless of the device you're using.
Those of you with keen eyes may have noticed another change in the screenshots above—WebPageTest agents now let you test in Microsoft Edge!
The ability to test in multiple browsers is so important (it is called “web” performance testing, after all) and with Edge, the WebPageTest now supports testing in Chrome, Brave, Safari, Edge and Firefox (not to mention the nightly and developer versions of many of these browsers).
That’s part of the reason why you’ll see a few of these different browsers in the new Simple Configuration presets on the homepage itself — it’s important to us that we encourage folks to test their site across different experiences, and we want to make it as easy to do as possible.
anchorAnother step forward
WebPageTest has always taken the approach of making progress by regular, iterative updates and that’s what we see this as. It’s another step forward in an ongoing journey of making accurate, meaningful data readily accessible and usable to users everywhere.
There’s so much more coming! We’ve got some features and improvements coming in the next weeks and months that it is killing us not to talk about yet.
If you want to get more insight on this round of changes and the thinking that went behind it, tune into our WebPageTest Live stream today on YouTube and Twitch where Scott and I will do a live audit. Scott led the design and UI work and as we do our audit, he’ll help to point out some of the changes and the thinking that went into them.
Tim Kadlec is the Director of Engineering for WebPageTest, a web performance consultant, and trainer focused on building a web everyone can use. He is the author of High Performance Images (O'Reilly, 2016) and Implementing Responsive Design: Building sites for an anywhere, everywhere web (New Riders, 2012). He writes about all things web at timkadlec.com.@tkadlec