search

GoogleChromeLabs / wp-native-lazyload

WordPress plugin to lazy-load media using the native browser feature.
https://wordpress.org/plugins/native-lazyload/
Apache License 2.0
51 stars 13 forks source link

Lazy loading doesn't seem to be working on my WP site #10

Closed rafaelsaback closed 5 years ago

rafaelsaback commented 5 years ago

Issue Overview

I've installed the Native Lazyload plugin on my WP site, but it does not seem to be working. I've checked that the images contain the attribute loading='lazy', but when I check the network requests, I can see that off-screen images are still being loaded,

Steps to Reproduce (for bugs)

  1. Open network tab in dev tools
  2. Go to https://partnersontheroad.com/
  3. Verify that even off-screen images are being loaded

Expected Behavior

Off-screen images should not be loaded.

Current Behavior

Off-screen images are being loaded.

LukaszJaro commented 5 years ago

+1

I have tried on multiple different hosts now, disabled all plugins, switched themes.

I also tried to add lazy load without this plugin using this filter:

apply_filters( 'wp_get_attachment_image_attributes', array $attr, WP_Post $attachment, string|array $size )

And it also did not work, I'm not sure if there is something in WP core interfering with this new attribute.

This demo here shows how it should work: https://mathiasbynens.be/demo/img-loading-lazy

swissspidy commented 5 years ago

The demo at https://mathiasbynens.be/demo/img-loading-lazy is actually quite useful. You'll see that, upon loading the page for the first time, the browser will load more than just the 2-3 images in the viewport.

So the expected behavior here is not entirely accurate.

You can learn more about loading="lazy" at https://web.dev/native-lazy-loading and specifically https://web.dev/native-lazy-loading#load-in-distance-threshold.

All images and iframes that are above the fold—that is, immediately viewable without scrolling—load normally. Those that are far below the device viewport are only fetched when the user scrolls near them.

The distance threshold is not fixed and varies depending on several factors:

  • The type of resource being fetched (image or iframe)
  • Whether Lite mode is enabled on Chrome for Android
  • The effective connection type

Hope that helps clarifying this for you :-)

LukaszJaro commented 5 years ago

Thanks @swissspidy :)

I added more images to my WP site and was able to finally see the lazy loading in action, google's implementation of lazy load is just different then previous implementations we are use to, and based on those threshold factors, more advanced.