Đã đến lúc tải từng phần các iframe ngoài màn hình!

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 121.
  • Safari: 16.4.

Tính năng tải lười của các phần tử <iframe> sẽ trì hoãn việc tải các iframe ngoài màn hình cho đến khi người dùng cuộn gần các iframe đó. Việc này giúp tiết kiệm dữ liệu, tăng tốc độ tải các phần khác của trang và giảm mức sử dụng bộ nhớ.

Tương tự như tải từng phần cho hình ảnh, hãy sử dụng thuộc tính loading để cho trình duyệt biết bạn muốn tải từng phần một iframe.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Bản minh hoạ này về <iframe loading=lazy> cho thấy các phần nhúng video tải lười:

Tại sao nên tải từng phần iframe?

Nội dung nhúng của bên thứ ba có thể được dùng trong nhiều trường hợp, từ trình phát video đến bài đăng trên mạng xã hội và quảng cáo. Nội dung này thường không xuất hiện ngay trong khung nhìn của người dùng, nhưng người dùng vẫn phải trả chi phí tải dữ liệu xuống và JavaScript tốn kém cho mỗi khung, ngay cả khi họ không cuộn đến khung đó.