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 uses an SPA approach. After 9 seconds of showing nothing, eventually a spinner is shown. At the 26 second mark (!) all data was prepared and done, and the page got rendered. As Jake puts it:

Imagine you went to a restaurant, took a seat, and 20 minutes later you still haven’t been given a menu. You ask where it is, and you’re told “oh, we’re currently cooking you everything you might possibly ask for. Then we’ll give you the menu, you’ll pick something, and we’ll be able to give you it instantly, because it’ll all be ready”. This sounds like a silly way to do things, but it’s the strategy the I/O site is using.

I really recommend you to read all posts thoroughly, as there’s a ton to learn from all this!

Who has the fastest F1 website in 2021? Part 1 →
Performance-testing the Google I/O site →

The 2020 Web Almanac

From the folks over at the HTTP Archive

The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 22 chapters spanning aspects of page content, user experience, publishing, and distribution.

Be sure to reserve some time for this, as this is a huge resource! A PDF version is also available.

The 2020 Web Almanac →
The 2020 Web Almanac PDF (23MB) →

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. The current set for 2020 focuses on three aspects of the user experience — loading, interactivity, and visual stability — and includes the following metrics (and their respective thresholds):

  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

The easiest way to quickly see these metrics is to use the Web Vitals Chrome Extension.

To get data from your visitors there’s the web-vitals library that you can use to store the data yourself (or in Google Analytics if you’re using that)

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

The best part of the whole Web Vitals series is that not only they tell you what the important metrics are, they also tell you what you can do to score better on each individual metric.

Once you’ve measured the Core Web Vitals and identified areas for improvement, the next step is to optimize. The following guides offer specific recommendations for how to optimize your pages for each of the Core Web Vitals:

Those three articles are packed with solid and actionable advice. Every web developer should read this. Twice.

Web Vitals →

“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 from centuries of typography and graphic design. Web development has borrowed metaphors and ideas from the world of architecture. Let’s take a tour of some of the most influential ideas from architecture that have crossed over into the web, from pattern languages to responsive design.

Together we’ll uncover how to build resilient, performant, accessible and beautiful structures that work with the grain of the materials of the web.

As expected it was a great talk. The fact that it mentions the timeless A Dao of Web Design should say enough.

🤩 Having frequented quite some conferences in the past decade I can tell you that this conference was really well organised and packed with good stuff. If you have the chance to attend the upcoming 2020 edition, I recommend you do.

I also had the honor of both giving a workshop and bringing forward a talk (even twice!) at Full Stack Europe 2019, for which I am very grateful.

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 so much more effective than showing a table of numbers! Clients get to really feel the performance difference between their site and their competitors.

Show. Don’t tell.

Telling the story of performance →

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 using Puppeteer.

The source is open, so you can add new services by opening a PR 🙂

Tiny Helpers →
Tiny Helpers Source (GitHub) →

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 Break Things (transcript)