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

Addy Osmani

Barry Pollard

Chế độ tải từng phần của các phần tử <iframe> sẽ trì hoãn quá trình tải các iframe ngoài màn hình cho đến khi người dùng cuộn đến gần vị trí đó. Việc này sẽ 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 iframe tải từng phần?

Nội dung nhúng của bên thứ ba có thể dùng trong nhiều trường hợp, từ trình phát video cho đến bài đăng trên mạng xã hội lên quảng cáo. Nội dung này thường không hiển thị 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 cho từng khung, ngay cả khi khung đó không cuộn tới khung hình đó.

Dựa trên nghiên cứu của Chrome về việc tự động tải lười các iframe ngoài màn hình cho người dùng Trình tiết kiệm dữ liệu, việc tải lười các iframe có thể giúp tiết kiệm 2-3% dữ liệu trung bình, giảm 1-2% Lần vẽ nội dung đầu tiên ở mức trung bình và cải thiện 2% Độ trễ đầu vào đầu tiên (FID) ở phân vị thứ 95.

iframe ngoài màn hình tải từng phần cũng có thể cải thiện Nội dung hiển thị (LCP). Vì iframe thường cần lượng băng thông đáng kể để tải tất cả các tài nguyên phụ, tải từng phần iframe ngoài màn hình có thể giảm tranh chấp băng thông khi bị hạn chế mạng trên nhiều thiết bị, giúp tạo ra nhiều băng thông hơn để tải các tài nguyên đóng góp vào LCP (Nội dung lớn nhất hiển thị).

Tính năng tải từng phần tích hợp sẵn cho iframe hoạt động như thế nào?

Thuộc tính loading cho phép trình duyệt trì hoãn việc tải iframe ngoài màn hình và cho đến khi người dùng cuộn lại gần chúng. loading hỗ trợ hai giá trị:

• lazy: một ứng viên phù hợp để tải từng phần.
• eager: không phải là lựa chọn phù hợp cho tính năng tải từng phần. Tải ngay.

Cách sử dụng thuộc tính loading trên iframe như sau:

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

Việc không chỉ định thuộc tính này sẽ có tác động tương tự như việc tải tài nguyên một cách rõ ràng và vội vàng.

Nếu bạn cần tạo iframe theo cách động bằng JavaScript, thì việc đặt iframe.loading = 'lazy' trên phần tử cũng được hỗ trợ:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

Các nội dung nhúng iframe phổ biến tải từng phần ảnh hưởng như thế nào đến trải nghiệm người dùng?

Việc đặt iframe tải lười làm mặc định sẽ giúp trang web phản hồi nhanh hơn nhiều. Các ví dụ sau đây cho thấy những điểm cải tiến về Thời gian tương tác (TTI) và tiết kiệm dữ liệu cho các nội dung nhúng nội dung nghe nhìn, nhưng các iframe quảng cáo tải lười cũng có thể mang lại những lợi ích tương tự.

YouTube

Các video nhúng trên YouTube bằng chế độ tải từng phần giúp tiết kiệm khoảng 500KB trong lần tải trang đầu tiên:

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

Instagram

Tính năng nhúng Instagram cung cấp một khối mã đánh dấu và một tập lệnh chèn một iframe vào trang của bạn. Tính năng tải lười của iframe này giúp bạn không phải tải tất cả tập lệnh cần thiết để nhúng và có thể tiết kiệm khoảng 100 kB khi tải lần đầu. Vì các nội dung nhúng này thường hiển thị bên dưới khung nhìn trong hầu hết các bài viết, nên đây là một đề xuất hợp lý để tải lười iframe.

Spotify

Tính năng tải lười nội dung nhúng Spotify có thể tiết kiệm 514 KB khi tải lần đầu.

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Các plugin mạng xã hội của Facebook

Trình bổ trợ mạng xã hội của Facebook cho phép nhà phát triển nhúng nội dung trên Facebook vào trang web. Phổ biến nhất trong số này là trình bổ trợ Thích, một nút cho biết số lượng người dùng đã "thích" trang. Theo mặc định, nhúng trình bổ trợ Thích trong một trang web sử dụng Facebook JSSDK thu hút khoảng 215 KB 197 KB trong số đó là JavaScript. Trình bổ trợ này thường xuất hiện ở cuối một bài viết hoặc ở gần cuối trang, nên hãy tải bài viết một cách nhanh chóng ngay khi nó nằm ngoài màn hình có thể chưa tối ưu.

Nhờ kỹ sư Stoyan Stefanov, tất cả trình bổ trợ mạng xã hội của Facebook hiện đều hỗ trợ tính năng tải lười khung nội tuyến (iframe) được chuẩn hoá. Những nhà phát triển chọn tải từng phần thông qua trình bổ trợ data-lazy cấu hình hiện có thể ngăn các plugin này tải cho đến khi người dùng cuộn lân cận. Điều này cho phép tính năng nhúng tiếp tục hoạt động cho những người dùng cần đến, đồng thời lưu dữ liệu cho những người dùng không cuộn xuống hết trang. Chúng tôi hy vọng đây là video nhúng đầu tiên trong số nhiều video nhúng để khám phá tính năng tải từng phần iframe được chuẩn hoá trong sản xuất.

Khi bạn muốn kiểm soát nhiều hơn đối với tính năng tải từng phần iframe

Tính năng tải lười iframe ở cấp trình duyệt được hỗ trợ tốt trên tất cả các trình duyệt chính và được đề xuất cho hầu hết các trường hợp sử dụng để không cần thêm các phần phụ thuộc trên JavaScript.

Tuy nhiên, nếu cần hỗ trợ các trình duyệt cũ hoặc muốn có nhiều quyền kiểm soát hơn đối với ngưỡng tải từng phần, bạn có thể sử dụng thư viện bên thứ ba để tải từng phần iframe trên trang web của mình. Thư viện JavaScript lazysizes là một thư viện như vậy cho phép các tuỳ chọn bổ sung mà bạn cần.

Có trường hợp ngoại lệ nào đối với tính năng tải lười iframe ngoài màn hình không?

Thử nghiệm sớm về iframe tự động tải từng phần cho Trình tiết kiệm dữ liệu người dùng trong Chrome có ngoại lệ đối với các iframe ẩn, thường được sử dụng cho thông tin liên lạc hoặc số liệu phân tích. Các URL này không được tải từng phần, và luôn được tải để ngăn chặn lỗi các tính năng đó.

Thuộc tính loading không áp dụng các phương pháp phỏng đoán này, vì vậy nhà phát triển luôn có thể chọn những gì được tải từng phần. Thuộc tính loading phải luôn là phù hợp, tuỳ theo giới hạn khoảng cách và các lựa chọn khác của trình duyệt (chẳng hạn như in).

Tài nguyên

Để biết thêm ý tưởng về tính năng tải từng phần, hãy xem bộ sưu tập về tính năng tải từng phần hình ảnh và video của web.dev.

Với sự góp mặt của Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley và Stoyan Stefanov đã chia sẻ các bài đánh giá của họ.