search

VermontDepartmentOfHealth / docgov

some public facing standards, guidelines, and, well, documentation
https://docgov.netlify.app/
MIT License
3 stars 3 forks source link

Lazy Load offscreen images #100

Open KyleMit opened 4 years ago

KyleMit commented 4 years ago

Lighthouse brings up the suggestion to Defer offscreen images which substantially brings down Time To Interactive (TTI) on posts with images.

Native image lazy-loading for the web with loading attribute (caniuse)

<img src="celebration.jpg" loading="lazy" alt="..." />

JS - Tips for rolling your own lazy loading

Optionally - When on strong network connection, and feature detect that lazy loading exists, wait for page load and the prefetch remaining images ahead of time after TTI has been met.

KyleMit commented 4 years ago

Could leverage similar strategy to #96 where we override the renderer function

Markdown-it image parser rules & renderer rules

KyleMit commented 4 years ago

Once we add lazy loading, need to specify image dimensions

[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance