Images play an important role when creating a content but they also affect the performance of the site. Lazy loading helps to resolve performance issues by delaying loading of images in long pages. So, offscreen images are not loaded until the user scrolls to them.
If your web page contains a lot of images but you load them as they are scrolled into a browser view then you can save a user bandwidth and reduce a load time of your web page. As a result, it can give a significant performance boost for your site and make the site visitors happy.
Current state of lazy loading feature
Nowadays, many WordPress users implements a lazy loading feature trough popular plugins such as Jetpack, Autoptimize, Smush, and others. Each of these plugins comes with a Javascript library to lazy loading content on the site but soon this will no longer be necessary because browsers will have this feature by default.
Chrome team has recently announced a native lazy loading feature which was added to Chrome 76. Currently, Chrome is the only browser that supports this feature but there is an open bug for Firefox as well. Unfortunately, there is nothing for Edge and IE yet but hope they will introduce a support for native lazy-loading soon.
Native lazy loading in WordPress
An implementation of native lazy loading feature for WordPress core is still under discussion and you can follow it in this ticket (feel free to join the discussion). Even though, this feature is not in the core yet, you still can have a native lazy loading on your site by using a plugin created by Google.
Felix Arntz, who is a Google engineer and WordPress Core Committer, has created Native Lazyload. This plugin helps the site to lazy load images and iframes with the new loading attribute for browsers that have support for it. Moreover, the plugin also comes an optional fallback for browsers that do not yet support it.
Benefits of native lazy loading
One of the huge benefits compared to a JavaScript-based solution is that your site does not need to load an additional library to perform a lazy loading. Also, there is no need to add a fallback for browsers with a disabled JavaScript. In short, you can avoid all that setup problems when using a native lazy loading.
On the other hand, it does not work today on all browsers but you can use a JavaScript-based solution as a fallback. Note, this fallback is presented in the Native Lazyload plugin by default. There is no need to install any additional plugins. Everything is packed in one simple plugin.
We are currently using this plugin to speed up our themes directory and other pages that have images but we do not provide a fallback in order to avoid loading an additional JavaScript file. It is still better than nothing.
Leave a Reply