How to enable or add Lazy Loading for Images, Videos, and Iframes in WordPress
Code Reference – adding Theme Support for Lazy load. Add WordPress Lazy Loading Theme Support to Defer the Loading of Non-Critical Resources like images, videos, iframes in your WordPress Theme and at the content of Pages or Posts in WordPress Website.
Enabling Lazy Loading for Images, Videos, and Iframes in WordPress
Lazy loading is a technique for deferring the loading of non-critical resources until they are actually needed by the user, thereby improving page load times and reducing bandwidth consumption. WordPress introduced native lazy loading support for images, videos, and iframes in version 5.5.
This guide will walk you through the process of enabling lazy loading for your WordPress theme
Prerequisites about Enabling Lazy Load
WordPress version 5.5 or higher
A WordPress theme that supports lazy loading
Steps to Enable Lazy Loading
- Access the functions.php file
- Locate the functions.php file for your WordPress theme. This file is typically found in the wp-content/themes/your-theme-name directory.
Add the add_theme_support( ‘lazy-load’ ); function
- Open the functions.php file in a text editor or code editor
- Inside the file, locate the add_theme_support function, which is typically used to declare theme features
- If the function doesn’t exist, add it before the closing PHP tag
- add_theme_support( ‘lazy-load’ );
Save the functions.php file
- Save the changes made to the functions.php file.
Clear Browser Cache
To ensure that the lazy loading effect takes place, clear your browser’s cache. This is because browsers may have cached the images, videos, and iframes before the lazy loading feature was enabled.
Once you have added the add_theme_support( ‘lazy-load’ ); function to your theme’s functions.php file, WordPress will automatically apply lazy loading to all images, videos, and iframes within your theme. This will help improve your website’s performance and user experience.
WordPress Theme Developer Handbook – Add Theme Support Lazy Loading
Related Content to Lazy Loading Images, Videos, Iframes for WordPressÂ
- Lazy loading images
- A technique for deferring the loading of images on a web page until they are actually visible to the user. This can improve page load times by reducing the amount of data that needs to be loaded initially.
- Lazy loading videos
- A technique for deferring the loading of videos on a web page until they are actually played by the user. This can save bandwidth and improve playback performance.
- Lazy loading iframes
- Â A technique for deferring the loading of iframes on a web page until they are actually visible to the user. This can improve page load times and reduce the amount of data that needs to be loaded initially.
- Lazy loading
- A general term for deferring the loading of non-critical resources until they are actually needed by the user. This can improve performance and reduce bandwidth consumption.
- WordPress lazy loading
- The native lazy loading support introduced in WordPress version 5.5 for images, videos, and iframes.
- WordPress add theme support lazy load
- The function used to enable lazy loading for a WordPress theme.