I see a recurring performance problem on many ecommerce sites—the most important images on the page are being lazy loaded when they shouldn't be. You’re better off not implementing lazy loading at all than implementing it incorrectly.

With those things in place, you get experimental support for CSS anchor positioning, which lets you absolutely position an element in relation to any other element, anywhere in the DOM, essentially regardless of their markup relationship to each other, as long as they conform to a short set of constraints related to their containing blocks.

CSS types are a worthy investment into type safety in your front-end work. We're still awaiting cross browser interop, but we'll get there. Here's a preview of what CSS type safety can do, and what I'll be explaining.

We help Shopify merchants improve their web performance and see three common problems related to layout position: Lazy loading images above the fold; Asynchronous loading of CSS needed for elements above the fold; Not prioritizing the fetch of the the Largest Contentful Paint (LCP) image;

I wanted to share this guide to designing accessible focus indicators because focus styles are a recurring discussion I have with designers I work with on most projects, so I thought it would be useful to provide this guide as a helpful reference. This guide is aimed at both designers who want to learn about accessibility considerations for designing focus indicators, as well as developers who want to implement them.