3 ms·

It is also a degradation of UX to wait 10 seconds for a long page of images to load before you can read the first few lines of text - which most people won't w

It is also a degradation of UX to wait 10 seconds for a long page of images to load before you can read the first few lines of text - which most people won't wait, and then google punishes your page, then no one finds it, then page load speed doesn't matter I suppose when it's just you reloading your own page to not watch images load.

account42 2y ago
Images without loading="lazy" don't prevent the text from being rendered while loading.
- stevenicr 2y ago
  I think it depends on many factors actually. While there are other methods that can be used to defer / delay loading of images (and videos and others) - and there are methods to 'preload fonts' and tricks like font-swap css.. I do believe that deferring the loading of large or many images and other assets can increase the speed to which the browser shows things on the screen, and 'time to interactive'; how long before you can scroll or click. So depending on how a page is built, not doing anything to defer the loading of many images / other assets (that are not to be displayed 'above the fold' ) can increase or decrease the time it takes to render the text on the initial screen. "Lazy loading images and video reduces initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance." - [1] You may not notice this often if you have a fast internet connection, someone with a limited bandwidth, limited phone memory and the like may experience the issues more. I believe this is aggravated with layout shifts do to fonts loading late / changing and image height / width not being known until after loading.. I spend a not-so-insignificant amount of time using google's pagespeed testing (https://pagespeed.web.dev/analysis/https-www-netmeister-org-blog-cidr-allocations-html/x9yg7dnf54?form_factor=mobile https://pagespeed.web.dev/analysis/https-www-netmeister-org-... ) and other tools to find issues that can be enhanced to fix page load speed, and time to interact, etc.. in order to fix these issues for site pages that others may not notice using a fast connection or benefiting from cached imagery. "Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times." - [2] [1] https://web.dev/articles/lazy-loading https://web.dev/articles/lazy-loading [2] https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...
- semi 2y ago
  but you should specify sizing to prevent reflowing when it does load. but you should specify those either way.

account42 2y ago

Images without loading="lazy" don't prevent the text from being rendered while loading.

stevenicr 2y ago
I think it depends on many factors actually. While there are other methods that can be used to defer / delay loading of images (and videos and others) - and there are methods to 'preload fonts' and tricks like font-swap css.. I do believe that deferring the loading of large or many images and other assets can increase the speed to which the browser shows things on the screen, and 'time to interactive'; how long before you can scroll or click. So depending on how a page is built, not doing anything to defer the loading of many images / other assets (that are not to be displayed 'above the fold' ) can increase or decrease the time it takes to render the text on the initial screen. "Lazy loading images and video reduces initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance." - [1] You may not notice this often if you have a fast internet connection, someone with a limited bandwidth, limited phone memory and the like may experience the issues more. I believe this is aggravated with layout shifts do to fonts loading late / changing and image height / width not being known until after loading.. I spend a not-so-insignificant amount of time using google's pagespeed testing (https://pagespeed.web.dev/analysis/https-www-netmeister-org-blog-cidr-allocations-html/x9yg7dnf54?form_factor=mobile https://pagespeed.web.dev/analysis/https-www-netmeister-org-... ) and other tools to find issues that can be enhanced to fix page load speed, and time to interact, etc.. in order to fix these issues for site pages that others may not notice using a fast connection or benefiting from cached imagery. "Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times." - [2] [1] https://web.dev/articles/lazy-loading https://web.dev/articles/lazy-loading [2] https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...
semi 2y ago
but you should specify sizing to prevent reflowing when it does load. but you should specify those either way.