Performance-Testing the F1 websites

Jake Archibald has published a nice series in which he has been been performance-testing all F1 sites. Not only does he dig into waterfall charts, he also points out a few simple things that could be applied in order to improve overall loading performance. As a bonus he also tested the Google I/O site, which …

Web Vitals – Essential metrics for a healthy site

Web Vitals is a new great set of articles on Web.dev (by Google) focussing on delivering a great user experience on the web. To help developers focus on what matters most, they’ve selected a set of metrics which they call “Core Web Vitals”. The metrics that make up Core Web Vitals will evolve over time. …

“Building” by Jeremy Keith

The closing Keynote at Full Stack Europe 2019 was by no-one other than Jeremy Keith. At the conference he gave a talke named “Building”, a sort of compilation of his previous talks containing his “best of” on web development. Every new medium looks to what has come before for guidance. Web design has taken cues …

Telling the story of performance

Interesting approach by Clearleft on how they make performance clear to their clients. Instead of showing waterfall charts to their clients, they show them videos: Download the video of your client’s site loading. Then repeat the test with the URL of a competitor. Now take those videos and play them side by side. This is …

Tiny Helpers – A collection of useful online web development tools

Nice new single-purpose site by Stefan Judis, which lists single-purpose web development tools – such as the aforementioned CSS Grid Generator and Smooth Shadow Generator for example – in one single place. As detailed in a Twitter thread, the site is built using Eleventy, deployed to Zeit, and screenshots of the sites are automatically taken …

Move Fast & Don’t Break Things

Embedded above, but also available as a transcript, is Scott Jehl’s talk “Move Fast & Don’t Break Things” on how to keep your website performant. The talk starts of with Progressive Enhancement (of course!) and covers things such as Responsive Images, Native Lazy Loading of Images, font-display: swap;, Paint Metrics, etc. Move Fast & Don’t …