PWA — progressive web app

[nichoth]

PWA

• Add to home screenhttps://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen
• Make them installable

See also

• web manifest
• service worker
• Add an 'install' link

Cloudinary + PWA

• https://cloudinary.com/labs/cloudinary-serviceworker
• https://gist.github.com/ukmadlz/5d55ca5f6c0d4233e193caad47403fe4

Lazy loading images

• MDN – Lazy Loading

The loading attribute on an element (or the loading attribute on an <iframe>) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.

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

• web.dev — Browser-level image lazy loading for the web

If you want to increase the fetch priority of an important image (for example the LCP image), then Fetch Priority should be used with fetchpriority="high".

Note that an image with loading="lazy" and fetchpriority="high" will still be delayed while it is off-screen, and then fetched with a high priority when it is nearly within the viewport. It would likely be fetched with a high priority in this case anyway, so this combination should not really be needed nor used.