Optimising Largest Contentful Paint

Harry Roberts takes a look at some more technical and non-obvious aspects of optimising Largest Contentful Paint: Largest Contentful Paint (LCP) is my favourite Core Web Vital. It’s the easiest to optimise, and it’s the only one of the three that works the exact same in the lab as it does in the field (don’t …

Tachometer – Statistically rigorous benchmark runner for the web

From the Polymer team: Tachometer is a tool for running benchmarks in web browsers. It uses repeated sampling and statistics to reliably identify even tiny differences in runtime. To compare two files, run it like so: npx tachometer variant1.html variant2.html Tachometer will open Chrome and load each HTML file, measuring the time between bench.start() and …

Partytown: Run Third-Party Scripts off the Main Thread in a Web Worker

The folks from builder.io set out to create a way to prevent Third-Party Scripts from blocking the main thread. The result is Partytown, which runs Third-Party Scripts Within a Web Worker. Partytown is able to sandbox and isolate third-party scripts within a web worker and allow, or deny, access to main thread APIs. This includes …

ct.css – Let’s take a look inside your <head>

Harry Roberts created a utility CSS file ct.css that x-rays your site’s <head>: Your <head> is the single biggest render-blocking part of your page—ensuring it is well-formed is critical. ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s <head> tags. <link rel="stylesheet" href="https://csswizardry.com/ct/ct.css" class="ct" /> The CSS basically adds display: …

Don’t attach tooltips to document.body

Very good performance deep dive on why you shouldn’t attach tooltips to document.body, but to a div that’s a direct child of the <body>. Tooltips in our app were taking >80ms. And during this time, the main thread was blocked, you couldn’t interact with anything. The main reason for the slowness of Tooltip was “Recalculate …

How to optimize ORDER BY RANDOM()

Doing a ORDER BY RAND() in SQL is bad. Very bad. As Tobias Petry details (and Bernard Grymonpon always used to tell at local meetups): Ordering records in a random order involves these operations: Load all rows into memory matching your conditions Assign a random value RANDOM() to each row in the database Sort all …

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 …

Too Many SVGs Clogging Up Your Markup? Try use

Good reminder by Georgi Nikoloff to have one (visually hidden) SVG that contains several layers, which you can then include further down in your code. SVG has a <defs> tag that lets us declare something like our graph footer just once and then simply reference it — using <use> — from anywhere on the page …

Debugging Layout Shifts

Over at web.dev, Katie Hempenius learns us how to identify and fix layout shifts using the Layout Instability API and the DevTools. What I take away from this is that you can easily spot them using DevTools: In the Rendering Panel you can enable an option to highlight areas of Layout Shift: To enable Layout …

JavaScript performance beyond bundle size

Nolan Lawson, on how we might focus too much on JavaScript bundle size: Performance is a multi-faceted thing. It would be great if we could reduce it down to a single metric such as bundle size, but if you really want to cover all the bases, there are a lot of different angles to consider. …