Lazy loading in Wordpress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is lazy loading in WordPress?

Lazy loading is a technique that delays loading images or other resources until they are needed, usually when they come into the user's view. This helps pages load faster and saves bandwidth.

beginner

How does lazy loading improve website performance?

By loading only visible images first, lazy loading reduces initial page load time and data usage. This makes the site feel faster and improves user experience, especially on slow connections.

intermediate

Which HTML attribute is used by WordPress to enable lazy loading on images?

WordPress uses the loading="lazy" attribute on <img> tags to tell browsers to load images only when they are near the viewport.

intermediate

Can lazy loading affect SEO or accessibility?

If implemented correctly, lazy loading should not harm SEO or accessibility. WordPress ensures images have alt text and loads content properly for search engines and screen readers.

beginner

Name a common plugin or method to add lazy loading in WordPress if not using the built-in feature.

Plugins like 'a3 Lazy Load' or 'Lazy Load by WP Rocket' can add lazy loading to images, videos, and iframes if your theme or WordPress version does not support it natively.

What does lazy loading primarily delay loading of?

A Images and other media until needed

B All website scripts

C Only text content

D Website headers

Lazy loading delays loading images and media until they are about to appear on screen.

Which HTML attribute enables lazy loading in modern browsers?

A async

B srcset

C defer

D loading

The loading="lazy" attribute tells browsers to lazy load images.

What is a key benefit of lazy loading on mobile devices?

A Saves data and speeds up loading

B Increases battery usage

C Disables images

D Loads all content at once

Lazy loading saves mobile data and speeds up page load by loading images only when needed.

Does WordPress support lazy loading by default in recent versions?

A Only with plugins

B No, it never supported lazy loading

C Yes, since WordPress 5.5

D Only for videos

WordPress added native lazy loading support for images starting with version 5.5.

Which of these is NOT a good practice when using lazy loading?

A Using loading="lazy" attribute

B Hiding important content behind lazy loading

C Adding alt text to images

D Testing on different devices

Important content should not be hidden behind lazy loading as it may affect SEO and accessibility.

Explain how lazy loading works in WordPress and why it helps website performance.

Think about when images actually load as you scroll.

Describe potential SEO and accessibility considerations when implementing lazy loading in WordPress.

Consider how search engines and assistive tools read your site.

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