jdmdigital / jdm-native-lazy-loading

WordPress plugin automatically adds the loading="lazy" attribute to IMG tags within your content to support native image lazy loading in browsers that support it.

JDM Native Lazy Loading

WordPress plugin automatically adds the loading="lazy" attribute to IMG tags within your content to support native image lazy loading, coming in Chrome 75.

Description

This plugin adds the loading="lazy" attribute to IMG tags found when filtering the_content() to support native image lazy loading (coming in Chrome 75).

For more information about native lazy loading images, check out this article: https://addyosmani.com/blog/lazy-loading/ and for a little more depth into what we're doing here, check out our explainer post at: https://jdmdig.it/30nXp7h

Historically, to limit the impact offscreen images have on page load times, developers have needed to use a JavaScript library (like LazySizes) in order to defer fetching these images until a user scrolls near them. What if the browser could avoid loading these offscreen images for you?

The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. It comes in three flavors which you can select (the first one and the Nth ones) to all images sent through the_content().

Just install, activate, check the settings page, and marvel at its simplicity.

There are no added CSS. There is no JS included in the plugin. There's no advertising at all. It just works in browsers that support the new loading image attribute.

Settings

The plugin should work ideally right out of the box, but you can go to the new settings page at Settings >> Native Lazy Loading if you want a little more control. Here, you can choose what the loading attribute should be, both for the first image within the content and the rest of the images below that.

Frequently Asked Questions

Does this add any JS?

Nope. If you're using another JS-based lazy loader, that'll just keep working as it did. If the browser doesn't support the loading attribute, it'll just ignore it and process per usual.

Where is the Settings Page?

In version 1.0 there wasn't one, but thanks to a suggestion by @verlok, there IS one since v1.1. You'll find it at Settings >> Native Lazy Loading.

Changelog

1.2

• Added Admin Notice (details on GitHub repo)
• Added Uninstall Script for housekeeping
• Added Support for the (unofficial) DISABLE_NAG_NOTICES constant
• Spelling Corrections (Oops)
• Fixed Default Settings
• Added Debug Mode (for dev)
• Bug Fixes

1.1

• Added Settings Page
• Added Option to select the loading="" attribute

1.0

• First release.

jdm-native-lazy-loading's Issues

Add Dismissable Review Request Notice?

I think these things can be super-annoying, but might be a good idea so long as the following criteria has been met.

• Check if the unofficial constant DISABLE_NAG_NOTICES is defined
• It's been more than a week since the plugin was activated
• The notice is dismissable--permanently
• There is no "shame & blame" in the notice content

If that's done properly, I'm cool with adding this.

Write Explainer Post

Let's write a little post on https://jdmdigital.co/news/ that explains this a little more. Then, we'll link the Repo to that post and that post to the repo.

Not Replacing All <img Tags?

According to a review by deluigiluca, the plugin only added the attribute to the first 9 of 40 images. Here's what this person said:

Yes, it replaces <img with <img loading="lazy" But... - it replaced only 9 <img on 41 on my page ... anyway, thanks for trying to do the web a better place!

Let's test this and fix it if we can replicate the issue.

Add Uninstall Script

Need to add a new file, uninstall.php, to the plugin root to remove the options saved by the new Settings page (see #1 ).

Once done, tested, and ready for deployment, we'll create a new release on GitHub and deploy to WordPress SVN.

Release on WordPress Repo

Related to #2, we need to design image assets and release on WordPress.org.

Create Settings Page

Might create a settings page for this so the user can choose the appropriate default loading="" setting for images. After all, the attribute comes in three flavors:

• lazy: is a good candidate for lazy loading.
• eager: is not a good candidate for lazy loading. Load right away.
• auto: browser will determine whether or not to lazily load.

Thoughts?

Eagerly load the first N images

Hey there,

I strongly suggest to add the loading=lazy attribute only after the Nth image.

The reason of that is when browsers will parse the page and find the loading=lazy images, they will delay images download to a second stage, making rendering performance worse for the first images in the page, which we want to be rendered ASAP.

The first images in the page should have the loading=eager attribute or no loading attribute at all (which defaults to loading=auto).

The N number could be specified in the settings, or it could initially be set to an arbitrary number, e.g. 10.

Thanks for mentioning me and my article in the tweet.