Lazy loading in Wordpress - Mini Project: Build & Apply

Lazy Loading Images in WordPress

📖 Scenario: You are building a WordPress blog page with many images. To improve page speed and user experience, you want images to load only when they come into the visitor's view.

🎯 Goal: Create a WordPress theme template that implements lazy loading for images using the loading="lazy" attribute.

📋 What You'll Learn

Create an array of image URLs in PHP

Set a variable to hold the lazy loading attribute

Use a foreach loop to output <img> tags with lazy loading

Add the loading="lazy" attribute to each <img> tag

💡 Why This Matters

🌍 Real World

Lazy loading images helps websites load faster and saves bandwidth by loading images only when needed.

💼 Career

Web developers often optimize WordPress sites for speed and user experience by implementing lazy loading techniques.

1

Create an array of image URLs

Create a PHP array called $images with these exact URLs as strings: 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', and 'https://example.com/image3.jpg'.

Wordpress

Hint

Use square brackets [] to create the array and separate URLs with commas.

2

Set lazy loading attribute variable

Create a PHP variable called $lazy_attr and set it to the string 'loading="lazy"'.

Wordpress

Hint

Assign the string exactly as shown, including quotes around loading="lazy".

3

Loop through images and output <img> tags

Use a foreach loop with variables $url to iterate over $images. Inside the loop, echo an <img> tag with src set to $url and include the $lazy_attr variable inside the tag.

Wordpress

 tags with lazy loading
// Your code here
?>

Hint

Use double quotes for echo and escape inner quotes properly. Add an alt attribute for accessibility.

4

Add HTML structure and complete template

Wrap the PHP code inside a basic HTML5 structure with <!DOCTYPE html>, <html lang="en">, <head> with charset and viewport meta tags, and <body>. Place the PHP code inside the <body> section.

Wordpress

    
    
    Lazy Loading Images

Hint

Make sure the PHP code is inside the <body> tags and the HTML structure is complete.

Practice

1. What does lazy loading do in WordPress?

easy

A. Loads all images and iframes immediately when the page loads

B. Delays loading images or iframes until they are visible on screen

C. Removes images and iframes from the page

D. Automatically compresses images for faster loading

Solution

1. Step 1: Understand lazy loading concept

   Lazy loading means delaying the loading of images or iframes until they are needed, usually when they appear on the screen.

2. Step 2: Compare options with definition

   Delays loading images or iframes until they are visible on screen matches this definition exactly, while others describe different behaviors.

3. Final Answer:

   Delays loading images or iframes until they are visible on screen -> Option B

4. Quick Check:

   Lazy loading = Delayed loading [OK]

Hint: Lazy loading means load only when visible on screen [OK]

Common Mistakes:

• Thinking lazy loading loads everything immediately
• Confusing lazy loading with image compression
• Believing lazy loading removes content

2. Which is the correct way to enable lazy loading on an image in WordPress HTML?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall correct attribute for lazy loading

   The HTML standard uses the attribute loading="lazy" to enable lazy loading on images.

2. Step 2: Check each option's syntax

   <img src="image.jpg" loading="lazy"> uses loading="lazy" correctly. Options B, C, and D use incorrect or non-standard attributes.

3. Final Answer:

   <img src="image.jpg" loading="lazy"> -> Option A

4. Quick Check:

   Correct attribute = loading="lazy" [OK]

Hint: Use loading="lazy" attribute on images for lazy loading [OK]

Common Mistakes:

• Using non-standard attributes like lazyload or load
• Writing loading="true" instead of loading="lazy"
• Forgetting to add the loading attribute

3. Given this HTML snippet in WordPress:

<img src="photo.jpg" loading="lazy" alt="A photo">

What happens when the page loads?

medium

A. The image loads only when it scrolls into view

B. The image loads immediately with the page

C. The image never loads

D. The image loads after a fixed delay of 5 seconds

Solution

1. Step 1: Understand loading="lazy" behavior

   The loading="lazy" attribute tells the browser to delay loading the image until it is near or inside the visible area (viewport).

2. Step 2: Match behavior to options

   The image loads only when it scrolls into view correctly describes this behavior. The image loads immediately with the page is immediate loading, which lazy loading prevents. Options C and D are incorrect behaviors.

3. Final Answer:

   The image loads only when it scrolls into view -> Option A

4. Quick Check:

   loading="lazy" = load on scroll into view [OK]

Hint: loading="lazy" delays image load until visible [OK]

Common Mistakes:

• Assuming image loads immediately
• Thinking lazy loading means image never loads
• Believing lazy loading uses a fixed time delay

4. You added loading="lazy" to your images but they still load immediately. What is a likely cause?

medium

A. The images have the attribute loading="eager" instead

B. You forgot to add the src attribute to the image

C. The images are inside an iframe without lazy loading

D. The browser does not support lazy loading attribute

Solution

1. Step 1: Check browser support for lazy loading

   Some older browsers do not support the loading="lazy" attribute, causing images to load immediately.

2. Step 2: Evaluate other options

   You forgot to add the src attribute to the image would cause broken images, not immediate loading. The images are inside an iframe without lazy loading might affect iframes but not images directly. The images have the attribute loading="eager" instead contradicts the question premise.

3. Final Answer:

   The browser does not support lazy loading attribute -> Option D

4. Quick Check:

   Unsupported browser = immediate load [OK]

Hint: Check browser support if lazy loading fails [OK]

Common Mistakes:

• Assuming lazy loading works in all browsers
• Forgetting src attribute causes broken images, not immediate load
• Confusing iframe lazy loading with image lazy loading

5. You want to optimize a WordPress page with many images and iframes. Which approach best uses lazy loading to improve performance?

hard

A. Add loading="eager" to all images and iframes for faster loading

B. Remove all loading attributes to let WordPress handle loading automatically

C. Add loading="lazy" to all images and iframes, and ensure critical images load eagerly

D. Use JavaScript to load all images after a 10-second delay

Solution

1. Step 1: Understand best lazy loading practice

   Adding loading="lazy" to images and iframes delays their loading until needed, improving page speed. Critical images should load eagerly to avoid layout shifts.

2. Step 2: Evaluate options for performance

   Add loading="lazy" to all images and iframes, and ensure critical images load eagerly correctly combines lazy loading with eager loading for important images. Remove all loading attributes to let WordPress handle loading automatically removes control, Add loading="eager" to all images and iframes for faster loading forces immediate loading, and Use JavaScript to load all images after a 10-second delay delays all images unnecessarily.

3. Final Answer:

   Add loading="lazy" to all images and iframes, and ensure critical images load eagerly -> Option C

4. Quick Check:

   Lazy load non-critical, eager load critical [OK]

Hint: Lazy load most, eager load critical images for best speed [OK]

Common Mistakes:

• Removing loading attributes loses control over loading
• Using eager loading everywhere slows page load
• Delaying all images with JavaScript hurts user experience