Sign in

Paul Irish

@paul.irish
5.8K followers 1.5K following 64 posts

web performance and DevTools, mostly. In '97 I wrote a paper for English class on HTML Image Maps. I haven't changed much since.

PostsRepliesMedia
Reposted by Paul Irish
Lea Verou, PhD @lea.verou.me · 19/05/2026
Thrilled this is out, keeping quiet has been SO HARD! 🤐 I’ve had the opportunity to contribute as a domain expert consultant over the past few months, and saw firsthand the level of thoughtfulness and care that went into it. Proud to have played a small part, and excited to see what folks build! ❤️
66010
Reposted by Paul Irish
Jon Kuperman @jonkuperman.com · 10/03/2026
Source maps are a vital part of modern web development, but the lack of a standard made it impossible for us to add new features or improve the debugging experience. This is the story of how we standardized source maps and how we continue to ship features through standards 📜 🧵
A JSON file representing a source map. The code contains:

{
  "version": 3, // Always the integer 3
  "file": "out.js", // Optional: name of the generated file
  "sourceRoot": "", // Optional: prefix prepended to each entry in "sources"
  "sources": ["foo.js", "bar.js"], // Required: list of original source URLs/paths (or null)
  "sourcesContent": [null, null], // Optional: inlined source text, aligned with "sources"
  "names": ["src", "maps"], // Optional: symbol names referenced by "mappings"
  "mappings": "A,AAAB;;ABCDE", // Required: encoded mapping data (base64-VLQ deltas)
  "ignoreList": [0] // Optional: indexes into "sources" considered "third-party"
}
58017
Reposted by Paul Irish
Bramus @bram.us · 16/01/2026
Vertical Tabs are available behind a flag in Chrome 145 (current beta) 1. Go to `chrome://flags/#vertical-tabs` 2. Set it to enabled 3. Relaunch Chrome 4. Right click the tabbar and choose “Move Tabs To The Side” Attached are before and after screenshots.
Chrome 145 with the flag enabled and showing the context menu to move the tabs to the sideChrome 145 with the tabs shown to the side (vertical tabs)
1512810
Paul Irish @paul.irish · 10/01/2026
Been loving NVIDIA's NeMo models recently to complement Whisper for transcription, but the startup felt a bit heavy. So I went on a profiling adventure! github.com/NVIDIA-NeMo/... Turned out to be fruitful… stoked to land a big optimization in NeMO. github.com/NVIDIA-NeMo/...
A flame chart of loading NVIDIA's flagship ASR model, Canary. Captured with viztracer and shown in trace.cafe. It shows the load takes 52 seconds only for 3s of inference! Several annotations point out some opportunities for optimization (redundant tar extract, config read/write thrashing etc)
21416
Paul Irish @paul.irish · 09/12/2025
I always prompt with "use modern CSS" but models rarely use *proper* modern, Baseline-y CSS. I want nesting, @layers, view transitions, oklch, light-dark(), etc. Does anyone have some prompt text which does a good job with this?
4150
Reposted by Paul Irish
Jake Archibald @jakearchibald.com · 16/10/2025
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...
jakearchibald.com
The present and potential future of progressive image rendering
Exploring progressive image rendering across JPEG, PNG, WebP, AVIF, and JPEG XL.
1517340
Reposted by Paul Irish
lynn @chordbug.bsky.social · 21/09/2025
forgot to put this up somewhere so here you go. visualize your favorite zlib stream! lynn.github.io/flateview/
2030196
Paul Irish @paul.irish · 03/08/2025
I joined the HTML Day festivities today and made a lil homage to the <progress> tag: paul.irish/2025-progres... 💪 @htmlenergy.bsky.social
paul.irish
ripple the <progress> html energy - drag the slider
2484
Reposted by Paul Irish
David Bisset @davidbisset.com · 24/07/2025
Why I 🧡 the web. drawafish.com Just draw the fish. Trust me. 🐟
A group of handdrawn fish.
10023051204
Paul Irish @paul.irish · 30/05/2025
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.
youtu.be
Performance debugging in DevTools
YouTube video by Chrome for Developers
0447
Reposted by Paul Irish
Bramus @bram.us · 29/05/2025
👀 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.
929856
Paul Irish @paul.irish · 28/05/2025
The Chrome DevTools Performance panel just leveled up! 🚀 Here's a 69-second taste of the new hotness.
69321
Reposted by Paul Irish
Sam Rose @samwho.dev · 12/05/2025
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.
modernfontstacks.com
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.
89315
Paul Irish @paul.irish · 06/05/2025
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.
Screenshot of https://blog.lmarena.ai/blog/2025/webdev-arena/ showing the system prompt, which includes:

> You are an expert frontend React engineer
>    - Create a React component for whatever the user asked you to create
>    - Use Tailwind classes for styling.
1355
Paul Irish @paul.irish · 19/03/2025
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 context menu in Google Docs, showing 'Copy as Markdown' and 'Paste from Markdown'. 
Yes, copying a table works nicely!
3350
Reposted by Paul Irish
Paul Kinlan @paul.kinlan.me · 17/03/2025
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...
google.com
Senior Developer Advocate, Chrome — Google Careers
25623
Paul Irish @paul.irish · 12/03/2025
🔐 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.)
190
Paul Irish @paul.irish · 07/03/2025
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 :)
7142
Reposted by Paul Irish
Barry Pollard @tunetheweb.com · 23/02/2025
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
1324
Reposted by Paul Irish
Addy Osmani @addyosmani.bsky.social · 02/02/2025
New in Chrome DevTools: Skip irrelevant scripts in the Flame Chart! Debugging is faster and more actionable 🙏
523938
Reposted by Paul Irish
Devon Govett @devongovett.me · 02/12/2024
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.
CSS code snippet:

.magic {
  --bg: red;
  background: var(--bg);
  /* Swap between white or black based on the background. */
  color: lch(from var(--bg) calc((50 - l) * infinity) 0 0);
}
1444056
Reposted by Paul Irish
Dave Rupert @davatron5000.bsky.social · 02/12/2024
They should put HTML in the browser
1715316
Paul Irish @paul.irish · 21/11/2024
@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. :)
3130
Reposted by Paul Irish
Bramus @bram.us · 19/11/2024
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
Chrome DevTools Screenshots, showing before (left) and after (right).
27921
Paul Irish @paul.irish · 15/11/2024
My last name being a TLD is finally paying dividends. (I just changed handle to the minimal @paul.irish) Thx ICANN! <3
453917
Paul Irish @paul.irish · 15/11/2024
Yup, I'm one of _those_ people. I'm sorry. :)
Screenshot of Chrome on Android. "Inactive tabs (1950)"
24884