W04 Learning Activity: Lazyloading Images
Overview
In terms of site performance and search engine optimization, your goal is to have the webpage loaded an ready for action within a few seconds of a user request. Webpages, however, often have many requests and payloads, including images, that increase the load time beyond the ideal target. The goal of this activity is to alleviate some of the load time by waiting until the page assets are actually needed by the user as they scroll. You will be introduced to the design pattern of progressive loading or 'lazy-loading' of images.
Course Learning Outcomes
- Develop responsive web pages that follow best practices and use valid HTML and CSS.
First Meaningful Paint
"It's important to
deliver something meaningful to the user as soon as possible — the longer they wait for the page to load,
the bigger
the chance they will leave before waiting for everything to finish. We should be able to show them
at least the basic view of the page they want to see, with placeholders in the places more content will
eventually be loaded. This could be achieved by progressive loading ─ also known as Lazy loading. This is all about deferring loading of as
many resources as possible (HTML, CSS, JavaScript), and only loading those immediately that are really needed
for the very first experience." ─ MDN
Prepare
Your objective is to load pages faster, and one way to do that is to provide only the essential content to the client/user as the content is requested through events such as scrolling down a page or through navigation. Native or browser-level lazy loading has evolved to be a built-in attribute that can be applied to select elements, including images.
<img src="images/anyphoto.jpg" alt="A good description of the non decorative image" loading="lazy" width="300" height="500">The loading attribute has only two states, eager and lazy. The default eager value instructs the browser to
render the
resource immediately. The lazy attribute defers loading elements, such as an <img> or
<iframe>, until they are called into view by some user action, such as scrolling.
"Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times. Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation." – MDN
- Test the popularity of the
loading="lazy"attribute by looking at any Google Maps embed. - Read: Lazy Loading – MDN | Review the concepts and strategies of lazy loading in this official reference.
Activity Instructions
Build a small webpage with multiple images stacked vertically on a single page. When testing the page in a browser, the images will load only when they come into view as teh user scrolls. This effect is subtle, so carefully scroll and view the network tab loading information in Devtools to observe the behavior.
Video Demonstration: Lazy Loading Observation [ no sound | 23 seconds ]
- In VS Code, go to your course wdd131 repository and create a new HTML page named "lazyload.html" in a "week04" sub folder of wdd131.
- Support this new page with an external CSS and an external JavaScript file that are each stored in their appropriately named sub-folders within the folder.
- The lazyload.html page should have a standard
<head>and a<body>and the body should have a<main>element. - The
<main>element contains a page title in an<h1>element. - The
<main>element contains six (6)<img>child elements - The footer can contain whatever you think appropriate along with the date that the document was last modified using JavaScript.
- The images dimensions must be 400px width by 600px+ height (portrait layouts).
Use your own images or external placeholders. - Display the
<img>elements in one column down the center of the page regardless of the screen size. (HINT: CSS display:block) - Correctly apply native lazy loading to the images so that they only load when the user scrolls down the page.
- Add a fade from black animation to each image using CSS animation and opacity.
Demonstration: Activity Walkthrough