New issue
Advanced search Search tips

Issue 846170 link

Starred by 8 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

LazyLoad: Defer loading below the fold images

Project Member Reported by rajendrant@chromium.org, May 24 2018

Issue description

LazyImages is a mechanism in Blink that defers images below the viewport from being loaded until they are likely to be viewed, in order to save data and speed up loading of the elements in the viewport. It will be used as part of the LazyLoad feature

LazyLoad design doc:
https://docs.google.com/document/d/1e8ZbVyUwgIkQMvJma3kKUDg8UUkLRRdANStqKuOIvHg/edit

LazyImages design doc:
https://docs.google.com/document/d/1jF1eSOhqTEt0L1WBCccGwH9chxLd9d1Ez0zo11obj14/edit

 
Labels: -Pri-3 Pri-2
Labels: -Restrict-View-Google -M-69 M-70
Project Member

Comment 3 by bugdroid1@chromium.org, Aug 10

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/793ff51fe9dd802b273896cebc056b81e6413419

commit 793ff51fe9dd802b273896cebc056b81e6413419
Author: rajendrant <rajendrant@chromium.org>
Date: Fri Aug 10 17:07:59 2018

LazyLoad: Add feature and flags for lazyloading image

Subsequent CLs will implement the feature.

Bug: 846170
Change-Id: Idf8e6352d3c0573a0cf014cc89b2f63251e26607
Reviewed-on: https://chromium-review.googlesource.com/1157143
Commit-Queue: rajendrant <rajendrant@chromium.org>
Reviewed-by: Scott Violet <sky@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582216}
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/chrome/browser/about_flags.cc
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/chrome/browser/flag_descriptions.cc
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/chrome/browser/flag_descriptions.h
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/content/child/runtime_features.cc
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/content/public/common/content_features.cc
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/content/public/common/content_features.h
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/third_party/blink/public/platform/web_runtime_features.h
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/third_party/blink/renderer/platform/exported/web_runtime_features.cc
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/third_party/blink/renderer/platform/runtime_enabled_features.json5
[modify] https://crrev.com/793ff51fe9dd802b273896cebc056b81e6413419/tools/metrics/histograms/enums.xml

Project Member

Comment 4 by bugdroid1@chromium.org, Aug 15

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/1b8c329849ba1d8aaa1094eef3eddadc9c25ec45

commit 1b8c329849ba1d8aaa1094eef3eddadc9c25ec45
Author: rajendrant <rajendrant@chromium.org>
Date: Wed Aug 15 02:27:51 2018

Allow cached responses for LoFi placeholder reloading

Update the placeholder image replacement mechanism to not forcibly bypass the
cache. This was implemented for server LoFi feature, and no longer needed.

The design doc has more explanation as well.
https://docs.google.com/document/d/1jF1eSOhqTEt0L1WBCccGwH9chxLd9d1Ez0zo11obj14/edit#heading=h.v3bc3q4jzwm4

Bug: 846170
Change-Id: I6cbbdc81528984bbd9c15da3e498e277a8c2cfca
Reviewed-on: https://chromium-review.googlesource.com/1166600
Reviewed-by: Hiroshige Hayashizaki <hiroshige@chromium.org>
Reviewed-by: Takashi Toyoshima <toyoshim@chromium.org>
Commit-Queue: rajendrant <rajendrant@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583136}
[modify] https://crrev.com/1b8c329849ba1d8aaa1094eef3eddadc9c25ec45/third_party/blink/renderer/core/loader/resource/image_resource.cc
[modify] https://crrev.com/1b8c329849ba1d8aaa1094eef3eddadc9c25ec45/third_party/blink/renderer/core/loader/resource/image_resource_test.cc
[modify] https://crrev.com/1b8c329849ba1d8aaa1094eef3eddadc9c25ec45/third_party/blink/renderer/platform/loader/fetch/resource.cc
[modify] https://crrev.com/1b8c329849ba1d8aaa1094eef3eddadc9c25ec45/third_party/blink/renderer/platform/loader/fetch/resource.h

Project Member

Comment 5 by bugdroid1@chromium.org, Aug 15

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/dfda8156158345d295f7d870772604b154a9fbdb

commit dfda8156158345d295f7d870772604b154a9fbdb
Author: rajendrant <rajendrant@chromium.org>
Date: Wed Aug 15 23:58:38 2018

LazyLoad: Add basic support for lazily loading image elements

