0
0
Wordpressframework~30 mins

Lazy loading in Wordpress - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Lazy Loading Images in WordPress
📖 Scenario: You are building a WordPress blog page with many images. To improve page speed and user experience, you want images to load only when they come into the visitor's view.
🎯 Goal: Create a WordPress theme template that implements lazy loading for images using the loading="lazy" attribute.
📋 What You'll Learn
Create an array of image URLs in PHP
Set a variable to hold the lazy loading attribute
Use a foreach loop to output <img> tags with lazy loading
Add the loading="lazy" attribute to each <img> tag
💡 Why This Matters
🌍 Real World
Lazy loading images helps websites load faster and saves bandwidth by loading images only when needed.
💼 Career
Web developers often optimize WordPress sites for speed and user experience by implementing lazy loading techniques.
Progress0 / 4 steps
1
Create an array of image URLs
Create a PHP array called $images with these exact URLs as strings: 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', and 'https://example.com/image3.jpg'.
Wordpress
Need a hint?

Use square brackets [] to create the array and separate URLs with commas.

2
Set lazy loading attribute variable
Create a PHP variable called $lazy_attr and set it to the string 'loading="lazy"'.
Wordpress
Need a hint?

Assign the string exactly as shown, including quotes around loading="lazy".

3
Loop through images and output <img> tags
Use a foreach loop with variables $url to iterate over $images. Inside the loop, echo an <img> tag with src set to $url and include the $lazy_attr variable inside the tag.
Wordpress
Need a hint?

Use double quotes for echo and escape inner quotes properly. Add an alt attribute for accessibility.

4
Add HTML structure and complete template
Wrap the PHP code inside a basic HTML5 structure with <!DOCTYPE html>, <html lang="en">, <head> with charset and viewport meta tags, and <body>. Place the PHP code inside the <body> section.
Wordpress
Need a hint?

Make sure the PHP code is inside the <body> tags and the HTML structure is complete.