Paul Irish
@paul.irish
web performance and DevTools, mostly.
In '97 I wrote a paper for English class on HTML Image Maps. I haven't changed much since.
In '97 I wrote a paper for English class on HTML Image Maps. I haven't changed much since.
Reposted by Paul Irish
I dug into progressive image rendering and found a bunch of common assumptions aren't quite true.
➡️ JPEG & WebP progressive-renders worse in Safari
➡️ AVIF _does_ support progressive
➡️ But JPEG XL in Safari doesn't
➡️ JPEG XL decodes much slower than AVIF
⬇️ and more
jakearchibald.com/2025/present...
➡️ JPEG & WebP progressive-renders worse in Safari
➡️ AVIF _does_ support progressive
➡️ But JPEG XL in Safari doesn't
➡️ JPEG XL decodes much slower than AVIF
⬇️ and more
jakearchibald.com/2025/present...
The present and potential future of progressive image rendering
Exploring progressive image rendering across JPEG, PNG, WebP, AVIF, and JPEG XL.
jakearchibald.com
October 16, 2025 at 10:16 AM
I dug into progressive image rendering and found a bunch of common assumptions aren't quite true.
➡️ JPEG & WebP progressive-renders worse in Safari
➡️ AVIF _does_ support progressive
➡️ But JPEG XL in Safari doesn't
➡️ JPEG XL decodes much slower than AVIF
⬇️ and more
jakearchibald.com/2025/present...
➡️ JPEG & WebP progressive-renders worse in Safari
➡️ AVIF _does_ support progressive
➡️ But JPEG XL in Safari doesn't
➡️ JPEG XL decodes much slower than AVIF
⬇️ and more
jakearchibald.com/2025/present...
Reposted by Paul Irish
forgot to put this up somewhere so here you go. visualize your favorite zlib stream! lynn.github.io/flateview/
September 21, 2025 at 10:56 AM
forgot to put this up somewhere so here you go. visualize your favorite zlib stream! lynn.github.io/flateview/
I joined the HTML Day festivities today and made a lil homage to the
ripple the <progress> html energy - drag the slider
paul.irish
August 3, 2025 at 4:28 AM
I joined the HTML Day festivities today and made a lil homage to the
Reposted by Paul Irish
July 24, 2025 at 2:33 PM
My talk from I/O: a 10min jaunt jam-packed with DevTools Performance panel goodness. youtu.be/BHqxD9qr6Gw
Really proud of what we've landed in the past year, including JS bundle analysis, framework tracing APIs, auto-annotations, CrUX context, and deep insights.
Really proud of what we've landed in the past year, including JS bundle analysis, framework tracing APIs, auto-annotations, CrUX context, and deep insights.
Performance debugging in DevTools
YouTube video by Chrome for Developers
youtu.be
May 30, 2025 at 6:30 AM
My talk from I/O: a 10min jaunt jam-packed with DevTools Performance panel goodness. youtu.be/BHqxD9qr6Gw
Really proud of what we've landed in the past year, including JS bundle analysis, framework tracing APIs, auto-annotations, CrUX context, and deep insights.
Really proud of what we've landed in the past year, including JS bundle analysis, framework tracing APIs, auto-annotations, CrUX context, and deep insights.
Reposted by Paul Irish
👀 Coming to Chrome DevTools in Chrome 138: CSS Value Tracing
When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.
When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.
May 29, 2025 at 1:32 PM
👀 Coming to Chrome DevTools in Chrome 138: CSS Value Tracing
When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.
When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.
The Chrome DevTools Performance panel just leveled up! 🚀 Here's a 69-second taste of the new hotness.
May 28, 2025 at 5:38 PM
The Chrome DevTools Performance panel just leveled up! 🚀 Here's a 69-second taste of the new hotness.
Reposted by Paul Irish
Been annoyed by web fonts for a while. They’re big and they were connecting my blog to Google.
I stumbled on modernfontstacks.com earlier today and now I’ve ditched my web fonts in favour of these.
~140kb shaved off the first load of my site. First impressions matter.
I stumbled on modernfontstacks.com earlier today and now I’ve ditched my web fonts in favour of these.
~140kb shaved off the first load of my site. First impressions matter.
Modern Font Stacks
System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.
modernfontstacks.com
May 12, 2025 at 9:15 PM
Been annoyed by web fonts for a while. They’re big and they were connecting my blog to Google.
I stumbled on modernfontstacks.com earlier today and now I’ve ditched my web fonts in favour of these.
~140kb shaved off the first load of my site. First impressions matter.
I stumbled on modernfontstacks.com earlier today and now I’ve ditched my web fonts in favour of these.
~140kb shaved off the first load of my site. First impressions matter.
Is the WebDev Arena truly measuring webdev coding ability?
This ML coding benchmark *requires* React/Tailwind and completely breaks with vanilla JS/other frameworks.
The second-order implications of models competing on this narrow definition of frontend web development are rather troublesome.
This ML coding benchmark *requires* React/Tailwind and completely breaks with vanilla JS/other frameworks.
The second-order implications of models competing on this narrow definition of frontend web development are rather troublesome.
May 6, 2025 at 6:18 PM
Is the WebDev Arena truly measuring webdev coding ability?
This ML coding benchmark *requires* React/Tailwind and completely breaks with vanilla JS/other frameworks.
The second-order implications of models competing on this narrow definition of frontend web development are rather troublesome.
This ML coding benchmark *requires* React/Tailwind and completely breaks with vanilla JS/other frameworks.
The second-order implications of models competing on this narrow definition of frontend web development are rather troublesome.
Love how we're seeing more embrace of Markdown within non-developer apps, thanks to it being the lingua franca of LLMs.
The Markdown-y copy/paste hooks of Google docs have been super handy.
The Markdown-y copy/paste hooks of Google docs have been super handy.
March 19, 2025 at 10:30 PM
Love how we're seeing more embrace of Markdown within non-developer apps, thanks to it being the lingua franca of LLMs.
The Markdown-y copy/paste hooks of Google docs have been super handy.
The Markdown-y copy/paste hooks of Google docs have been super handy.
Reposted by Paul Irish
Great news. We have a new position on the team for a Developer Advocate at the intersection of Web, Chrome, ChromeOS and Android.
The position is in Waterloo - Canada
www.google.com/about/career...
The position is in Waterloo - Canada
www.google.com/about/career...
Senior Developer Advocate, Chrome — Google Careers
www.google.com
March 17, 2025 at 7:12 PM
Great news. We have a new position on the team for a Developer Advocate at the intersection of Web, Chrome, ChromeOS and Android.
The position is in Waterloo - Canada
www.google.com/about/career...
The position is in Waterloo - Canada
www.google.com/about/career...
🔐 If you're a Google Password Manager user, I find the UI in Chrome at `about:password-manager` is a *lot* faster and less annoying than the passwords.google.com one.
(Why is the web app so frustrating? Beats me.. I've filed bugs. I hope it improves, regardless.)
(Why is the web app so frustrating? Beats me.. I've filed bugs. I hope it improves, regardless.)
March 12, 2025 at 5:16 PM
🔐 If you're a Google Password Manager user, I find the UI in Chrome at `about:password-manager` is a *lot* faster and less annoying than the passwords.google.com one.
(Why is the web app so frustrating? Beats me.. I've filed bugs. I hope it improves, regardless.)
(Why is the web app so frustrating? Beats me.. I've filed bugs. I hope it improves, regardless.)
We've all seen visual regression tools that struggle with anti-aliasing, leading to repeated and noisy image diffs.
Meanwhile, a layout shift at the top of a page/screenshot creates a disproportionately large diff (vs one at the bottom).
Looking for quality, lightweight solutions in this realm :)
Meanwhile, a layout shift at the top of a page/screenshot creates a disproportionately large diff (vs one at the bottom).
Looking for quality, lightweight solutions in this realm :)
March 7, 2025 at 8:56 PM
We've all seen visual regression tools that struggle with anti-aliasing, leading to repeated and noisy image diffs.
Meanwhile, a layout shift at the top of a page/screenshot creates a disproportionately large diff (vs one at the bottom).
Looking for quality, lightweight solutions in this realm :)
Meanwhile, a layout shift at the top of a page/screenshot creates a disproportionately large diff (vs one at the bottom).
Looking for quality, lightweight solutions in this realm :)
Reposted by Paul Irish
This is going to be brilliant to normalise different devices (especially you lucky folks working on high-spec dev laptops and desktop machines).
Never knew whether to use 4x or 6x (or even the new 20x) slowdown? Now use the custom ones provided after a one-time calibration process.
#webperf
Never knew whether to use 4x or 6x (or even the new 20x) slowdown? Now use the custom ones provided after a one-time calibration process.
#webperf
New in Chrome DevTools: Accurately emulate CPU performance of a low/mid tier phone with Automatic CPU throttling calibration! 📲
This feature calculates slow-downs for your specific device. Wanted this for years! We just shipped it.
This feature calculates slow-downs for your specific device. Wanted this for years! We just shipped it.
February 23, 2025 at 11:23 AM
This is going to be brilliant to normalise different devices (especially you lucky folks working on high-spec dev laptops and desktop machines).
Never knew whether to use 4x or 6x (or even the new 20x) slowdown? Now use the custom ones provided after a one-time calibration process.
#webperf
Never knew whether to use 4x or 6x (or even the new 20x) slowdown? Now use the custom ones provided after a one-time calibration process.
#webperf
Reposted by Paul Irish
New in Chrome DevTools: Skip irrelevant scripts in the Flame Chart! Debugging is faster and more actionable 🙏
February 2, 2025 at 8:31 PM
New in Chrome DevTools: Skip irrelevant scripts in the Flame Chart! Debugging is faster and more actionable 🙏
Reposted by Paul Irish
Found a neat CSS trick to automatically swap between black or white text based on any arbitrary background color!
With relative color syntax, you can use calc to adjust the text color depending if the background is above or below 50% lightness in the LCH color space.
With relative color syntax, you can use calc to adjust the text color depending if the background is above or below 50% lightness in the LCH color space.
December 2, 2024 at 11:57 PM
Found a neat CSS trick to automatically swap between black or white text based on any arbitrary background color!
With relative color syntax, you can use calc to adjust the text color depending if the background is above or below 50% lightness in the LCH color space.
With relative color syntax, you can use calc to adjust the text color depending if the background is above or below 50% lightness in the LCH color space.
Reposted by Paul Irish
They should put HTML in the browser
December 2, 2024 at 11:07 PM
They should put HTML in the browser
@brianholt.me got any eng contacts at present-day Reddit? I want to fix two bugs that are in a component of mine they use. :)
November 21, 2024 at 6:58 PM
@brianholt.me got any eng contacts at present-day Reddit? I want to fix two bugs that are in a component of mine they use. :)
Reposted by Paul Irish
A while ago, @paul.irish and I tweaked the Chrome DevTools Performance Timeline to make it more easy for you to spot + debug non-composited animations.
- Non-composited animations are marked with red triangles
- Upon selecting, you now see the reason + relevant properties for why compositing failed
- Non-composited animations are marked with red triangles
- Upon selecting, you now see the reason + relevant properties for why compositing failed
November 19, 2024 at 10:58 AM
A while ago, @paul.irish and I tweaked the Chrome DevTools Performance Timeline to make it more easy for you to spot + debug non-composited animations.
- Non-composited animations are marked with red triangles
- Upon selecting, you now see the reason + relevant properties for why compositing failed
- Non-composited animations are marked with red triangles
- Upon selecting, you now see the reason + relevant properties for why compositing failed
My last name being a TLD is finally paying dividends. (I just changed handle to the minimal @paul.irish) Thx ICANN! <3
November 15, 2024 at 11:45 PM
My last name being a TLD is finally paying dividends. (I just changed handle to the minimal @paul.irish) Thx ICANN! <3
Yup, I'm one of _those_ people.
I'm sorry. :)
I'm sorry. :)
November 15, 2024 at 6:12 PM
Yup, I'm one of _those_ people.
I'm sorry. :)
I'm sorry. :)