Issue #466  (WebPageTest Review, JS Libs, Media, Uncats)06/23/22

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!

JavaScript Libraries and Frameworks

Million
A lightweight under 1kb Virtual DOM alternative that uses modern performance optimizations, has a sensible API, and is library-agnostic.

Zag
A collection of framework-agnostic UI component patterns like accordion, menu, and dialog that can be used to build design systems for React, Vue and Solid.js.

Nitro
Provides a powerful tool chain and runtime framework from the UnJS ecosystem to build and deploy any JavaScript server, anywhere.

Mahal
Simple, modern web application framework for UI development. Has no virtual DOM, is 21kb minified, two-way binding, and built-in TypeScript support.

Lexical
An extensible framework for building WYSIWYG editors that's fast and follows WCAG accessibility guidelines.
 
MindAR
An easy-to-use web augmented reality library that features image and face tracking, written in pure JavaScript, WebGL GPU rendering for performance.

Corset
Reactive UI without the complexity of SPA frameworks. Use any backend you like while binding to the HTML you already produced.

Twitch.JS
An unofficial object-oriented API to interact with Twitch IRC via predictable abstractions and strong performance.

Mailgun.js
A JavaScript SDK for Mailgun, the popular email service, built with Webpack, Babel, and ES6. Can be used in the browser (with a proxy) or Node.

Shader Park
A JavaScript library for creating interactive procedural 2D and 3D shaders using a P5.js style language and without the complexity of GLSL.

LemonadeJS
A reactive JavaScript micro-library (~6kb) that enhances the integration between the JavaScript (controllers) and the HTML (view) and supports two-way binding.
 

Media Tools (SVG, Video, etc.)

Clevertech: Experience Remote Work Done Right
We've been fully remote for over 20 years. All 500+ staff are 100% remote and we still grow vibrant relationships, and provide exceptional opportunities for career growth while working with stellar clients on ambitious projects.      SPONSORED 

Random Favicon Generator
Select a beautiful random favicon from the 1,900+ free, MIT-licensed, Tabler icons set. Select color, stroke width, and other styling properties to give a custom and unique look and feel.

Open Source JavaScript Gantt
A simple, interactive, modern Gantt chart library for the web with drag, resize, time scales, and more.

ffmpeg buddy
Online tool to help you build commands for FFmpeg, the popular tool for cross-platform audio/video streaming, recording, converting, etc.

Size Matters
A flexible and easy-to-use bulk image resizer that can resize and optimize your images to specific dimension and crop them proportionately. Free plan allows 3 images at a time.

Blob Animation
Generate code for an SVG-based continuously animated blog graphic. You can customize the animation speed and look and shape of the blob.

Svelvet
A lightweight Svelte component library for building interactive point-based flow diagrams.

openverse
From WordPress.org, a searchable database of more than 600 million images and audio files in the public domain or that are under a Creative Commons license.

CodeToImg
Online tool to generate pretty images of code for social media, documentation, etc. Includes lots of options to customize the look of the image.

ClipDrop Remove Background
Use AI to quickly remove an image's background, with a decent free plan that limits image size.

Image Comparison Slider
A JavaScript slider component that lets the user compare two images visually, with support for React, Vue, and Angular.

react-canvas-confetti
React component for canvas-confetti, a JavaScript-based utility to add a custom exploding confetti effect to a web page.

Random Users
Generate random user profile pictures and names to use as placeholders for your prototypes and design projects.

The Uncategorizables

Clevertech: Experience Remote Work Done Right
We've been fully remote for over 20 years. All 500+ staff are 100% remote and we still grow vibrant relationships, and provide exceptional opportunities for career growth while working with stellar clients on ambitious projects.      SPONSORED 

Dashy
An open source, highly customizable, easy to use, privacy-respecting dashboard app.

Nota
A programming language that compiles to JavaScript, for writing documents, like academic papers and blog posts.

Yep
A new search engine that built from the ground up with the goal of giving 90% of ad revenue to content creators.

Memlink
In-memory micro web pages that can be edited and shared. Click in the bottom-right area for a full explanation of this unique concept.

TinyWow
Dozens of online tools for converting, editing, and manipulating PDFs, images, videos, URLs, and lots more.

NocoBase
A scalability-first, open-source, no-code platform to build internal tools.

Consent-O-Matic
Browser extension that automatically fills out cookie popups based on your preferences.

LibRedirect
A web extension that redirects requests from YouTube, Twitter, Instagram, etc., to alternative privacy-friendly frontends and backends.

Metiss
A self-hosted open-source solution that understands the business context of your software and automatically generates tests for it.

Nginx Proxy Manager
Docker container for managing Nginx proxy hosts with a simple, powerful interface.

LaTeX.js
JavaScript LaTeX to HTML5 translator that includes a live playground you can try out.

VideoMentions Search
Search a YouTube channel to find videos that mention your brand, your product, or other topics of interest.

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

mave – Add video superpowers to your site using a single line of code.

Beak – A cross-platform, collaborative, API crafting tool that's fun to use.

Emerging Tech Brew – The future of tech in our 5-minute newsletter.    AD 

Photoinsight – Native windows app to manage your digital assets.

DesignSync.js – A Next.js template to create Next.js Sites with Webflow.

Tech Productivity – A weekly dose of tools and articles on productivity.    AD 

Cyclic.sh – Platform to host/deploy APIs and full-stack apps in seconds.
 

A Tweet for Thought

I see this sort of thing often. There seems to be a huge disconnect between recruiters looking for tech personal and the actual personnel doing the work.

 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

Now that everyone and their dog is opening a streaming service, you'll enjoy bookmarking JustWatch, a one-stop location to quickly find out which streaming service includes a particular movie or TV show you'd like to watch.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris