googlechromelabs / wp-native-lazyload

WordPress plugin to lazy-load media using the native browser feature.

Native Lazyload

Lazy-loads media using the native browser feature. Learn more about the new loading attribute or view the WordPress core ticket where inclusion of a similar implementation in WordPress core itself is being discussed.

If the loading attribute is not supported by the browser, the plugin falls back to a JavaScript solution based on IntersectionObserver. For the case that JavaScript is disabled, but the loading attribute is supported by the browser, a noscript variant of the respective element will be added that also includes the loading attribute without any further changes.

"Native" means "Fast"

If you have found your way over here, you are probably aware of how crucial performance is for a website's user experience and success. You might also know that lazy-loading is a key feature to improve said performance. However, the solutions for lazy-loading so far still added a bit of overhead themselves, since they relied on loading, parsing and running custom JavaScript logic, that may be more or less heavy on performance.

This plugin largely does away with this pattern. It relies on the new loading attribute, which makes lazy-loading a native browser functionality. The attribute is already supported by Chrome, and will be rolled out to other browsers over time. The solution being "native" means that it does not rely on custom JavaScript logic, and thus is more lightweight. And "more lightweight" means "faster".

Last but not least, a neat thing to keep in mind is that this plugin will essentially improve itself over time, as more browsers roll out support for the loading attribute.

Download

The easiest way to get the plugin is to install it from your WordPress admin dashboard, or manually download it from wordpress.org. Alternatively, you can also clone or download this repository to get the development version, but you will need to run a few commands to process assets and set up the autoloader:

1. composer install
2. npm install
3. npm run build

Requirements

• WordPress >= 4.7
• PHP >= 7.0

Contributing

Any kind of contributions to Native Lazyload are welcome. Please read the contributing guidelines to get started.

Credit

This plugin is partly based on logic from WP Rig as well as recommendations from web.dev and developers.google.com.

wp-native-lazyload's Issues

Anchor link is misaligned

There is a problem with pages that use anchor links.
If an anchor link is set at the top of the page and an image is included in the page, the anchor link will deviate from the target id. This is because the height of the image is calculated while moving by lazyload.

Is there a way to solve this?

I can skip lazyload only for that page, but it’s a bit cumbersome.
Is there any good way?

Issue Overview

Steps to Reproduce (for bugs)

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues and/or PRs

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

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.

Internet Explorer 11 not loading any images

Issue Overview

When using old browsers images are not loading. Not sure if related to JavaScript or not. It was tested with Internet Explorer 11, simply no image loaded whatsoever. Everything else of the content loaded without an issue.

This is an issue because we are an e-commerce site and a lot of our customers are 40+ years old that still use internet explorer.

Steps to Reproduce (for bugs)

Use Internet Explorer 11
Visit https://www.jnequipment.com/shop/brands/graco/17m359-graco-ultra-handheld-airless-paint-sprayer-corded/
Tested with PHP 7.2.22

Works fine with Microsoft Edge & Chrome

Expected Behavior

Images should load.

Current Behavior

Images are not loading.

Possible Solution

Include a check for browser version.

License issue

The GPL license cannot be added to Apache.

GNU GPL -----> Apache 2.0 ⛔

Apache 2.0 -----> GPL 3.0 ✅

I hope you will change the license... :)

This component -
https://github.com/…/w…/blob/v2.0/inc/Lazyload/Component.php (GNU GPL 3.0)

Cannot be added to your plugin on Apache 2.0 license

https://wordpress.org/plugins/native-lazyload/#developers

Issue Overview

Steps to Reproduce (for bugs)

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues and/or PRs

Do not lazy-load images in sliders

Issue Overview

Images in sliders being transformed is the most common source of issues with this plugin. Therefore, such images should be skipped.

Possible Solution

It is impossible to reliably know for the plugin whether an image appears in a slider. However, some of the most popular sliders in the WordPress ecosystem could be supported by blacklisting CSS classes they add, so that these images wouldn't be transformed.

Related support requests:

• https://wordpress.org/support/topic/breaks-soliloquy-sliders/
• https://wordpress.org/support/topic/also-an-issue-with-recent-posts-flexslider-by-woothemes/

Images are not being loaded if content is added via Ajax

Issue Overview

When using the prev/next buttons on a blog page no images are shown on the previous/next page.

Steps to Reproduce (for bugs)

1. open https://mbaierl.com/blog/page/2/
2. scroll to the bottom
3. click on either « Ältere Einträge (prev) or Nächste Einträge » (next)
4. no images are preloaded on the resulting page.
   I am using Chrome 76.0.3809.132 (Official Build) (64-bit) on the latest MacOS.

Expected Behavior

Images should load.

Current Behavior