This CL adds basic support (behind a flag) for deferring the load of html image
elements until the user scrolls near them, in order to reduce network data
usage, memory usage, and speed up the loading of other content on the page.

LazyLoadImageObserver is created per document and that holds an
IntersectionObserver to observe the <img> elements within the document. When
the IntersectionObserver detects that the deferred image element is within a
specific distance threshold of the viewport, it resumes loading the image.

Subsequent CLs will defer CSS background images as well, and configure the
hardcoded distance-from-viewport threshold from field trial.

See the design docs below for more info.

LazyImages design doc:
https://docs.google.com/document/d/1jF1eSOhqTEt0L1WBCccGwH9chxLd9d1Ez0zo11obj14/edit

LazyLoad design doc:
https://docs.google.com/document/d/1e8ZbVyUwgIkQMvJma3kKUDg8UUkLRRdANStqKuOIvHg/edit

Bug: 846170
Change-Id: I8c1024a4cdb19f3c6c700ae49eec6369b67b72b4
Reviewed-on: https://chromium-review.googlesource.com/1132573
Commit-Queue: rajendrant <rajendrant@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Reviewed-by: Hiroshige Hayashizaki <hiroshige@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583451}
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/WebKit/LayoutTests/VirtualTestSuites
[add] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/WebKit/LayoutTests/http/tests/lazyload/js-image.html
[add] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/WebKit/LayoutTests/http/tests/lazyload/lazy.html
[add] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/WebKit/LayoutTests/http/tests/lazyload/placeholder.js
[add] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/WebKit/LayoutTests/http/tests/lazyload/scroll.html
[add] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/WebKit/LayoutTests/virtual/lazyload-image/http/tests/lazyload/README.txt
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/dom/document.cc
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/dom/document.h
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/frame/local_frame.cc
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/frame/local_frame.h
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/html/BUILD.gn
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/html/html_image_element.h
[add] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/html/lazy_load_image_observer.cc
[add] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/html/lazy_load_image_observer.h
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/loader/document_loader.cc
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/loader/image_loader.cc
[modify] https://crrev.com/dfda8156158345d295f7d870772604b154a9fbdb/third_party/blink/renderer/core/loader/image_loader.h

Sorry for being daft, for these kinds of features is there a place to report example URLs of bugs/regressions? 
hi Dalan,

Yes. You could create a bug and assign to me (or to component Blink>Loader>LazyLoad).
Alternately, you could report the URLs here in the comments too.
Project Member

Comment 8 by bugdroid1@chromium.org, Aug 18

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7c08a1a3314edafd9c6bd53666f7ea972c7fb284

commit 7c08a1a3314edafd9c6bd53666f7ea972c7fb284
Author: rajendrant <rajendrant@chromium.org>
Date: Sat Aug 18 00:10:34 2018

Split placeholder image load checks and enables

Refactor the MaybeAllowImagePlaceholder() and MaybeAllowLazyLoadingImage()
functions to checks and enable the placeholder request bit separately.

This will help with lazyloading of CSS background images.

Bug: 846170
Change-Id: I07dd50db59287c290ff0a7f0cc726dc23ed882e8
Reviewed-on: https://chromium-review.googlesource.com/1178637
Commit-Queue: rajendrant <rajendrant@chromium.org>
Reviewed-by: Scott Little <sclittle@chromium.org>
Reviewed-by: Nate Chapin <japhet@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#584252}
[delete] https://crrev.com/57ffd0ad37791e6a1843bbd9aa6de0d7da4e8607/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite-expected.png
[delete] https://crrev.com/57ffd0ad37791e6a1843bbd9aa6de0d7da4e8607/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite-expected.txt
[delete] https://crrev.com/57ffd0ad37791e6a1843bbd9aa6de0d7da4e8607/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite.html
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/core/css/css_image_set_value.cc
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/core/css/css_image_value.cc
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/core/frame/local_frame.cc
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/core/frame/local_frame.h
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/core/frame/local_frame_test.cc
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/core/frame/settings.json5
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/core/loader/document_loader.cc
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/core/loader/image_loader.cc
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.cc
[modify] https://crrev.com/7c08a1a3314edafd9c6bd53666f7ea972c7fb284/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.h

Project Member

Comment 9 by bugdroid1@chromium.org, Aug 18

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/461114aebb2953d0b15d0eb0b13d8237f37147dc

commit 461114aebb2953d0b15d0eb0b13d8237f37147dc
Author: rajendrant <rajendrant@chromium.org>
Date: Sat Aug 18 01:42:20 2018

