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

Addy Osmani

Barry Pollard

Hỗ trợ trình duyệt

• 77
• 79
• 121
• 16,4

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ớ.

Cũng như tải từng phần cho hình ảnh, 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 iframe.

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

Bản minh hoạ này về <iframe loading=lazy> hiển thị các video nhúng tải từng phần:

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 đó.

Tải nhanh các iframe ngoài màn hình có nghĩa là người dùng làm lãng phí dữ liệu bằng cách tải các phần tử mà chúng có thể không bao giờ nhìn thấy.

Dựa trên nghiên cứu của Chrome về iframe tự động tải từng phần ngoài màn hình cho người dùng Trình tiết kiệm dữ liệu, iframe tải từng phần có thể giúp tiết kiệm 2-3% dữ liệu trung bình, 1-2% Mức giảm về tỷ lệ Nội dung đầu tiên hiển thị ở mức trung vị là 2% Cải thiện Độ 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 phương á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.

Việc sử dụng thuộc tính loading trên iframe hoạt động 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 cũng có tác động tương tự như việc tải nhanh một cách rõ ràng tài nguyên.

Nếu cần động tạo iframe bằng JavaScript, hãy đặt iframe.loading = 'lazy' trên phần tử này 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ạo iframe tải từng phần theo mặc định sẽ giúp các trang web phản hồi nhanh hơn nhiều. Các ví dụ sau đây minh hoạ những điểm cải tiến về Thời gian tương tác (TTI) và dữ liệu tiết kiệm được cho các lượt nhúng nội dung nghe nhìn, nhưng iframe quảng cáo tải từng phần có thể cho kết quả tương tự các lợi ích khác.

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>

Chrome.com đã giảm TTI xuống 10 giây tải từng phần các video nhúng YouTube ngoài màn hình.

Lưu ý: Nếu đang tìm kiếm những cách hiệu quả hơn để tải video nhúng trên YouTube, bạn có thể có thể quan tâm đến thành phần YouTube lite.

Instagram

Nhúng trên Instagram cung cấp một khối đánh dấu và một tập lệnh chèn vào trang của bạn. Tải từng phần iframe này giúp tránh phải tải tất cả viết mã cho các nhu cầu nhúng và có thể tiết kiệm khoảng 100 kB khi tải ban đầu. Bởi vì những nhúng này thường được hiển thị bên dưới khung nhìn trong hầu hết các bài viết, đây là lựa chọn hợp lý cho chức năng tải từng phần iframe.

Spotify

Các nội dung nhúng Spotify tải từng phần có thể tiết kiệm 514 KB trong lần tải đầu tiên.

<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.

Trình bổ trợ Thích của Facebook.

Nhờ kỹ sư Stoyan Stefanov, tất cả trình bổ trợ mạng xã hội của Facebook hiện nay hỗ trợ iframe đã chuẩn hoá tải từng phần. 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. Nhờ vậy, nội dung nhúng có thể duy trì hoạt động cho những người dùng cần đến, trong khi giúp tiết kiệm dữ liệu cho những người dùng không cuộn hoàn toàn xuống dưới mộ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.

Tải từng phần iframe trên nhiều trình duyệt

Tính năng tải từng phần 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 khuyên dùng cho hầu hết các trường hợp sử dụng để không cần phải sử dụng thêm các phần phụ thuộc trên JavaScript.

Tuy nhiên, nếu cần hỗ trợ nhiều trình duyệt hơn 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 của bên thứ ba để tải từng phần iframe trên trang web của mình.

Bạn cũng có thể tải từng phần iframe ngoài màn hình bằng cách sử dụng lazysizes Thư viện JavaScript:

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

Sử dụng mẫu sau đây để phát hiện tính năng tải từng phần và tìm nạp từng phần khi tính năng này không có sẵn:

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

Có ngoại lệ nào đối với tính năng tải từng phần 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 các ý tưởng tải từng phần, hãy tham khảo bộ sưu tập tải từng phần hình ảnh và video.

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ọ.