The image is not loaded and the image tag remains like this:
<img src="https://mbaierl.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg" alt="Vorsicht! Diese 15 Bücher könnten dein Business (und dein Leben) verbessern!" class="lazy" width="1080" height="675" loading="lazy" data-src="https://mbaierl.com/wp-content/uploads/1/business-buecher-og-1080x630.png">

Improve compatibility with other lazyload mechanisms / no JavaScript

Issue Overview

It can happen that other lazy-loading implementations are active (despite not being recommended), and the .no-js .lazy[data-src] CSS rule might cause them to disappear.

Possible Solution

The plugin should make sure to only hide images that were transformed by itself, and only images that use the JavaScript fallback (since only then, the .no-js selector will be relevant, since the noscript version would be shown).

• Rename too generic lazy class to native-lazyload-js-fallback.
• Only add that class to elements that use the fallback (and thus have a noscript variant).
• Change CSS selector to .no-js .native-lazyload-js-fallback.
• Remove the class in JavaScript.

Related: https://wordpress.org/support/topic/images-not-visible-in-chrome-76/

Images don't load on Safari - How to disable lazyload on it?

Simply put, images load fine on any browser except Safari, which unfortunately still exists.
Both on iOS and desktop.

Is there a way to disable lazyload for it? A filter maybe?

Run lazy-loading initialize script on `DOMContentLoaded`

Issue Overview

If the script is enqueued / printed in another location, it may be that some images do not get transformed so that they don't get a proper src attribute, causing them to not be loaded at all.

Possible Solution

By wrapping the script to run on DOMContentLoaded, it is ensured it catches all images initially included in the markup.

Potentially related (Autoptimize):

• https://wordpress.org/support/topic/breaks-images-in-chrome/
• https://wordpress.org/support/topic/images-disappear-16/

Adding fallback url filter for more customization

Issue Overview

I hope in next version, fallback url filter will be added for more customization. Eg: custom or moving the script to another directory.

Steps to Reproduce

In class Lazy_Load_Script::get_fallback_script_url(), we can change the method body to something like that:

protected function get_fallback_script_url() : string {
    $path = static::FALLBACK_SCRIPT_PATH;
    if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
        $path = str_replace( '/js/', '/js/src/', static::FALLBACK_SCRIPT_PATH );
    }
    $path = apply_filters('native_lazyload_fallback_script_path', $path);
    return apply_filters('native_lazyload_fallback_script_url', $this->context->url( $path ));;
}

Transform images in text widget to lazy-load

Issue Overview

There are more places where images can be transformed to lazy-load, for example in the Text and Custom HTML widgets. This should be supported.

Compatibility with Gravity Forms iframe

Certain iframes being lazy-loaded can be problematic, see for example https://wordpress.org/support/topic/gravity-forms-ajax-iframe-404/ related to Gravity Forms using an iframe for AJAX content.

The fallback doesn't work on IE10

Issue Overview

The fallback script seems to work fine on IE11 but not on IE10. Here is the error:

SCRIPT5007: Unable to get property 'src' of undefined or null reference 
lazyload.js, line 1 character 1659

Steps to Reproduce (for bugs)

1. Activate the default WordPress theme Twenty Nineteen.
2. Deactivate all WP plugins except for Native Lazyload
3. Add images to a page with the editor
4. Test the page on a VM with Windows 7 and IE10

PHP 7.3 - IE10 - Windows 7 - Native Lazy load v1.0.1 - WordPress 5.2.3

Expected Behavior

Images should display.

Current Behavior

There are empty spaces instead of images.

Screenshots / Video

https://cl.ly/e220a8ac07d9

Custom Placeholder Filter

Issue Overview

As a theme developer, I'd like to be able to override this plugin's placeholder image with my own.

Current Behavior

Currently the placeholder is hardcoded as [plugin-folder]/assets/images/placeholder.svg.

Possible Solution

Add a filter to where the original src attribute is overridden.

Related Issues and/or PRs

Will add a PR shortly. Opened PR #23.

Cover images outside of `the_content()`

Doesn't have noscript fallback when javascript is disabled.

Skip images from being lazy-loaded when they have no dimensions

Images without width and height being lazy-loaded is problematic and may result in browser warnings. Let's make sure those images receive the skip-lazy class in PHP to be omitted from lazy-loading.

See https://wordpress.org/support/topic/room-for-improvement-specify-dimensions-suggested-by-javascript-console/ or https://wordpress.org/support/topic/intervention-message-in-lighthouse-audit/ for example

the post list will be hidden.

Issue Overview

Steps to Reproduce (for bugs)

Expected Behavior

Current Behavior

Possible Solution

Screenshots / Video

Related Issues and/or PRs

If you enable native razy load, the feature of the post list will be hidden.