Revert "Split placeholder image load checks and enables"

This reverts commit 7c08a1a3314edafd9c6bd53666f7ea972c7fb284.

Reason for revert: Formatting issues

Original change's description:
> Split placeholder image load checks and enables
> 
> Refactor the MaybeAllowImagePlaceholder() and MaybeAllowLazyLoadingImage()
> functions to checks and enable the placeholder request bit separately.
> 
> This will help with lazyloading of CSS background images.
> 
> Bug: 846170
> Change-Id: I07dd50db59287c290ff0a7f0cc726dc23ed882e8
> Reviewed-on: https://chromium-review.googlesource.com/1178637
> Commit-Queue: rajendrant <rajendrant@chromium.org>
> Reviewed-by: Scott Little <sclittle@chromium.org>
> Reviewed-by: Nate Chapin <japhet@chromium.org>
> Reviewed-by: Fredrik Söderquist <fs@opera.com>
> Cr-Commit-Position: refs/heads/master@{#584252}

TBR=fs@opera.com,japhet@chromium.org,sclittle@chromium.org,rajendrant@chromium.org

Change-Id: Ic71a202d73e4cdb4154e55e04e12faca70d19ba7
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 846170
Reviewed-on: https://chromium-review.googlesource.com/1179354
Reviewed-by: rajendrant <rajendrant@chromium.org>
Commit-Queue: rajendrant <rajendrant@chromium.org>
Cr-Commit-Position: refs/heads/master@{#584279}
[add] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite-expected.png
[add] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite-expected.txt
[add] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite.html
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/core/css/css_image_set_value.cc
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/core/css/css_image_value.cc
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/core/frame/local_frame.cc
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/core/frame/local_frame.h
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/core/frame/local_frame_test.cc
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/core/frame/settings.json5
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/core/loader/document_loader.cc
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/core/loader/image_loader.cc
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.cc
[modify] https://crrev.com/461114aebb2953d0b15d0eb0b13d8237f37147dc/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.h

Project Member

Comment 10 by bugdroid1@chromium.org, Aug 22

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/037dd7049bb4a1eddc14bc7d5343da4aa95414a3

commit 037dd7049bb4a1eddc14bc7d5343da4aa95414a3
Author: rajendrant <rajendrant@chromium.org>
Date: Wed Aug 22 20:46:29 2018

Split placeholder image load checks and enables

Refactor the MaybeAllowImagePlaceholder() and MaybeAllowLazyLoadingImage()
functions to checks and enable the placeholder request bit separately.

This will help with lazyloading of CSS background images.

This is reland of below CL which had some formatting issues in local_frame.cc
https://chromium-review.googlesource.com/c/chromium/src/+/1178637

Bug: 846170
Change-Id: I9cf76d6e938a798d91b42d265964ad0c981054a1
Reviewed-on: https://chromium-review.googlesource.com/1180597
Commit-Queue: rajendrant <rajendrant@chromium.org>
Reviewed-by: Nate Chapin <japhet@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585236}
[delete] https://crrev.com/06e87ea841b1f426f16470e2d02e15cbd543b4cb/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite-expected.png
[delete] https://crrev.com/06e87ea841b1f426f16470e2d02e15cbd543b4cb/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite-expected.txt
[delete] https://crrev.com/06e87ea841b1f426f16470e2d02e15cbd543b4cb/third_party/WebKit/LayoutTests/http/tests/previews/client-lofi-sprite.html
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/core/css/css_image_set_value.cc
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/core/css/css_image_value.cc
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/core/frame/local_frame.cc
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/core/frame/local_frame.h
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/core/frame/local_frame_test.cc
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/core/frame/settings.json5
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/core/loader/document_loader.cc
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/core/loader/image_loader.cc
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.cc
[modify] https://crrev.com/037dd7049bb4a1eddc14bc7d5343da4aa95414a3/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.h

Project Member

Comment 11 by bugdroid1@chromium.org, Aug 23

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/e501e9db043caddee974b588c71b19e5c2a6f090

commit e501e9db043caddee974b588c71b19e5c2a6f090
Author: rajendrant <rajendrant@chromium.org>
Date: Thu Aug 23 19:33:54 2018

Rename PlaceholderImageRequestType to ImageRequestOptimization

This rename enables adding a DeferImageLoad for css background images

Bug: 846170
Change-Id: I5c243e3560ae222742c08a6ac18ebb6cb859b37f
Reviewed-on: https://chromium-review.googlesource.com/1178686
Commit-Queue: rajendrant <rajendrant@chromium.org>
Reviewed-by: Nate Chapin <japhet@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585574}
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/css/css_image_set_value.cc
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/css/css_image_set_value.h
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/css/css_image_value.cc
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/css/css_image_value.h
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/css/resolver/element_style_resources.cc
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/css/resolver/element_style_resources.h
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/frame/local_frame_test.cc
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/loader/resource/image_resource.cc
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/core/loader/resource/image_resource_test.cc
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.cc
[modify] https://crrev.com/e501e9db043caddee974b588c71b19e5c2a6f090/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.h

