What is Lazy Loading?
Learn what lazy loading is, how loading="lazy", Intersection Observer, and dynamic import defer resources for faster page loads.
Expected Interview Answer
Lazy loading is the technique of deferring the loading of a resource — an image, a script chunk, or a component — until it is actually needed, instead of loading everything upfront.
Rather than shipping every image, route, or module in the initial page load, lazy loading defers work until a trigger condition is met, such as an element scrolling into the viewport or a user navigating to a route. In the browser this is commonly done with the native loading="lazy" attribute on images, the Intersection Observer API for custom triggers, or dynamic import() for JavaScript code splitting. The payoff is a smaller initial payload, faster first paint, and less wasted bandwidth for content the user may never scroll to, at the cost of a small delay when the deferred content is finally requested.
- Reduces initial page weight and speeds up first load
- Saves bandwidth for content users never reach
- Improves Core Web Vitals like LCP when applied correctly
- Pairs naturally with code splitting for large JS bundles
AI Mentor Explanation
Lazy loading is like a team bringing only the opening batting pair onto the field, with the rest of the squad waiting in the pavilion until they are actually needed. Nobody wastes energy warming up players who might not bat that innings. Substitutes are only called in when the specific situation demands them. That defer-until-needed principle is exactly how lazy loading avoids fetching images or code the user has not scrolled to yet.
Step-by-Step Explanation
Step 1
Identify deferrable resources
Below-the-fold images, non-critical routes, and heavy components are good candidates.
Step 2
Choose a trigger
Use loading="lazy", Intersection Observer, or route navigation as the load trigger.
Step 3
Defer the fetch
The resource is not requested until the trigger condition fires.
Step 4
Handle the loading state
Show a placeholder or skeleton while the deferred resource loads in.
What Interviewer Expects
- Clear explanation of deferring work until needed
- Mention of concrete mechanisms: loading="lazy", Intersection Observer, dynamic import
- Understanding of the performance benefit (smaller initial payload)
- Awareness of the trade-off: a brief delay when content is finally requested
Common Mistakes
- Lazy-loading above-the-fold content, which hurts perceived load time
- Forgetting a placeholder, causing layout shift when content loads
- Confusing lazy loading with caching or prefetching
- Not considering SEO impact when deferring critical content indexers need
Best Answer (HR Friendly)
“Lazy loading means we only load things like images or page sections when the user actually needs them, instead of loading everything the moment the page opens. It makes the site feel faster to start and saves data, especially for people who never scroll all the way down.”
Code Example
<img src="photo.jpg" loading="lazy" alt="Deferred image" />
// Dynamic import for code splitting
button.addEventListener("click", async () => {
const { default: Chart } = await import("./Chart.js");
new Chart(document.getElementById("chart-container"));
});
// Intersection Observer for custom lazy loading
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll("img[data-src]").forEach((img) => observer.observe(img));Follow-up Questions
- How does the Intersection Observer API work under the hood?
- What is the difference between lazy loading and code splitting?
- How can lazy loading hurt SEO or Core Web Vitals if misused?
- What is the difference between lazy loading and prefetching?
MCQ Practice
1. Which native HTML attribute enables lazy loading for images?
The loading="lazy" attribute tells the browser to defer fetching the image until it nears the viewport.
2. Which JavaScript feature enables lazy loading of code modules?
Dynamic import() fetches and evaluates a module only when it is called, enabling code splitting.
3. A key risk of lazy loading is:
Without a reserved placeholder, content appearing late can cause layout shift and a jarring delay.
Flash Cards
What is lazy loading? — Deferring the load of a resource until it is actually needed.
Native lazy-load attribute for images? — loading="lazy"
JS mechanism for lazy-loading code? — Dynamic import() combined with code splitting.
Main risk of lazy loading? — Layout shift or perceived delay if placeholders are not handled well.