TIL: HTML image lazy loading

#todayilearned #html #javascript

TLDR: Add loading=lazy to HTML images for the Browser to load them as the user scrolls

For my blog and personal site, I wanted images to lazy load in as you scroll down the page. This makes for a better reading experience when there are lots of images on a single page. It also stresses out my server less, as only the images people actually scroll to are ever downloaded.

In the past I've used various JS frameworks and tool to accomplish this, but now we can do it natively in HTML! All you need to do is add the loading="lazy" attribute to your images! MDN Attribute Link

CanIUse shows that there is ~93% compatibility for the loading attribute when applied to images. So for most of my use cases this will do perfectly! loading can also be applied to iframes but the browser compatibility for this is a bit lower at ~81%. [Mobile Safari on older versions is most of the difference here]

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.