Lazy Loading Implementation — Step by Step

How to defer images and scripts until they’re actually needed. Includes native browser APIs and what works best in Malaysia.

10 min read Intermediate March 2026

Code editor showing lazy loading implementation with HTML attributes highlighted on screen

Why Lazy Loading Matters

Performance is everything in Malaysia’s competitive digital landscape

When someone visits your website, they don’t need to download every image at once. Most visitors only scroll through a portion of your page. That’s where lazy loading comes in — it’s the technique that loads images and other content only when users actually need them.

Here’s the reality: a page with 15 unoptimized images can weigh 8-12 MB. With lazy loading, you’re looking at maybe 2-3 MB on initial load. The rest loads as people scroll. Your users get faster page loads. Your server gets less strain. Your Core Web Vitals improve. Everyone wins.

The Basic Concept

Lazy loading is simple in principle. Instead of loading all images when the page loads, you load them when they enter (or are about to enter) the viewport. Think of it like a bookstore that only pulls books from the warehouse when customers ask for them, rather than keeping every title on the shelf.

There are three main approaches: native browser support using the loading="lazy" attribute, Intersection Observer API for more control, and older JavaScript libraries. We’ll focus on the first two because they’re what works today without bloating your JavaScript bundle.

Native loading attribute: Easiest, browser handles it
Intersection Observer: More flexible, better control
Legacy libraries: Still useful for older browser support

HTML code snippet showing loading lazy attribute in img tags on a text editor

Method 1: Native Loading Attribute

The simplest approach. You don’t need JavaScript. Just add one word to your image tag:

That’s it. Modern browsers (Chrome 76+, Firefox 75+, Safari 15.1+) understand this attribute and will automatically defer loading until the image is about 50-100px away from the viewport. It’s been the default behavior in Malaysia’s most popular browsers for years now.

The downside? Limited control. You can’t customize when or how the image loads. But for 80% of websites, this is perfectly fine. You get the performance benefit with zero extra code.

Method 2: Intersection Observer API

When you need more control, the Intersection Observer API is your tool. It lets you trigger actions when elements become visible — perfect for lazy loading images with custom behavior.

Here’s how it works in practice. You create an observer that watches for when an image enters the viewport. Once it’s visible, the observer swaps the placeholder with the actual image source. You can add loading spinners, animations, or track which images users actually saw.

Pro tip: Set a margin on the observer (like 100px) to start loading images before they’re visible. This creates a smooth experience where images are ready when users scroll to them.

The code isn’t complex. You’re looking at 20-30 lines of JavaScript to handle hundreds of images. And unlike older libraries, this API is built into every modern browser — no external dependencies.

JavaScript code showing Intersection Observer implementation for lazy loading images with callback function

Step-by-Step Implementation Guide

We’ll walk through the practical setup process

Audit Your Images

First, know what you’re working with. Use DevTools to see how many images load on your homepage. If you’ve got 30+ images and most users only scroll halfway down, you’ve got significant room for improvement. In Malaysia, where mobile data can be expensive, this matters even more.

Start With Native Loading

Add the loading attribute to every image that’s not above the fold. Images at the top of your page should load normally — users will see them immediately anyway. For everything else, use loading=”lazy”. This alone typically improves LCP by 10-20% because you’re deferring non-critical image downloads.

Set Image Dimensions

Always include width and height attributes on your images. This tells the browser to reserve space before the image loads, preventing layout shift. It’s a small detail but it’s the difference between a smooth scroll and that annoying jump when content rearranges.

Implement Intersection Observer

For advanced use cases, add the Intersection Observer. Create an observer instance with a root margin (100px is standard), then iterate through your images and start observing them. When they become visible, swap the data-src attribute into src. It’s straightforward JavaScript that gives you complete control.

Test Performance Improvements

Use PageSpeed Insights to measure before and after. You’re looking for improvements in Largest Contentful Paint (LCP) and First Input Delay (FID). Most sites see 20-40% reduction in initial load time after implementing lazy loading properly. That’s significant enough to impact your Core Web Vitals score.

Real-World Considerations

Lazy loading isn’t perfect for everything. Images critical to your design or above the fold shouldn’t be lazy loaded — they’ll delay First Contentful Paint. Hero images, header logos, and banner photos should always load immediately.

Placeholder images matter too. Don’t leave blank space while images load. Use a low-quality placeholder (LQIP) or blurred version so users see something. This improves perceived performance significantly.

In Malaysia, where mobile browsing dominates, lazy loading is especially valuable. Network speeds vary widely, and users appreciate faster load times. One e-commerce site we worked with saw a 15% increase in conversion rate after implementing lazy loading — faster pages meant more people completed purchases.

Mobile phone showing a website with progressive image loading, some images loaded and others still loading

Useful Tools & Resources

These tools help measure and optimize lazy loading

PageSpeed Insights

Google’s official tool for measuring Core Web Vitals and performance metrics. Run your site before and after lazy loading implementation.

Chrome DevTools

Network tab shows exactly which images load when. You’ll see the difference — above-the-fold images load immediately, others wait until needed.

ImageOptim

Compress images before lazy loading them. Smaller files mean faster loads even with lazy loading. Essential for Malaysian users with limited bandwidth.

Intersection Observer Polyfill

If you need older browser support, this library ensures Intersection Observer works everywhere. Most teams don’t need it, but it’s there if required.

Key Takeaways

Lazy loading defers image loading until needed — it’s not optional anymore
Start with native loading="lazy" attribute — simple and effective
Use Intersection Observer for advanced control and custom behaviors
Always include image dimensions to prevent layout shift
Test with PageSpeed Insights to measure real improvements
In Malaysia, faster load times directly impact user engagement

Lazy loading is one of the quickest wins for Core Web Vitals improvement. It doesn’t require redesigning your site. You’re just being smarter about when content loads. Most teams see measurable results within days of implementation. That’s why it’s worth doing properly from the start.

Disclaimer

This guide provides educational information about lazy loading techniques and best practices for web performance optimization. Performance improvements depend on your specific website structure, content types, and user behavior patterns. Results may vary. For technical implementation assistance, consult with a qualified web developer or performance specialist. Always test changes on your own site before deploying to production.