Native Lazy Loading

A presentation at Web Directions Lazy Load by Anton Ball

Lazy Load Anton Ball ● Web Directions Lazy Load 2021 antonjb

<img src=”doughnut.jpg” alt=”…” loading=”lazy” /> <iframe src”…” loading=”lazy”> antonjb

Thank you antonjb

<img src=”doughnut.jpg” alt=”…” loading=”lazy” /> <iframe src”…” loading=”lazy”> antonjb

Sept 2019 Jan 2020 https://caniuse.com/loading-lazy-attr Feb 2020 Mar 2020 Apr 2020 antonjb

Develop > Experimental Features > Lazy Image Loading antonjb

73% global availability https://caniuse.com/loading-lazy-attr antonjb

Median Image Requests per page 26 desktop https://httparchive.org/reports/state-of-images 24 mobile antonjb

Median Image Transfer Size per page 948kb desktop https://httparchive.org/reports/state-of-images 902kb mobile antonjb

antonjb

addEventListener(‘scroll’, loadImages); Requires JavaScript Poor Performance Potentially unreliable antonjb

const imgObserver = new IntersectionObserver(loadImages); imgObserver.observe(imageToLoad); Requires JavaScript Browser Support antonjb

<img data-src=”doughnut.jpg” alt=”…” /> <noscript> <img src=”doughnut.jpg” alt=”…” /> </noscript> Maintenance antonjb

No JavaScript No NoScript Element Reliable preloading Decide whether to lazy load antonjb

loading: eager | lazy property value antonjb

e u l a v d i l a v n i d n a g n i s s i m , t l u a f e d loading: eager | lazy property value antonjb

native lazy load loading: eager | lazy property value antonjb

FORM FACTOR NETWORK SPEED LITE MODE CONNECTION STATUS antonjb

1 4G - 1,250PX 2 3G - 2,500PX 3 2G - 8,000PX antonjb

antonjb

NO THROTTLING SLOW 3G antonjb

When won’t it work? No Browser Support No JavaScript antonjb

antonjb

loading-attribute-polyfill https://github.com/mfranzke/loading-attribute-polyfill antonjb

<noscript class=”loading-lazy”> <img src=”…” loading=”lazy” width=”250” height=”150” /> </noscript> antonjb

if (‘loading’ in HTMLImageElement.prototype) { // supported } else { // unsupported } antonjb

<img src=”doughnut.jpg” alt=”…” loading=”lazy” /> antonjb

<picture> <source media=”(min-width: 800px)” srcset=”big-doughnut.jpg 1x, bigger-doughnut.jpg 2x”> <img src=”regular-doughnut.jpg” loading=”lazy”> </picture> antonjb

<iframe src”…” loading=”lazy”> antonjb

Gotcha #1 Above the fold loading above the fold 1 below the fo ld antonjb

Gotcha #2 Hidden iFrames e m a r f i n e d d i h antonjb

Gotcha #3 Background images i d un o r kg c a b e g ma antonjb

CSS Aspect Ratio Anton Ball ● Web Directions Hover 2021 antonjb

antonjb

Thank you antonjb

Anton Ball
@antonball

1 / 35

A conference called Lazy Loading must feature a talk on lazy loading! With native lazy loading introduced in Chrome 77 and other browsers following suite, now is a fantastic time to refresh on what’s available today.

We are going to look at how and where native lazy loading can be used, potential gotchas and how it can help improve your site performance both with images and JavaScript alike. You’ll come away from this talk with more knowledge on lazy loading even though the property appears deceptively simple at first glance.