99.9. That’s the percentage of origins with a good First Input Delay score on desktop. Source: HTTP Archive Seeing these statistics, it’s easy to conclude that the web peaked in responsiveness. However, we all know that these numbers do not illustrate the real world. You’ve probably experienced a laggy or glitchy website at least once in the past week, right? The truth is that when everyone passes a metric, it’s one of two things: Everyone truly excels in what the metric measures The metric doesn’t do its job anymore Unfortunately, with FID, it’s the second one. Enter Interaction to Next Pa ..read more

Server-rendered Redux apps commonly have to transfer the store state from the server to the client. Transferring large states can be slow, so in 2019, Henrik Joretag benchmarked three approaches to figure out the most performant way: // "Plain object": window.__STATE__ = {"foo":"bar"} // "Invalid mime type": <script type="mime/invalid" id="myState">{"foo":"bar"}</script> window.__STATE__ = JSON.parse(window.myState.innerHTML) // "Just parse": window.__STATE__ = JSON.parse("{\"foo\":\"bar\"}") Back then, the “just parse” approach was the fastest one, much faster than “invalid mi ..read more

INP by Page Type At Speed Kit, we accelerate over 1,400 mostly e-commerce websites around the globe (see how Speed Kit works) and collect real-user data for validation in A/B tests and performance monitoring. We collected Interaction to Next Paint (INP) values on 780+ e-commerce websites this year, and I’d like to share with you the results of a little analysis I did for October 2023. While we didn’t collect attribution data at that time, we track data by page type, which allows us to see how different each type (i.e. product page, category page, etc.) performs in terms of responsiveness. Key ..read more

I’m a huge fan of Pagefind, the fully static search engine. The super cool thing about Pagefind is that it does not require an application server—you can host it on GitHub pages (which I’ve done in the demo below)! I currently use Pagefind on this very web site and on 11ty.dev. I wanted a way to control the asset loading of the component using <is-land> so I built a small web component wrapper called <pagefind-search>. Read more about <is-land> usage below. Demo Code on GitHub Usage # <script type="module" src="pagefind-search.js"></script> <pagefind-search ..read more

Play Video: Live Editing an Eleventy Project in CloudCannon with Bookshop Watch the full video on YouTube Microblog Source Code Microblog Demo Learn more about Eleventy and CloudCannon CMS CloudCannon Documentation: Introduction to Bookshop with Eleventy ..read more

In 2014 I made a fake W3C Specification Status Banner component. It’s now a web component instead. Web components are fun and I’m having fun. Demo Code on GitHub The mildly interesting thing happening in this component is that folks can decide whether or not they want to have fallback content. The following two samples render the same, but have different fallback experiences: <w3c-banner>W3C Candidate Recommendation</w3c-banner> <w3c-banner text="W3C Candidate Recommendation"></w3c-banner> This is accomplished via a <slot> with fallback content inside. this.s ..read more

Play Video: Static Feedback #11: All about Eleventy Watch the full video on YouTube Zach Leatherman joins Mike Neumegen to discuss the background of Eleventy (11ty) and what the future holds for this static site generator. Thanks for having me on, Mike! And for episode #11 too ..read more

Earlier this year, Google announced that Interaction to Next Paint (INP) is no longer an experimental metric. INP will replace First Input Delay (FID) as a Core Web Vital in March of 2024. Now that INP has arrived to dethrone FID as the responsiveness metric in Core Web Vitals, we've turned our eye to scrutinizing its effectiveness. In this post, we'll look at real-world data and attempt to answer: What correlation – if any – does INP have with actual user behavior and business metrics? Core Web Vitals background It's been more than three years since the Core Web Vitals initiative was kicked ..read more

..read more

At the Jamstack ZHUZH, we had a lovely panel discussion on the current and future status of the Jamstack ecosystem. Some stakeholders and detractors have declared the Jamstack “dead,” in part evidenced by the recent shuttering of the Jamstack Discord, the discontinuation of Jamstack Conf (as Netlify pivots toward the marketing term Composable and a new conference under that name), and the end of the Jamstack Community Survey. The evidence does support the claim that Netlify has moved on from shepherding the Jamstack (community/architecture)—which is fine! (and maybe preferable?) A post-Netlify ..read more