Project Member

Comment 12 by bugdroid1@chromium.org, Aug 24

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518

commit 8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518
Author: rajendrant <rajendrant@chromium.org>
Date: Fri Aug 24 05:41:14 2018

LazyLoad: Add support for css background images

This CL defers the loading of CSS background images. StyleResolver
registers the element to LazyLoadImageObserver so that when the
element is scrolled near the viewport, full image will be
triggered.

The image load is deferred using ResourceFetcher::ResourceNeedsLoad()
and the full image load is triggered via ResourceFetcher::StartLoad().

Bug: 846170
Change-Id: If90bf69e4583e4d8ff8006485c10229c3dca22f2
Reviewed-on: https://chromium-review.googlesource.com/1161208
Commit-Queue: rajendrant <rajendrant@chromium.org>
Reviewed-by: Hiroshige Hayashizaki <hiroshige@chromium.org>
Reviewed-by: Nate Chapin <japhet@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585705}
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/css/css_image_value.cc
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/css/resolver/element_style_resources.cc
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/css/resolver/element_style_resources.h
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/css/resolver/style_resolver_state.cc
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/html/lazy_load_image_observer.cc
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/loader/resource/image_resource.cc
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/loader/resource/image_resource_content.cc
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/loader/resource/image_resource_content.h
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/loader/resource/image_resource_info.h
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/style/computed_style.cc
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/style/computed_style.h
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/style/style_fetched_image.cc
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/style/style_fetched_image.h
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/core/style/style_image.h
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/platform/loader/fetch/fetch_parameters.h
[modify] https://crrev.com/8a834caa42fc5ed0f0fa0fa7f4a36f24741e9518/third_party/blink/renderer/platform/loader/fetch/resource_fetcher.cc

Project Member

Comment 13 by bugdroid1@chromium.org, Aug 29

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d8026346bbf3912253dde2af73266153481c6be4

commit d8026346bbf3912253dde2af73266153481c6be4
Author: rajendrant <rajendrant@chromium.org>
Date: Wed Aug 29 08:08:39 2018

LazyLoad: Make lazy image loading distance threshold configurable

This CL makes the distance-from-viewport threshold that controls how
close the user has to scroll to a deferred image configurable via
--blink-settings and field trial params. Different distance threshold
values can be specified for different effective connection types and
data saver settings, so that e.g. a larger distance threshold can be
specified for slower networks to give images more time to load in, or
e.g. a shorter distance threshold could be specified for data saver
users to save some more data.

