Lazy loading in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when lazy loading is enabled on images in WordPress?

Consider a WordPress site where images have the loading="lazy" attribute added automatically. What is the main effect on page loading?

A All images load immediately when the page starts loading, increasing page speed.

B Images load only when they are about to enter the browser's viewport, reducing initial page load time.

C Images are replaced with placeholders and never load unless clicked.

D Images load in a random order regardless of their position on the page.

💡 Hint

Think about how lazy loading delays image loading until needed.

Lazy loading delays image loading until the user scrolls near them, which reduces the initial page load time and saves bandwidth.

📝 Syntax

intermediate

Which HTML attribute enables lazy loading for images in WordPress?

WordPress automatically adds an attribute to images to enable lazy loading. Which attribute is it?

A defer="true"

B lazyload="enabled"

C loading="lazy"

D async="true"

💡 Hint

It is a standard HTML attribute recognized by modern browsers.

The loading="lazy" attribute tells the browser to delay loading the image until it is near the viewport.

🔧 Debug

advanced

Why does lazy loading not work on background images set via CSS in WordPress?

Lazy loading works on <img> tags but not on background images set with CSS. Why?

A Because CSS background images are not part of the DOM's <code>&lt;img&gt;</code> elements and cannot use the <code>loading</code> attribute.

B Because WordPress disables lazy loading for all CSS files by default.

C Because background images load only after JavaScript runs, so lazy loading is unnecessary.

D Because lazy loading only works on images smaller than 100KB.

💡 Hint

Think about how lazy loading is implemented in browsers.

Lazy loading uses the loading attribute on <img> tags. CSS background images are not <img> elements, so they cannot use this attribute and thus do not lazy load automatically.

❓ state_output

advanced

What is the effect on page speed score when lazy loading is disabled in WordPress?

If you disable lazy loading for images in WordPress, what is the most likely effect on your page speed score?

A Page speed score becomes unpredictable and varies randomly.

B Page speed score increases because images load faster without lazy loading.

C Page speed score remains the same because lazy loading does not affect speed.

D Page speed score decreases because all images load immediately, increasing initial load time.

💡 Hint

Consider how loading all images at once affects load time.

Disabling lazy loading causes all images to load immediately, which increases the initial page load time and usually lowers the page speed score.

🧠 Conceptual

expert

Which WordPress function can you use to disable lazy loading for a specific image?

You want to disable lazy loading for one image in WordPress while keeping it enabled globally. Which function or filter helps you do this?

A Use the <code>wp_lazy_loading_enabled</code> filter to return false for that image's ID.

B Use the <code>disable_lazy_load()</code> function directly on the image tag.

C Add <code>loading="eager"</code> attribute to the image tag to override lazy loading.

D Use the <code>remove_lazy_loading()</code> function in the theme's functions.php file.

💡 Hint

WordPress provides a filter to control lazy loading per image.

The wp_lazy_loading_enabled filter lets you disable lazy loading conditionally, for example by checking the image's ID and returning false to disable lazy loading for that image only.

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