Lazy Loading là gì? Kỹ thuật nạp chậm hình ảnh & component tăng 200% tốc độ website

Tại sao phải bắt trình duyệt tải toàn bộ 50 hình ảnh và 20 component phức tạp cùng lúc khi trang mới vừa mở, trong khi người dùng chỉ nhìn thấy phần đầu trang? Lazy Loading (Tải chậm / Nạp trì hoãn) là kỹ thuật chỉ tải tài nguyên khi chúng SẮP xuất hiện trên màn hình, giúp trang web nhanh hơn tới 200%!

1. Lazy Loading cho hình ảnh HTML

Cách đơn giản nhất là thêm thuộc tính loading="lazy" vào thẻ <img>:

<img
  src="/images/product.webp"
  alt="Sản phẩm"
  loading="lazy"
  width="600"
  height="400"
/>

Lưu ý quan trọng: KHÔNG gắn loading="lazy" cho tấm ảnh LCP đầu trang (Above the Fold). Ảnh này cần được nạp ngay lập tức bằng thuộc tính priority (xem bài tối ưu ảnh LCP).

2. Lazy Loading cho React Component với Dynamic Import

Trong Next.js, sử dụng dynamic() để tải component nặng chỉ khi cần:

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(
  () => import('@/components/HeavyChart'),
  {
    loading: () => <p>Đang tải biểu đồ...</p>,
    ssr: false,
  }
);

3. Lazy Loading cho các khối nội dung Below the Fold

Sử dụng Intersection Observer API để theo dõi khi nào khối nội dung sắp xuất hiện trên viewport, sau đó mới render component đó. Kỹ thuật này giảm đáng kể kích thước DOM ban đầu.

4. Kết hợp Lazy Loading với Skeleton Screen

Thay vì hiển thị spinner xoay tròn nhàm chán trong lúc chờ tải, sử dụng Skeleton Screen để tạo cảm giác trang web phản hồi tức thì.

Kết luận

Lazy Loading là kỹ thuật tối ưu hiệu năng nền tảng mà mọi website hiện đại đều phải áp dụng. Uwmee Software áp dụng Lazy Loading thông minh cho mọi hình ảnh và component trên website Next.js. Đọc thêm bài viết tối ưu Core Web Vitals.