Optimizing CSS can be challenging, especially when the CSS selector profiling in Chrome may distort results. It is advisable not to focus on CSS selectors unless your CSS file contains numerous unused rules, adding unnecessary bulk.

Prioritize resolving other issues before delving into selector optimization.

How to build web pages so they work in HTML first: starting with HTML, extra styles and features, using JavaScript.

Do not build your service as a single-page application (SPA). This is where the loading of pages within your service is handled by JavaScript, rather than the browser.
Single page applications rarely bring benefits and can make the service inaccessible.

Nolan faced a situation that required virtualization. He opted to utilize content-visibility instead for fast immediate gains.

A live demo to help you get a feel for the INP metric. Start interacting and watch the values update!

Tips for building Lightning Fast Web Applications!

Performance optimizations for the interaction to next paint metric and sharing the learning along the way

While the latency numbers may seem low by themselves, they compound quickly. For example, a network waterfall of depth 3 on a 300ms link leads to a total latency of 900ms.

How much HTML, CSS, and JavaScript can we really afford? More than in years past, but much less than front-end developers are burdening experiences with.

Recently I made a wall calendar with 12 request waterfalls for a conference, highlighting different web performance issues. This article goes through these waterfalls one by one and explains what they show.

Essentially, there are multiple different ways in which we can attribute a certain task to other tasks or to the party that initiated it.

Those different ways are not always obvious, because for the straightforward case, they all kinda give you the same answer. As a result, it took me a while to wrap my head around their differences, and I’m hoping to save someone some time by outlining them.

HAR files are JSON-formatted archive files used to log web browser interactions. Developers and IT professionals often use the performance data in HAR files to troubleshoot issues. We want to make it possible to troubleshoot with HAR files without the threat of a stolen session. The HAR File Sanitzer will remove sensitive data using “clientside” logic.

[…] I filed an issue on the WhatWG's HTML working standard asking the WhatWG to reinstate the feature in the HTML spec, which received some nice discussion from the community.

[…] What happens now is the change has made its way into the respective browsers' backlogs, which is awesome, but there's no indication of a timeline or priority for when the changes will be made.

[…] That is, if you're able to use streaming video protocols, by all means, do that!

Great explanation on how to generate and use as a background the smallest possible legitimate LCP image placeholder while waiting for our full-resolution image to arrive. While I admire the thoroughness of the article, I'm overcome by a feeling of sadness: I absolutely believe that this should be the role of a progressive image format, and not the shenanigans of front-end developers.

In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty 0 characters all lined up in a row).

But the width of the 0 character differs from font to font. So when our web font was swapped, the width of 1ch changed, which impacted our layout

There’s an tendency at times for organizations to treat performance as a checklist of sorts, particularly as we’ve seen the core web vitals metrics bring more attention to performance than ever before. You try to tick the box on those metrics to get them green, then call it a day. (This organization, to their great credit, did not do that.)

But none of that matters if those metrics aren’t painting a complete picture of how users interact with our sites.

Performance, like accessibility, is not about conformance.

It’s not about a checklist.

It’s not even about simply making things fast.

It’s about providing a better experience for the people using our sites and applications to make sure they can efficiently accomplish their goals. Doing that requires that we pay close attention to what those goals are, how they are trying to achieve them, and then making sure that the way we measure performance matches up.

How you order elements in the <head> can have an effect on the (perceived) performance of the page.
This script helps you identify which elements are out of order.

A beautiful letter to progressive enhancement.

While implementing third-party resources has downsides for performance and you should self-host your assets when possible, sometimes relying on external files is unavoidable. But be warned — using them can sometimes cause real headaches.

The only thing React is better at than other front-end frameworks is being popular. So how long will that self-perpetuating cycle continue?

New web services are being built to a self-defeatingly low UX and performance standard, and existing experiences are now pervasively re-developed on unspeakably slow, JS-taxed stacks. At a business level, this is a disaster, raising the question: why are new teams buying into stacks that have failed so often before?