Native Lazy Loading

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

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