lazy loading in the new version -...

User 122279 Photo


Senior Advisor
13,733 posts

Wayan Jaya wrote:

So who has said it's to do with anything but the width of the page


You may have implied it yourself when you started bringing up viewports and breakpoints. ;)

But, we know that the 'fold' is at different positions depending on the device used, so if you look at it that way, it does have something to do with the width - the viewport width.
I have been following the process of the lazy loading in SD, and I have tested it and found that it is now working in the same way as the demo in the article found in René's link. Whether or not the first couple of images on a site are set to loading lazy, they do load first. And only the ones in view, and a couple of images that are supposed to come into view next, are being loaded without any scrolling. The best practice is, according to that article again, to give the images a dimension. To begin with, we had to use pixel dimensions and sacrifice the % and VW units, but our CC developers have found a way to solve that, so e.g. width: 100% + max-width: 1200px works fine. It even works without any kind of dimensions.

It would of course be great if some script could detect the viewport and 'place' the fold accordingly.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,242 posts

Wayan Jaya wrote:

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.

I had come to the same conclusion using the Developer Tools > Network > Images test, but I was wrong: I was testing on a project exported to a local hard drive. When the project was uploaded to the web the test showed it worked perfectly.

Frank
User 2699991 Photo


Registered User
3,706 posts
Online Now

Frank Cook wrote:
Wayan Jaya wrote:

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.

I had come to the same conclusion using the Developer Tools > Network > Images test, but I was wrong: I was testing on a project exported to a local hard drive. When the project was uploaded to the web the test showed it worked perfectly.

Frank

Yes I also figured that out so loaded it to one of my testing domains, still not performing, need do a bit more digging into image width and heights. But then I'm still sticking with the way I have been doing it for at least a year.
I'm just trying it out incase someone needs help.

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2885740 Photo


Registered User
57 posts

Eric Rohloff wrote:

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.

Right, performance only.

Eric Rohloff wrote:

I would probably look at also detecting the users connection speed and change the lazy loading with that.

The web browser is doing that for you already.

Frank Cook wrote:

I had come to the same conclusion using the Developer Tools > Network > Images test, but I was wrong: I was testing on a project exported to a local hard drive. When the project was uploaded to the web the test showed it worked perfectly.

To test the effects of lazy loading locally you could simulate more realistic connections by changing the settings in your dev. tools > network > disable cache and changing 'no throttling' to 'good 3G (Firefox) or 'slow 3G (Chrome).


User 379556 Photo


Registered User
1,242 posts

Thanks René.

The video near the top of https://web.dev/browser-level-image-lazy-loading/ particularly interested me. That test shows positively which images have loaded before scrolling down the page, and one sees the images loading in turn as one scrolls down the page.

Curiously in Windows 10 I achieved that test on the local hard drive on 19 February, but for reasons unclear that is no longer so, even with 'disabled cache' and changing the 'no throttling' to the setting mentioned.

It does work using web space or my local Abyss Web Server, which demonstrates clearly that the SD5 lazy loading works perfectly.

Frank

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.