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.