SEO Book PRO SEO Dashboard v0.0.16 Blank WordPress Login Rich Snippets

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

Article Details and Information
badge This article was written by SEO Book Pro | Published on 12:13 am, Fri, 12 March 21
SEO Book Pro Headline Feed rss_feed
Do you have content that you want on SEO Book Pro?
Here are a few ways to submit it to us.

SEO | Website Audit | WordPress SEO | SEO Audit Tools

↑ Grab this Headline Animator

Subscribe to Our Newsletter

Powered by FeedBurner

Enter your email address:

Delivered by FeedBurner

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.

 

 


12/03/2021 by SEO Book Pro
SEO Book Pro
5 stars
Technical SEO Audit
Quiet Valley Lane Sherman Oaks
Poway, CA 91403
8779 02354