lazy loading in the new version -...

User 2699991 Photo


Registered User
4,782 posts
Online Now

Hello
unless I am missing something the lazy loading option can't be changed at different breakpoints, its either on or off

so the whole concept of "lazy loading" is that the browser doesn't actually load the image if it is below the fold (out of view for want of a better word), until that image comes just into view, or just below where it comes into view, therefore helping with the page loading speed, and or if the user never gets to those images below, then also saving bandwidths usage.

so on mobile device breakpoints if there are images "Below" the fold then they require lazy loading enabled, as one moves up, some of those images move up and are then no longer below the fold, therefore no longer need "Lazy Loading" enabled but if you then un-select the "enable lazy loading tick box, it applies is across all breakpoint, in other words on mobile device widths it also becomes disabled (which sort of defeats the object).

It's only a small thing and perhaps some would say what's wrong with having lazy loading enabled on images at all breakpoints, the answer is that it isn't considered to be good practice, and it sometimes can result in not a very good UX for visitors, especially if at larger device widths the image is quite large (resulting in an image loading progressively,

The whole idea of lazy loading is super and has been eagerly awaited to be available for us within Site Designer (except for writing ones own custom code to apply it which has been an option for some time)

and the last point, in my humble opinion. the option to enable "Lazy loading" should be the user's option to enable it, not as a default (due to the reason, that if it doesn't require lazy loading, then it hasn't got it, if the user decides that it needs lazy loading, then it is their choice not the other way around.

Just some thoughts
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 187934 Photo


Senior Advisor
20,181 posts

I use lazy loading on my Scuba diving app. I use it in all screen sizes as it sure does help with speed of loading. It's also a limited access site so there's only a few users that load it. I use the native loading="lazy" which I think is what SD is using. I added it after export. I would think you could use js to remove the attribute by screen size.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
4,782 posts
Online Now

Eric Rohloff wrote:
I use lazy loading on my Scuba diving app. I use it in all screen sizes as it sure does help with speed of loading. It's also a limited access site so there's only a few users that load it. I use the native loading="lazy" which I think is what SD is using. I added it after export. I would think you could use js to remove the attribute by screen size.


Yes I agree 100% I have used lazy loading for a long time now on sites that require it, placing the customised code required in the header etc.

My point is that MOST CC Site Designer users are not really code-savvy, (whatever the % maybe) so if CC is going to offer a simple way of adding LAZY LOADING (and they should 100% no doubt) then it really needs to be a simple operation for NON CODERS,

IE
Do I want this image to lazy load at this breakpoint?

answer = yes action = tick the box
answer = no ,, no aqction needed

One shouldn't expect them to start messing about with JS code etc in order to make it work sitewide

As for myself, I will continue to do it the way I have been doing it for a long time, ,
I was generalising for new users and existing users who should just be able to apply the option, without having to mess about under the hood so to speak.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 187934 Photo


Senior Advisor
20,181 posts

Maybe make it so users can apply lazy by class? I'm not sure if most users will need it. I could see making it apply at break points like other styling.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
4,782 posts
Online Now

Eric Rohloff wrote:
Maybe make it so users can apply lazy by class? I'm not sure if most users will need it. I could see making it apply at break points like other styling.


However they can make it, would be a better option than just on or off regardless of class name or breakpoint.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 379556 Photo


Registered User
1,533 posts

The following are just a few thoughts on lazy loading from having dabbled with it a bit.

The usual practice with lazy-loading is not to have it applied for the first few pictures (which, of course, need to load as soon as possible), but to apply it to the pictures that follow. It seem arguable that having lazy loading set as default means that one needs to remove the tick for just a few pictures rather than enter it for the remaining dozens (?) of pictures.

I say dozens of pictures because it is in such circumstances that lazy loading seems most beneficial. In other circumstances the difference in loading time may be imperceptible or nearly so.