Bug: 846170
Change-Id: I7996dc4e90970adfde6f83826095a2e7f78eda9e
Reviewed-on: https://chromium-review.googlesource.com/1186263
Reviewed-by: Kinuko Yasuda <kinuko@chromium.org>
Commit-Queue: rajendrant <rajendrant@chromium.org>
Cr-Commit-Position: refs/heads/master@{#587039}
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/chrome/browser/chrome_content_browser_client.cc
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/content/public/common/web_preferences.h
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/content/renderer/render_view_impl.cc
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/third_party/blink/public/web/web_settings.h
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/third_party/blink/renderer/core/exported/web_settings_impl.cc
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/third_party/blink/renderer/core/exported/web_settings_impl.h
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/third_party/blink/renderer/core/frame/settings.json5
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/third_party/blink/renderer/core/html/lazy_load_image_observer.cc
[modify] https://crrev.com/d8026346bbf3912253dde2af73266153481c6be4/third_party/blink/renderer/core/html/lazy_load_image_observer.h

I gave this a try and it's not doing what I'm expecting, or maybe I misunderstand the feature. 

Chrome Canary 70, with chrome://flags/#enable-lazy-image-loading enabled. I open this page in responsive mode in dev tools (iPhone 5):

https://www.eon.earth/

Next I monitor requests in the network panel. Without any scrolling, all images on the entire page are loaded over the network, whilst I explicitly set lazyload="on" on the images in the main grid of the page. 

I do get the [intervention] message in the console: 
[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://crbug.com/846170

What I would have expected is that images way down the page aren't loaded until I scroll close to them, but this doesn't seem to be happening. Am I missing something?
Hi Ferdy,

That particular website (https://www.eon.earth/) uses service-workers, and the images are fetched by the service-worker. These fetches would not be lazyloaded.

The behavior I see is that, the first time the page is loaded (when there is no cache and service-worker not installed) the images are lazy loaded.

Subsequent loads generally get the image from service-worker and it seems to come instantly from its cache.
Thanks for looking into this. I do have some follow-up questions.

The site does use a serviceworker, yet all that sw does is to cache an offline page, all other requests are simply passed through. So there is no sw cache for images. 

On a side note, I wonder if what the network panel says is correct. It says "from serviceworker" for pretty much all requests, but that's not what happens. Yes, these requests pass through the sw, but the request itself still comes from the network, but this is not reported as such in the network panel.

I'm also not able to reproduce the lazy loading with cache disabled and the serviceworker uninstalled? How do you do it exactly?

My thinking is that lazy loading and sw should be unrelated. With lazy loading, the browser intelligently decides the trigger to request the resource. Whether that resources comes from a sw or cache shouldn't matter?
Yes. I unregister the serviceworker from chrome://serviceworker-internals/
Then we could see small requests of ~2.5KB for all the images, and full requests for the images that are in the first 800px of the viewport. (See images firstload*.png attached here)
As we scroll, there should be more full image requests. (See after-scrolling.png)

Note that by default images that lie in the first 800px of the viewport will be loaded. So this may not be saving much for desktop platforms. We will be first enabling lazyload in Android.

Futher, the webpagetest results with and without lazyload (using commandline --enable-features=LazyImageLoading) show less bytes used by lazyload.

https://www.webpagetest.org/video/compare.php?tests=180906_K9_5a48c812e8ba458dd1842076e512791a,180906_SA_230a7d26e07a9f034c30cea63c7c856f
https://www.webpagetest.org/result/180906_K9_5a48c812e8ba458dd1842076e512791a/
https://www.webpagetest.org/result/180906_SA_230a7d26e07a9f034c30cea63c7c856f/

Let me get back to you on the behavior for serviceworker
firstload.png
379 KB View Download
firstload_2.png
377 KB View Download
after-scrolling.png
736 KB View Download
I found one question, if the image request donn't have the StrongValidator then the first partial content(0-2047) will not be reused. so this will take a waste?
@rajendrant: thanks so much for your detailed investigation, much appreciated! The results you show make me even more excited about this feature, so I'm really curious as to which part of the sw is interfering with it.
Raj, can we close this bug?
Project Member

Comment 21 by bugdroid1@chromium.org, Jan 15

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/9be8812c9c14fed31bf6e0b9242d0fca30977661

commit 9be8812c9c14fed31bf6e0b9242d0fca30977661
Author: Rob Buis <rbuis@igalia.com>
Date: Tue Jan 15 09:00:20 2019

Refactor lazy load small image checks

Refactor lazy load small image checks into HTMLImageElement since
the same checks are done in ImageLoader and the preload scanner. Finally
this way there is one single place for the kMinDimensionToLazyLoad threshold.

Bug: 846170

Change-Id: I6043c71ec944658f7ecccf00ef1262df6a84e5a2
Reviewed-on: https://chromium-review.googlesource.com/c/1406244
Commit-Queue: Rob Buis <rbuis@igalia.com>
Reviewed-by: Scott Little <sclittle@chromium.org>
Cr-Commit-Position: refs/heads/master@{#622788}
[modify] https://crrev.com/9be8812c9c14fed31bf6e0b9242d0fca30977661/third_party/blink/renderer/core/html/html_image_element.cc
[modify] https://crrev.com/9be8812c9c14fed31bf6e0b9242d0fca30977661/third_party/blink/renderer/core/html/html_image_element.h
[modify] https://crrev.com/9be8812c9c14fed31bf6e0b9242d0fca30977661/third_party/blink/renderer/core/html/parser/html_preload_scanner.cc
[modify] https://crrev.com/9be8812c9c14fed31bf6e0b9242d0fca30977661/third_party/blink/renderer/core/loader/image_loader.cc

Sign in to add a comment