Paul Irish

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.

5.8K followers1.4K following64 posts

Paul Irish reposted

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! ❤️

Chrome for Developers@developer.chrome.com

Ensure your coding agents build modern, fast & secure apps by default → goo.gle/3PcqfGj We just announced Modern Web Guidance at #GoogleIO. It injects AI-ready skills and modern features—with Baseline Widely Available fallbacks—so your agent stays up to date 🧵

Paul Irish reposted

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 📜 🧵

Paul Irish reposted

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.

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?

Paul Irish reposted

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.comThe present and potential future of progressive image renderingExploring progressive image rendering across JPEG, PNG, WebP, AVIF, and JPEG XL.

Paul Irish reposted

👀 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.

Paul Irish reposted

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.comModern Font StacksSystem 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.

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.

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.

🔐 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.)

You can add this Google Password Manager UI via a homescreen icon on Android, though it's kinda hidden in Chrome settings. On desktop, you can install as a PWA… but for me, "about:pa" in the URL bar will do the job quickly.

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 :)

Paul Irish reposted

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

Addy Osmani@addyosmani.bsky.social

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.

Paul Irish reposted

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.

Paul Irish reposted

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

You are up to date.