Dareboost Testing Fails - Showing Images are Loading Below the Fold

[dalecarter]

Hi there

We implemented lazy sizes as our lazy loading solution which for the most part works great. The test site using is surfsailaustralia.gtp-icommerce.com.au/subcatDisplay/Windsurfing .

We run tests on code quality on dare-boost and often it complains that images are loading below the fold unnecessarily. Previously we used lazy loading without this reported issue but upgraded to lazysizes.

We also tested your demo page http://afarkas.github.io/lazysizes/#examples in the dareboost.com and this was the same issue reported by dareboost.

5 images (757kB) are loaded too early
Load images above the foldline first, that means all the images that are visible without any scroll of the page by the visitor.

Webpage and images

Images use to represent more than 60% of the total weight of webpages. By loading initially the only images that are visible without page scrolling, you’ll reduce bandwith consumption as for your server and your visitors. If an image has to display after any visitor’s action (as scrolling) , then you’d better load it on demand, when necessary (lazyloading).

How to set up lazyloading?

You can get informations concerning the features and plugins proposed by your page’s frameworks/CMS. You should find some easy-to-set solutions. Some Javascript libraries could help you to implement lazyloading too.

Our Settings are
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
window.lazySizesConfig.expand = 300;

The question is, does the code need a settings tweak to pass the dareboost testing, or do you suspect it is a false positive in the testing.

Regards

Dale
DareBoost_report_577535810cf2570b62b94a4f.pdf

NOTE: The test was done using Google Chrome and it may be a browser specific issue. The issue was also reported when tested in Galaxy S6 mode.

[aFarkas]

The question is, does the code need a settings tweak to pass the dareboost testing, or do you suspect it is a false positive in the testing.

You can change it to pass the test, but I strongly recommend not to do this.

lazysizes has a more intelligent source loading mechanism than other lazyloader.

In general: Only loading images that are in view, can cause usability problems for user with slow connection. Users don't want to see how images are loading while they scroll your website. Images should be loaded instantly for them. Most lazyloader have an expand option, where the developer can expand the view so that near the view images are also loaded. But this can be also problematic, because if in view images and near the view images are loaded at the same time, loading those invisible images might decrease performance.

lazysizes instead loads in view images with a high priority and near view images with a lower priority. You can see this on your own site mentioned above:

The first 6 images are not loaded by lazysizes every other images are loaded by lazysizes. My browser was showing the first 4 images and therefore lazysizes loaded those with a high priority, after onload lazysizes pre-loaded the next two rows (8 images), so that the user doesn't have to wait as soon as he/she starts to scroll.

[dalecarter]

HI Alexander

Thanks for the clarification on this one.

Much appreciated.

We have incorporated lazysizes into our ecom framework along with the img-src code and you have done a great job.

We upgraded from lazy loading as your code incorpates better image handling at different sizes.

Regards

Dale

From: Alexander Farkas [mailto:notifications@github.com]
Sent: Friday, July 1, 2016 12:20 AM
To: aFarkas/lazysizes
Cc: Dale Carter; Author
Subject: Re: [aFarkas/lazysizes] Dareboost Testing Fails - Showing Images are Loading Below the Fold (#284)

The question is, does the code need a settings tweak to pass the dareboost testing, or do you suspect it is a false positive in the testing.

You can change it to pass the test, but I strongly recommend not to do this.

lazysizes has a more intelligent source loading mechanism than other lazyloader.

In general: Only loading images that are in view, can cause usability problems for user with slow connection. Users don't want to see how images are loading while they scroll your website. Images should be loaded instantly for them. Most lazyloader have an expand option, where the developer can expand the view so that near the view images are also loaded. But this can be also problematic, because if in view images and near the view images are loaded at the same time, loading those invisible images might decrease performance.

lazysizes instead loads in view images with a high priority and near view images with a lower priority. You can see this on your own site mentioned above:

[https://cloud.githubusercontent.com/assets/188254/16495627/9afcf148-3eee-11e6-8b3d-6f9518e551c7.png]https://cloud.githubusercontent.com/assets/188254/16495627/9afcf148-3eee-11e6-8b3d-6f9518e551c7.png

The first 6 images are not loaded by lazysizes every other images are loaded by lazysizes. My browser was showing the first 4 images and therefore lazysizes loaded those with a high priority, after onload lazysizes pre-loaded the next two rows (8 images), so that the user doesn't have to wait as soon as he/she starts to scroll.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com//issues/284#issuecomment-229710376, or mute the threadhttps://github.com/notifications/unsubscribe/AKs3033echV7grBCZdJXBOy1Gqjb-IJEks5qQ-yUgaJpZM4JCQ3j.

[dalecarter]

Hi Alexander

Good news for me. Dare boost agrees with your synopsis re lazysizes.

So that’s a big tick for you. : )

Regards

Dale

Begin forwarded message:

From: Rémi Damlencour remi.damlencour@dareboost.com
Subject: Re: FW: [aFarkas/lazysizes] Dareboost Testing Fails - Showing Images are Loading Below the Fold (#284)
Date: 5 July 2016 at 4:19:17 PM AWST
To: Dale Carter dale@gtp.com.au

Hi Dale,

Yes, we have to make some improvements here, the behavior of lazysizes is fully justified here. We will review this very soon.

Thank you for the feedback!

Rémi Damlencour

www.dareboost.com https://www.dareboost.com/

Le 04/07/2016 08:18, Dale Carter a écrit :

Hi Remi

Hope you are well. We switch to using lazysizes as we could better control the different image sizes and lazy loading at the same time.

IN the dare boost test, now sometimes we get a fail on more images loading than are seen

I asked lazysizes about this and his response is below.

I believe he indicates that loading a few images below the fold is ok in his opinion and they have high and low priority

Just thought I would bring this view to your attention.

Regards

Dale

From: Alexander Farkas [mailto:notifications@github.com mailto:notifications@github.com]
Sent: Friday, July 1, 2016 12:20 AM
To: aFarkas/lazysizes
Cc: Dale Carter; Author
Subject: Re: [aFarkas/lazysizes] Dareboost Testing Fails - Showing Images are Loading Below the Fold (#284)

The question is, does the code need a settings tweak to pass the dareboost testing, or do you suspect it is a false positive in the testing.

You can change it to pass the test, but I strongly recommend not to do this.

lazysizes has a more intelligent source loading mechanism than other lazyloader.

In general: Only loading images that are in view, can cause usability problems for user with slow connection. Users don't want to see how images are loading while they scroll your website. Images should be loaded instantly for them. Most lazyloader have an expand option, where the developer can expand the view so that near the view images are also loaded. But this can be also problematic, because if in view images and near the view images are loaded at the same time, loading those invisible images might decrease performance.

lazysizes instead loads in view images with a high priority and near view images with a lower priority. You can see this on your own site mentioned above:

https://cloud.githubusercontent.com/assets/188254/16495627/9afcf148-3eee-11e6-8b3d-6f9518e551c7.png
The first 6 images are not loaded by lazysizes every other images are loaded by lazysizes. My browser was showing the first 4 images and therefore lazysizes loaded those with a high priority, after onload lazysizes pre-loaded the next two rows (8 images), so that the user doesn't have to wait as soon as he/she starts to scroll.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #284 (comment), or mute the thread https://github.com/notifications/unsubscribe/AKs3033echV7grBCZdJXBOy1Gqjb-IJEks5qQ-yUgaJpZM4JCQ3j.

https://www.dareboost.com/