0
0
Wordpressframework~5 mins

Lazy loading in Wordpress

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Lazy loading helps your website load faster by only loading images or content when they are needed, like when you scroll down to see them.

When your webpage has many images and you want to speed up the initial load time.
When you want to save visitors' data by not loading content they might never see.
When you want to improve your website's performance on mobile devices with slower connections.
When you want to improve your website's SEO by reducing page load times.
When you want to reduce server load by loading content only on demand.
Syntax
Wordpress
<img src="image.jpg" loading="lazy" alt="Description">
The loading="lazy" attribute tells the browser to delay loading the image until it is near the viewport.
Lazy loading works automatically in modern browsers when you add this attribute to images or iframes.
Examples
This image will load only when the user scrolls near it.
Wordpress
<img src="photo1.jpg" loading="lazy" alt="A beautiful sunrise">
This iframe will load lazily, improving page speed.
Wordpress
<iframe src="video.html" loading="lazy" title="Sample video"></iframe>
This image loads immediately because it does not have the lazy loading attribute.
Wordpress
<img src="logo.png" alt="Company logo">
Sample Program

This simple HTML page shows two images with lazy loading. The second image loads only when you scroll down near it, saving data and speeding up the page load.

Wordpress
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Loading Example</title>
</head>
<body>
  <h1>Lazy Loading Images in WordPress</h1>
  <p>Scroll down to load images only when needed.</p>
  <img src="https://via.placeholder.com/600x400?text=Image+1" loading="lazy" alt="Placeholder Image 1">
  <div style="height: 1000px;"></div>
  <img src="https://via.placeholder.com/600x400?text=Image+2" loading="lazy" alt="Placeholder Image 2">
</body>
</html>
OutputSuccess
Important Notes

WordPress automatically adds lazy loading to images by default since version 5.5.

You can disable lazy loading for specific images by adding loading="eager".

Lazy loading improves user experience by reducing initial page load time and saving bandwidth.

Summary

Lazy loading delays loading images or iframes until they are needed.

Use the loading="lazy" attribute on images or iframes to enable lazy loading.

WordPress supports lazy loading automatically, helping your site load faster and save data.