You’ve definitely used Chrome Extension Lighthouse, Google PageSpeed Insights, or GTmetrix to evaluate your WordPress site’s speed if you want to make it run faster. Defer offscreen is a warning that you may have seen. I’ll describe how lazy loading your Images may be used to address “defer offscreen images” in this post.
What does defer offscreen images mean?
Let’s start define the fold first. The area of the screen that is visible as soon as you land on a page is known as the fold. It’s the first material you see; you don’t need to browse down or do anything else. This section is termed above the fold because it is immediately at the top of the page. The first element that the browser must render in order for users to engage with the content is the most crucial component of the page.
However, all of the material that can only be seen by scrolling down is labeled below the fold. It doesn’t matter as much when a page is loading, as you might assume.
Lazy Loading
By delaying the loading of non-critical assets that are “below-the-fold,” or in other words, anything that is not now in the browser viewport, lazy loading is a strategy for increasing initial page performance and payload. In WordPress, deferring offscreen pictures essentially means waiting for the images that aren’t yet visible to load.
Defer offscreen images with a plugin
Defer offscreen images plugins are same as lazy loading plugins. Here are some below:
1. Jetpack
Lazy load images for a super fast experience, even on mobile. Jetpack’s lazy loading automatically delays the loading of media on your posts and pages until your visitors scroll down to where they appear on the page.
2. Wp Rocket
LazyLoad is a feature of WP Rocket that works with iFrames, video content, and photos. Until they do so, the graphics will remain “off-screen” on the user’s device. You may improve the real and perceived loading times in this way with the aid of the plugin.
Defer offscreen images without plugins
Using the property loading=”lazy”, you may manually delay offscreen pictures using lazy loading. Here’s an illustration:
<img src=”lazy-load.jpg” loading=”lazy” alt=”lazy load image”>The addition of the loading property will start a lazy load at the browser level. Firefox and browsers built on the Chrome platform both support the loading property.
Conclusion
Everyone should use WordPress’s lazy image loading function to improve the speed of their website. Regarding the issue of which plugin you ought to utilize. The speed of your website may be greatly enhanced by delaying offscreen elements, such as photos and other materials. This method will function for any picture on your website that has an element, including photos on your home page, articles, and pages.