How to Enable the Default WordPress Lazy load for you Images and Iframes in 5 Steps ( No Plugin )

Get the SEO Book Pro - SEO Plugin for WordPress to make live edits on the Front End - Live Demo

Learn How to add loading=”lazy” to your images and iframe codes in the pages of your website

---

Step One | Step Two | Step Tree | Step Four | Step Five

---

Step 1: Go Trough your Template Folder and find your active template folder Step 2: Open the functions.php file with some code editor like Atom, Notepad, etc. Step 3: At the top of the file right after the opening <?php tag add the snippet below to register and add template support for your custom WordPress Template with the default WordPress Lazy Load Function since WordPress 5.5 Version Announce

// Enable WordPress Default Lazy Load Functions for Images, Videos, Iframes add_theme_support( ‘lazy-load’ );

Step 4: To get this work after adding this snippet above ^^ to your functions.php save the file to your server and viola your WordPress Template Support Lazy Loading Images and Lazy Loading I frames without adding Lazy Load Plugin or Other Additional Scripts to your WordPress Template files Step 5: go Trough your Templates With Loops and <img src element and add before the closing img tag loading=”lazy” and your images from the loops or queried post or pages will load lazy

---

Example of image version with lazy load value-added below

<img src=”URL to your image” title=”The image title” alt=”the alternative image text”  width=”640″ height=”480″ loading=”lazy”/>

---

Lazy Load Function to Disable the Default WordPress Functionality for Lazy Load

Copy and Paste the Lazy Load Disable snippet into your Custom WordPress theme functions.php file. Save the Lazy Load Snippet Code go to Your Page and see how your Images and Videos in Iframe are without the Core Functionality for Lazy Load Function from WordPress.

/* Disable WordPress default image lazy load */ add_filter( ‘lazy-load_enabled’, ‘__return_false’ );

---

How you should use the default WordPress Lazy Load Functionality for your Pages, Posts and Other Post Types?

The function said itself how the Lazy Load works on your website. If you have Hero Image in Above the fold add the lazy only to media files that are not visible on first hit. Instead of adding Lazy Load for your Page Hero Image try to optimize and compress the image as much as you can, and is possible without decrease the Image Quality and use .jpg format images to load them much faster. Then below the fold is coming all media images and videos which are below the fold can have the lazy loading class.