Writing

Image transitions are a technique used to animate images as they appear on screen. Examples include scaling or fading the image into view for visual flare. However, often these transitions are implemented in a way that causes a large degradation in performance and thus user experience.

We worked with Case-Mate to fix this issue on their website, resulting in a 6 second improvement in Largest Contentful Paint (LCP)! In this case study, we'll walk through the experience and the steps we went through to make this improvement.

Nice little review of JavaScript site generators by Zach. Couple standouts, to me:

• Of the 7 generators tested, only Astro and Eleventy default to 0kb of client-side JavaScript. More 0kb baselines, please.

• Three of the generators hide npm audit reports by default. (Basically, the opposite of "secure by default")

Jeremy writing about Clearleft's current conclusion around so-called "AI":

There’s no way that we’d use this technology to generate outputs for clients, but we certainly might use it to generate inputs.

I think this sums up the way I've been feeling about it so far (though struggling to phrase it as succinctly).

Like most, I've played with ChatGPT, Midjourney and similar things, purely out of curiosity, and I've paid attention to the example outputs I'm seeing from others. For me, the output continues to fall into that camp of "pretty good for a piece of technology but definitely has a distinct 'smell' about it".

I find, more often than not, that I understand something much less well when I sit down to write about it than when I'm thinking about it in the shower. In fact, I find that I change my own mind on things a lot when I try write them down. It really is a powerful tool for finding clarity in your own mind.

This. 100x, this.

I spent close to seven years in a marketing department on a content team as I wrote blog posts, ebooks, tweets, podcast episodes, magazine pieces, and slide decks among other things. Based on all that experience, I wanted to share some of the most important lessons I learned from my time there....

Drawing upon each model, I tried to roughly gauge the perf maturity of organizations, but found I needed a more visual aid — a map of perf work that I would help me identify where orgs are in their perf journey: what areas of performance there are and what level they are in those areas. So I drew up a “Performance Maturity Matrix” with four levels including a “null” level (i.e. lacking the traits of performance maturity) and nine areas of perf work.

It’s true that when you try to anticipate future harms, you won’t spot them all. But as the muscle gets stronger, your success rate improves and you develop better foresight senses. But even spotting some harms is preferable to not looking in the first place.

Owning your content on the web should not require extensive technical knowledge or special skills. It should be just as easy as signing up for a cellphone plan.

Max hits on the some of the same thoughts I've had regarding IndieWeb in the past. The whole Mastodon signup process was a stark reminder of the complexity involved. I consider myself a relatively smart person, but even with folks explaining it to me, I'm still not entirely clear on why I would choose one server over another and whether it matters at all. Choosing which server, for me, was just a moment of confusion and while it was a minor one that obviously didn't stop me from signing up, it's a point of friction that I'm sure puts an upper cap on Mastodon's potential for growth.

But like Max, I'm not so convinced mass adoption should be the goal....for any social platform honestly.

I had been using Twitter less and less over the last few years. If you set out to design a platform with the intention of it encouraging increasingly divisive hot-takes, you'd be hard pressed to do a better job of it than Twitter. The brevity of the posts, the immediacy of the feed, the little micro-doses of dopamine from seeing your content shared and liked...all of it encourages off-the-cuff hot takes and discourages anything resembling constructive conversation.

Maybe this is an opportunity not to just reset our social feeds and own our content, but to re-consider the power of social media to connect us and explore what it might mean to design an experience that is more calm and considered.

I've been saving links to my site for years now (albeit sporadically) and have been telling myself pretty much the entire time that I should really make those auto-post somewhere.

Matthias wrote about a really straightforward way of sending RSS to Mastodon, so gonna give this a shot.

(This is actually the first test...fingers crossed!)

Good little case study on how YouTube optimized their First Contentful Paint and Largest Contentful Paint by applying preload and fetchpriority to their poster image.

My favorite nugget is that they tested using an actual video thumbnail for their poster image versus a solid black poster image, and the black image performed better in user studies:

Using a solid black poster image showed the best results in user studies. Users found the transition from solid black to the first frame of the video to be a less-jarring experience for autoplay videos.

Given the higher page RPMs and subscriber conversion rates of a non-AMP page, pulling the plug on AMP looks like an easy win for both programmatic and consumer revenue. And most importantly, we regain full control of the user experience. And that’s perhaps the biggest upside.

It's no shocker I've never been a big fan of AMP. (My first post expressing concern about the approach AMP was taking was literally the day after the initial announcement.)

So naturally, I'm pleased to see folks moving on from it.

This post describes how the Netflix TVUI team implemented a robust strategy to quickly and easily detect performance anomalies before they are released — and often before they are even committed to the codebase.

This was a fun little trip down memory lane. Those BDConf events are still some of my absolute favorite memories, and so many of the speakers and attendees have remained good friends years later.

Really nice walkthrough about diagnosing and solving slow tooltips.

Philip takes a trip down memory lane with some fun stories from the early Yahoo! days around performance.

But most importantly, he suggests that the SEO carrot has tipped the focus of performance, and not for the better.

Sites that truly care about performance and the business impact of that performance, worked hard to make their sites faster.

This changed when Google started using speed as a ranking signal.

I made a similar point in a revamped version of my "Performance Budgets that Stick" talk the other week. If we want this burst of performance interest to stick, and to have the impact we want it to have for users, we're going to need to make it easier for folks to connect the dots between business metrics and performance.

But now, I find myself all consumed by the question, WHY are links blue? WHO decided to make them blue? WHEN was this decision made, and HOW has this decision made such a lasting impact?

I turned to my co-workers to help me research, and we started to find the answer. Mosaic, an early browser released by Marc Andreessen and Eric Bina on January 23, 1993, had blue hyperlinks. To truly understand the origin and evolution of hyperlinks though, I took a journey through technology history and interfaces to explore how links were handled before color monitors, and how interfaces and hyperlinks rapidly evolved once color became an option.

The computers sitting on our desks are incomprehensibly fast. They can perform more operations in one second than a human could in one hundred years. We live in an era of CPUs that can perform billions of instructions per second, tens of billions if we take multi-cores into account, of memory that can transfer data to the CPU at hundreds of gigabytes per second, of disks that support streaming reads of gigabytes per second. This era of incredibly fast hardware is also the era of programs that take tens of seconds to start from an SSD or NVMe disk; of bloated web applications that take many seconds to show a simple list, even on a broadband connection; of programs that process data at a thousandth of the speed we should expect. Software is laggy and sluggish — and the situation shows little signs of improvement.