Lazy loading in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable lazy loading for an image in WordPress.

Wordpress

<img src="image.jpg" loading="[1]" alt="Sample Image">

Drag options to blanks, or click blank then click option'

Anone

Beager

Clazy

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'eager' loads the image immediately, not lazy loading.

Leaving the attribute empty disables lazy loading.

Setting loading="lazy" tells the browser to delay loading the image until it is near the viewport, improving page speed.

2fill in blank

medium

Complete the WordPress function to add lazy loading to images by filtering their HTML output.

Wordpress

function add_lazy_loading($html) {
    return str_replace('<img', '<img loading="[1]"', $html);
}

Drag options to blanks, or click blank then click option'

Aeager

Bauto

Cnone

Dlazy

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'eager' causes images to load immediately.

Forgetting to add the loading attribute.

Replacing <img with <img loading="lazy" adds lazy loading to images in the HTML output.

3fill in blank

hard

Fix the error in the WordPress filter hook to enable lazy loading on images.

Wordpress

add_filter('the_content', '[1]');

function lazy_load_images($content) {
    return str_replace('<img', '<img loading="lazy"', $content);
}

Drag options to blanks, or click blank then click option'

Alazy_load_images()

Blazy_load_images

ClazyLoadImages

Dlazy_load_images_function

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses calls the function immediately instead of passing its name.

Using a wrong function name.

The filter expects the function name as a string without parentheses.

4fill in blank

hard

Fill both blanks to create a WordPress filter that adds lazy loading to images in post content.

Wordpress

add_filter('[1]', '[2]');

function add_lazy_loading($content) {
    return str_replace('<img', '<img loading="lazy"', $content);
}

Drag options to blanks, or click blank then click option'

Athe_content

Blazy_load_images

Cadd_lazy_loading

Dcontent_filter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong filter hook name.

Passing a function name that does not exist.

The filter hook is 'the_content' and the function name is 'add_lazy_loading'.

5fill in blank

hard

Fill all three blanks to create a WordPress shortcode that outputs an image with lazy loading.

Wordpress

function lazy_image_shortcode($atts) {
    $atts = shortcode_atts(['src' => '', 'alt' => ''], $atts);
    return '<img src="' . [1] . '" alt="' . [2] . '" loading="[3]">';
}
add_shortcode('lazyimg', 'lazy_image_shortcode');

Drag options to blanks, or click blank then click option'

A$atts['src']

B$atts['alt']

Clazy

Deager

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong attribute keys.

Setting loading to 'eager' disables lazy loading.

The shortcode uses the 'src' and 'alt' attributes from the shortcode attributes and sets loading to 'lazy' for lazy loading.