Lazy Loading trong website

Lazy loading là một kỹ thuật đã được biết đến từ rất lâu trong phát triển web, giúp cải thiện hiệu năng trang web bằng cách tải tài nguyên (JavaScript, CSS, hình ảnh, iframe…) chỉ khi cần thiết. Ban đầu, chúng ta phải dựa vào các thủ thuật và JavaScript để triển khai lazy loading, nhưng ngày nay các trình duyệt hiện đại đã hỗ trợ native lazy loading thông qua thuộc tính đơn giản, giúp tiết kiệm thời gian và công sức của nhà phát triển.

Lợi Ích Của Lazy Loading

Khi áp dụng lazy loading, trang web sẽ không tải ngay lập tức tất cả các tài nguyên nặng khi truy cập. Thay vào đó, chỉ những phần mà người dùng cần xem mới được tải. Điều này giúp:

• Tăng tốc độ tải trang: Giảm thiểu lượng dữ liệu tải ban đầu.
• Tiết kiệm băng thông: Chỉ tải tài nguyên khi thực sự cần thiết.
• Cải thiện trải nghiệm người dùng: Trang web phản hồi nhanh và mượt mà hơn.

Lazy Loading Hình Ảnh và IFRAME

Trong thời gian qua, lazy loading hình ảnh đã trở thành tiêu chuẩn cho các website hiện đại. Điều thú vị là bạn cũng có thể áp dụng lazy loading cho các iframe – ví dụ, khi nhúng nội dung từ bên ngoài như video hay bài viết từ các nguồn khác.

Ví Dụ: Lazy Loading IFRAME

Bạn chỉ cần thêm thuộc tính loading=”lazy” vào thẻ <iframe>, và trình duyệt sẽ chỉ tải nội dung iframe đó khi nó sắp xuất hiện trên màn hình người dùng.

<iframe 
    src="https://example.com/"
    loading="lazy"
    onload="console.log('Iframe đã được tải');"
    width="600" 
    height="400">
</iframe>

Trong ví dụ trên, iframe sẽ không tải ngay lập tức khi trang được mở, mà chỉ khi người dùng cuộn đến gần nó, giúp tối ưu hiệu năng trang web.

Tổng Kết

Lazy loading đã giúp nhiều nhà phát triển tối ưu hóa hiệu năng website một cách đáng kể. Hãy áp dụng kỹ thuật này để tối ưu dự án của bạn nhé!