- Does shadow DOM improve style performance? — Nolan Lawson covers how, because of the inherent encapsulation of the shadow DOM, the styling gets applied a bit faster than it would if those styling rules were relevant to the entire page. But as ever, it depends, and it turns out that classes and IDs are actually faster outside of it (?!), so if you just style with those, that’s the way to go.
- HTML-first, JavaScript last: the secret to web speed! — Miško Hevery is talking about Qwik and one of the things that makes it fast. I don’t know much about Qwik, but it looks like a JavaScript framework that is pretty SSR-friendly as it keeps state directly in the HTML/DOM (e.g.
div ::app-state="./AppState" app-state:1234="{count: 321}">), which you would think is slow, but apparently isn’t. - Small Bundles, Fast Pages: What To Do With Too Much JavaScript — Some thoughts from Ben Schwarz on what to do with those problematic big bundles. Make ’em smaller is the main game, then constantly keep an eye on them.
- Getting Your
headStraight: A New CSS Performance Diagnostics Snippet — We covered Harry’s super clever snippet a while back, but Vitaly had beaten us to it and it’s worth re-sharing because it’s awfully cool. - New HTTP standards for caching on the modern web — Tim Perry gets into two brand new (proposed) caching headers:
Cache-Statusand TargettedCache-Control. “These are designed to update HTTP standards to match the reality of the CDN-powered web that exists today, creating specifications that formalize existing practices from popular CDNs.” Feels like good stuff where web standards can come in and fix up a gnarly situation. - Optimizing resource loading with Priority Hints — Leena Sohoni, Addy Osmani, and Patrick Meenan talk about the Priority Hints…. uh… I’d call it an API except it’s really just an
importanceattribute in HTML, or a JavaScript param in other APIs. Here’s the draft spec. It’s one of those things, like responsive images withsrcset/sizesorwill-change, where you, the-author, know more than the browser does and allows you to give the browser information it needs to perform better. - Have Core Web Vitals made the web faster? — CWVs were announced in May 2020 and then we were told by May 2021 they would become a factor in SEO. Barry Pollard checks in to see if that big carrot (or stick?) has enticed us all to make sites faster en masse. The answer is complicated because the way CWVs are measured has changed in that time. Some measurements say yes, things are better. But if you use steady alternate measurements from before/after, things look worse. I all depends on what slice of the web you’re looking at.
- Improving performance with Islands Architecture and PostCSS — Astro has a cool feature for components—like
<Sidebar client:media={"(min-width: 768px)"} />—where that element isn’t loaded at all unless that media query matches. I might argue that’s only a good idea if it’s a heavy component or has JavaScript it requires. I say that because it seems like using it for something like static HTML would actually offset any potential savings, as extra JavaScript has to run to test the media conditions and then conditionally fetch assets. But anyway, Oliver Turner demonstrates how to share the media queries between your JavaScript and CSS (via PostCSS). - Image Optimizer — This is an Electron-powered (but macOS only) drag-and-drop image optimizer. Like ImageOptim, I suppose. Both are free.
Links on Performance V
Chris Coyier
on
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
Image Optimizer is super fast in comparison to ImageOptim. However, Image Optimizer uses pngquant which I’ve found very aggressive if image quality is a concern. ImageOptim also has additional options, which Image Optimizer does not. Choosing one over the other is going to vary upon use case.