How far below the fold a 'lazy-load' picture has to be before the loading takes place may be decided by the browser. One can watch when it happens by using a browser's Developer tools > Network > Images (as mentioned here). I'm therefore not sure how one would make a decision about lazy-load ticks and breakpoints.

Frank
User 2699991 Photo


Registered User
4,782 posts
Online Now

Frank Cook wrote:
The following are just a few thoughts on lazy loading from having dabbled with it a bit.

The usual practice with lazy-loading is not to have it applied for the first few pictures (which, of course, need to load as soon as possible), but to apply it to the pictures that follow. It seem arguable that having lazy loading set as default means that one needs to remove the tick for just a few pictures rather than enter it for the remaining dozens (?) of pictures.

I say dozens of pictures because it is in such circumstances that lazy loading seems most beneficial. In other circumstances the difference in loading time may be imperceptible or nearly so.

How far below the fold a 'lazy-load' picture has to be before the loading takes place may be decided by the browser. One can watch when it happens by using a browser's Developer tools > Network > Images (as mentioned here). I'm therefore not sure how one would make a decision about lazy-load ticks and breakpoints.

Frank


One makes the decision if the images are for want of a better description "out of view" below the height of the device viewport, which we can determine by simply looking at the canvas.

The debate amongst numerous bodies is still open as to whether or not one should have ALL images lazy loading, as this can result in not a nice UX for visitors, especially on mobile devices, and where the internet connection isn't up to speed.

I have also looked at one I did today with Site Designers new lazy load images above & below the fold, in developer tools for the major browsers and so far it doesn't seem to work, as in it still loads all the images above and below the fold regardless of whether or not they are ticked, so it doesn't seem to be just a simple matter of ticking or unticking the lazy load bit.

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2885740 Photo


Registered User
60 posts

The first time the topic 'loading=lazy' came up was in this post:
https://www.coffeecup.com/forums/site-d … lazy-load/

The way it is implemented in SD 5, v3446 is like this:
<div class="responsive-picture art-item materialboxed">
<picture>
<img alt="Alley" src="./img/xyz.jpg" loading="lazy">
</picture>
</div>

This is independent of any breakpoint. Lazy loading has to do with the height of the page and not with the width of the page.
More info you'll find under https://web.dev/browser-level-image-lazy-loading/



User 2699991 Photo


Registered User
4,782 posts
Online Now

René wrote:
The first time the topic 'loading=lazy' came up was in this post:
https://www.coffeecup.com/forums/site-d … lazy-load/

The way it is implemented in SD 5, v3446 is like this:
<div class="responsive-picture art-item materialboxed">
<picture>
<img alt="Alley" src="./img/xyz.jpg" loading="lazy">
</picture>
</div>

This is independent of any breakpoint. Lazy loading has to do with the height of the page and not with the width of the page.
More info you'll find under https://web.dev/browser-level-image-lazy-loading/





So who has said it's to do with anything but the width of the page
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 187934 Photo


Senior Advisor
20,181 posts

Wayan Jaya wrote:
Eric Rohloff wrote:
Maybe make it so users can apply lazy by class? I'm not sure if most users will need it. I could see making it apply at break points like other styling.


However they can make it, would be a better option than just on or off regardless of class name or breakpoint.

So your looking at more of a global setting instead of setting each image?

René wrote:
The first time the topic 'loading=lazy' came up was in this post:
https://www.coffeecup.com/forums/site-d … lazy-load/

The way it is implemented in SD 5, v3446 is like this:
<div class="responsive-picture art-item materialboxed">
<picture>
<img alt="Alley" src="./img/xyz.jpg" loading="lazy">
</picture>
</div>

This is independent of any breakpoint. Lazy loading has to do with the height of the page and not with the width of the page.
More info you'll find under https://web.dev/browser-level-image-lazy-loading/

I think it has more to do with the connection being viewed on. I don't lazy load for design. I lazy load for performance.
I would probably look at also detecting the users connection speed and change the lazy loading with that.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.