Lazy loading in Wordpress - Step-by-Step Execution

Concept Flow - Lazy loading

Page starts loading

↓

Images marked for lazy loading

↓

User scrolls down

↓

Check if image is near viewport

Yes↓

Load image source

↓

Image appears on screen

↓

Repeat for next images

↓

Page fully loaded with images as needed

Lazy loading delays loading images until they are about to appear on screen, saving bandwidth and speeding up page start.

Execution Sample

Wordpress

<img src="placeholder.jpg" loading="lazy" data-src="real-image.jpg" alt="Example image">

This HTML marks an image to load lazily, showing a placeholder until the real image is near viewport.

Execution Table

Step	Action	Image State	User Scroll Position	Image Loaded?
1	Page loads with placeholder images	Placeholder shown	Top of page	No
2	User scrolls down near first image	Placeholder shown	Near first image	No
3	Lazy loading triggers	Real image source loaded	Near first image	Yes
4	Image appears on screen	Real image shown	Near first image	Yes
5	User scrolls near second image	Placeholder shown	Near second image	No
6	Lazy loading triggers for second image	Real image source loaded	Near second image	Yes
7	Second image appears on screen	Real image shown	Near second image	Yes
8	User scrolls past all images	All real images shown	Bottom of page	Yes
9	No more images to load	All images loaded	Bottom of page	Yes

💡 All images have been loaded as user scrolled near them, lazy loading complete.

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
Image Source	placeholder.jpg	real-image.jpg (first image)	real-image.jpg (second image)	real-image.jpg (all images)
Image Loaded?	No	Yes (first image)	Yes (second image)	Yes (all images)
User Scroll Position	Top of page	Near first image	Near second image	Bottom of page

Key Moments - 3 Insights

Why does the image show a placeholder first instead of the real image?

Because lazy loading delays loading the real image until the user scrolls near it, as shown in steps 1 and 2 of the execution table.

When exactly does the real image start loading?

The real image starts loading when the user scrolls near it, triggering lazy loading as shown in step 3 and step 6.

What happens if the user never scrolls near an image?

The image stays as the placeholder and the real image never loads, saving bandwidth, as implied by the lazy loading logic in the flow.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the first real image load?

A Step 3

B Step 2

C Step 5

D Step 1

💡 Hint

Check the 'Image Loaded?' column for when it changes to 'Yes' for the first image.

According to the variable tracker, what is the 'Image Source' after step 6?

A placeholder.jpg

B real-image.jpg (second image)

C real-image.jpg (first image)

D No image source

💡 Hint

Look at the 'Image Source' row and the value under 'After Step 6'.

If the user never scrolls, what will be the 'Image Loaded?' state at the end?

A Yes for all images

B Yes for first image only

C No for all images

D Yes for some images

💡 Hint

Refer to the key moment about images not loading if user never scrolls.

Concept Snapshot

Lazy loading delays loading images until needed.
Use loading="lazy" attribute in <img> tags.
Images show placeholders first.
Real images load when near viewport.
Saves bandwidth and speeds page start.
Common in WordPress for better performance.

Full Transcript

Lazy loading in WordPress means images do not load immediately when the page starts. Instead, they show a placeholder image. When the user scrolls near an image, the real image source loads and replaces the placeholder. This saves data and makes the page load faster initially. The process repeats for each image as the user scrolls down. If the user never scrolls near an image, it never loads, saving bandwidth. This is done by adding loading="lazy" to image tags. The execution table shows each step from page load, user scroll, image loading, to all images loaded. The variable tracker shows how image sources and load states change over time. Key moments clarify why placeholders appear first and when images load. The visual quiz tests understanding of these steps.

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