Lazy loading images

 Adding loading="lazy" and decoding="async" to images in a web page cut the time to load the page by a third.


The page has about fifty 800 x 600 images.


Adding decoding="async" makes the page 'flicker' as the text is shown before the image.


I thought about adding loading="lazy" to all my images and letting the browser decide which to show. But this is wrong as the 'above the fold' images will delay the 'first content paint'.


There are more tips at: bbingo.xyz/t

Comments

Popular posts from this blog

webkit-tap-highlight-color in CSS

Steve Jobs quotes