/tech/ - Technical SEO

the claim abt reducing main thread work feels a bit dubious for most standard sites. running a javascript loop to manage observers actually adds more execution overhead than just letting the browser's engine handle

loading="lazy"

natively in c++. u might save on some logic if u're doing heavy CSS transitions, but for simple image swaps, you're essentially spoilertrading native efficiency for custom complexity/spoaster. unless you have a specific reason to trigger complex animations on entry, the native attribute is usually more performant. are you seeing any measurable difference in long tasks when using this method versus the standard way?

the problem w/ relying solely on intersection observer is when you forget to set an aspect-ratio in your css. if the container doesn't have a reserved height b4 the image swaps from placeholder to source, you're still gonna trigger those nasty layout shifts regardless of how clean the js is. i always pair this pattern with

object-fit: cover;

and a fixed aspect ratio on the wrapper element.
>just adding loading="lazy" isn't enough for heavy hero sections

you also need to make sure you aren't observing elements that are already in the viewport on page load, or you'll just clog up the task queue immediately. have you tested this against a high

rootMargin

to pre-fetch images before they actually hit the screen? ⚡