Web Tools #466 - WebPageTest, JS Libraries, Media Tools, Uncats

Web Tools #466 - WebPageTest, JS Libraries, Media Tools, Uncats

Issue #466 • June 23, 2022

The following intro is a paid product review for WebPageTest, a suite of performance products and resources for developers and teams.

If you're a web developer who's shown even a passing interest in web page performance metrics, then you've more than likely heard of WebPageTest, the free testing solution for evaluating various web page performance metrics.

The platform has been well known for advanced customization options that let you test from different locations, using different browsers, and different connection speeds. The perf results can be examined via the popular Waterfall View or Filmstrip View, which I wrote about way back in 2014. And in recent years, there's the WebPageTest API that went public in 2021 as part of the Pro plan.

But this month, WebPageTest has made a huge upgrade to their Pro plan, adding a combination of powerful new features called Opportunities & Experiments.  As explained on their product page:

"With WebPageTest Pro, you get unlimited access to no-code experiments, which enable you to instantly test the impact of suggested optimizations, without changing your actual site."

Think about it: How many times have you done performance testing, gotten feedback on potential issues, but simply weren't sure how exactly how to fix the problem? Or maybe you had some feedback on how to fix it, but wanted to test it without touching your production code? Well, this powerful new feature lets you do exactly that.

I'm going to give this feature a test run using a couple of different websites that I own. One is a WordPress site, my main development blog. I like that WordPress is easy to use, but it's difficult to optimize because you're often at the mercy of third-party plugins. My blog isn't slow by any means, but it's also not nearly as optimized as I'd like, so this will be a good test case.

The other website is a really old custom-coded PHP-based website that I don't update very often and still has all the original HTML, CSS, and JavaScript and is pretty ad-heavy. It's definitely not optimized for performance, so I think this will serve as another good but contrasting example.

I'm going to start by running a performance test using the default settings, accessible from the WebPageTest home page. After the test finishes running, at the top of results page I can see the new Opportunities & Experiments feature, along with many of the usual metrics:

As you can see, my blog's performance is alright, but needs work. To get right into these new features, I'm going to click on the "Explore All" button next to "Opportunities & Experiments". This takes me to the full page for Opportunities & Experiments for this specific test run, with a breakdown under 3 categories:

• Is it Quick?
• Is it Usable?
• Is it Resilient?

Each of these sections shows me a list of items that passed (indicated with a green checkmark) or that need work (red exclamation point). Here's where the real power comes in: I can use the "Run This Experiment" options on individual problem items to see what impact specific changes will have.

I've selected a handful of items that I want to "experiment" with. You can view my result page here. Notice the before/after parallel video clip demonstrating that these Experiments will improve my page load speed by 0.7 seconds. Notice also the "Experiment Results" section that gives me a breakdown of how all my metrics have been impacted by the selected experiments.

As some people have already pointed out since the launch of these features, this really is a game changer! In my case, because my blog is on WordPress and runs various plugins, many performance fixes aren't easy (or even possible) to make without completely removing entire plugins. This new Opportunities & Experiments feature lets me experiment with various changes without touching any code.

Next I'll run the same test on the other older website. Because this one is a full custom-coded PHP site, I can make most of the changes suggested, so I'll enable all of the suggested experiments for this one.

As you can see, this one has lots of improvements across the board with the enabled experiments! In both cases, I now have lots of stuff to work on and some concrete examples demonstrating how I can make improvements. And again, this is great because it doesn't require any work on my actual websites until I decide what changes I want to implement. Of course, once I actually implement the changes, I might see varying results. These are only "experiments".

In the experiments I ran above, these were specific suggestions given by WebPageTest. But another cool feature that's part of experiments is Custom Experiments. When you run a test, you'll find this one at the bottom of the "Opportunities & Experiments" page.

Here you have three different categories of custom experiments you can run. For example, you can inject specific lines of HTML in the head or at the end of the body element. You can also replace instances of specific text, optionally using regular expressions. Under "Delivery Optimizations" there's a whole slew of asset delivery customizations you can try out including minifying CSS, adding/removing lazy loading on specific images, blocking specific requests, and lots more.

Overall, I'm sure you can see how these new features can have a huge impact on your ongoing performance testing. With the experiments, all your potential optimizations can be done without touching a line of code, helping you determine a solid path going forward for your production code.

Up until this point, I hadn't used WebPageTest for some time. As I mentioned earlier, it's been 8 years since I wrote something in-depth about the tool. The tool's design and UI has since improved greatly and it's much more usable. Of course, because there's so much you can customize, there will still be a bit of a learning curve in trying out all the features, including existing ones that have since been improved and redesigned.

When you register for a free account, you'll get Opportunities and one Experiment free. The Pro plan lets you use all the Experiments you want for the number of test runs you select (1000, 5000, etc). And if you already have a Pro plan for the WebPageTest API, you automatically get Opportunities & Experiments included.

For more info on these features check out Tim Kadlec's blog post and Scott Jehl and Jeena James on WebPageTest's YouTube channel.

Now on to this week's tools!