Pretty Visuals, Variable Reward and Web Performance
- 4 minutes read - 830 wordsA tale of variable reward
Feel free to google variable reward patterns and familarize yourself with them. Basically anything can become a pattern if you keep people guessing a little and reward them differently. Web Performance I suggest is full of this phenomenon at least it is for me and that is what this blog is about mostly trying to answer the question:
Why do I keep running those website tests?…
A selection of websites that I like that are linked on Morganwebdev.com and their loading process visualized with WebPageTest. Turn’s out I like pretty fast websites:
I have tried and engaged with several products and tools:
- Lighthouse (Browser, PageSpeed Insights, WebPageTest, CLI)
- Yellow Lab Tools (Free website tests, CLI)
- DebugBear (Free website tests, past trial subscription)
- WebPageTest (Paying subscriber)
- SpeedCurve (Trial subscription)
It all seemed to start in around 2017 when I was seeking a perfect score in lighthouse on my personal website. with the four rings in Lighthouse test or the four hundo’s as Eleventy describes them. This was how I was introduced into the web performance realm, running Lighthouse tests, and seeing the circles go red, yellow or green.
A 2017 test result where I got a perfect score for my progressive web app in Lighthouse
I have been on a web performance journey..
and it continues…
My current personal website in 2023 gets four hundo’s on desktop:
Why do I do this?
Well there are plenty of reasons why rationally why I might run these tests as a web developer but a lot of what I do on a computer is for irrational reasons. And when it comes to testing websites, there is plenty of variable reward that is frankly an irrational driver I notice in myself. I have tested website far in beyond what is relevant to my job.
Everytime you test a website its like “what are you gonna get?”. However you want to imagine it, there is a pause or a wait before a dramatic result when the measurements land on you.
And each test is visually different, with it’s own particular characteristics. There are many tests like this but this one is mine.
Everytime you run the test it could vary slightly, or significantly, depending on things like network conditions. And the settings of the test such as viewport or device capability. And so much more.
Chasing waterfalls
Waterfall chart of Morganwebdev.org
As I became more connected to others doing web performance, I found I was not the only one with a fascination for the charts and how to read them.
Matt Hobbs has created an epic, a saga, estimated over 140 mins long to read: How to read a WebPageTest Waterfall View chart.
Would you make something that goes for more than 140 minutes if it didn’t appeal to you in some way? bring you joy?
What is a waterfall chart?
A waterfall chart is a specific type of bar chart that reveals the story behind the net change in something’s value between two points. Instead of just showing a beginning value in one bar and an ending value in a second bar, a waterfall chart dis-aggregates all of the unique components that contributed to that net change, and visualizes them individually.
How could you imagine this process? Does it sound technical or possibly dry? Because for me every request and bar in the chart that is optimized to me feels like a small but fast rocket taking off.
Lifelines: Core Web Vitals
A test result from a site Im volunteering to fix
Like a heartbeat, the test result may have consequences too. Finding out whether your test subject gets enough data to qualify for Chrome User Experience Report data is another little tension riser that contributes to variable reward.
Race to the finish
A filmstrip comparing the websites for the Car Brands Ford, Honda, Chevrolet, Toyota and Mercedes Benz USA
There is an undeniable variable reward to loading beautifully engaging films of websites loading and comparing them. There is some psychology to this, as well as the business importance of web performance.
Real User Metrics: Rule the world!
One of the Real User Metrics Dashboards in Speedcurve, of Morganwebdev.org and Morganwebdev.com
It is one thing to say whether your website is getting traffic from somewhere in the world. But as far as the performance of the website goes it is another thing to be able to measure if your users are happy.
Dashboards like this catch my eye, my visual curious eye, even on my website with little traffic, and add to my sense of variable reward.
Conclusion
Web Performance is pretty neat. If you have a certain inclination for a puzzle with variable reward, running these tests can be an interesting past-time