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

Addy Osmani

Phương thức tải từng phần 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 phần tử đó. Điều 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ư với tính năng 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ạ về <iframe loading=lazy> này cho thấy các lượt nhúng video tải từng phần:

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

Phương thức nhúng của bên thứ ba bao gồm nhiều trường hợp sử dụng, từ trình phát video, bài đăng trên mạng xã hội và 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 tốn kém cho từng khung hình, ngay cả khi họ không cuộn đến nội dung đó.

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 dữ liệu trung bình 2-3%, giảm 1-2% Thời gian hiển thị nội dung đầu tiên ở trung vị và cải thiện Thời gian phản hồi lần tương tác đầu tiên (FID) 2% ở phân vị thứ 95.

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

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 các iframe và hình ảnh ngoài màn hình cho đến khi người dùng cuộn đến gần các iframe và hình ảnh đó. loading hỗ trợ hai giá trị:

• lazy: một đề xuất phù hợp để tải từng phần.
• eager: không phải là một ứng dụng phù hợp để tải từng phần. Tải ngay lập tức.

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ó tác động tương tự như việc tải tài nguyên một cách rõ ràng.

Nếu bạn cần tạo iframe động bằng cách sử dụ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 lượt nhúng iframe phổ biến sử dụng tính năng 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 từng phần sẽ làm các trang web phản hồi nhanh hơn nhiều. Các ví dụ sau đây cho thấy các điểm cải tiến về Thời gian tương tác (TTI) và tiết kiệm dữ liệu khi nhúng nội dung nghe nhìn, nhưng iframe quảng cáo tải từng phần có thể mang lại các lợi ích tương tự.

YouTube

Tính năng nhúng video trên YouTube theo phương thức tải từng phần sẽ 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 trên Instagram cung cấp một khối đánh dấu và một tập lệnh chèn iframe vào trang của bạn. Phương thức tải từng phần của iframe này sẽ giúp bạn tránh phải tải tất cả tập lệnh mà bạn cần nhúng và có thể tiết kiệm khoảng 100 kB trong lần tải đầu tiên. Vì các tệp 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 phương án hợp lý cho việc tải từng phần của iframe.

Spotify

Hoạt động nhúng Spotify tải từng phần có thể tiết kiệm 514 KB khi tải ban đầu.

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

Trình bổ trợ 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 của họ. Cách phổ biến nhất trong số này là trình bổ trợ Thích, nút cho biết số lượng người dùng đã "thích" trang. Theo mặc định, việc nhúng trình bổ trợ Thích vào một trang web bằng JSSDK của Facebook sẽ lấy khoảng 215 KB tài nguyên, 197 KB trong đó là JavaScript. Trình bổ trợ này thường xuất hiện ở cuối bài viết hoặc gần cuối trang, vì vậy, việc tải trình bổ trợ này ngay khi nằm ngoài màn hình có thể sẽ không đạt hiệu quả tối ưu.

Nhờ kỹ sư Stoyan Stefanov, tất cả các trình bổ trợ mạng xã hội của Facebook hiện đều hỗ trợ tính năng tải từng phần iframe được chuẩn hoá. Giờ đây, các nhà phát triển chọn sử dụng phương thức tải từng phần thông qua cấu hình data-lazy của trình bổ trợ có thể ngăn các trình bổ trợ này tải cho đến khi người dùng cuộn đến gầ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 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 trang. Chúng tôi hy vọng đây là tính năng đầu tiên trong số nhiều lượt nhúng khám phá phương thức tải từng phần của iframe đã chuẩn hoá trong bản phát hành công khai.

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

Bạn có thể áp dụng tính năng tải từng phần iframe cho trang web của mình dưới dạng một cải tiến tăng dần. Các trình duyệt hỗ trợ loading=lazy trên iframe sẽ tải từng phần iframe và những trình duyệt không hỗ trợ thuộc tính loading sẽ bỏ qua phần tử này một cách an toàn.

Bạn cũng có thể tải từng phần các iframe ngoài màn hình bằng cách sử dụng thư viện JavaScript lazysize. Bạn có thể muốn thực hiện việc này nếu bạn:

• Yêu cầu nhiều ngưỡng tải từng phần tuỳ chỉnh hơn so với phương thức tải từng phần được chuẩn hoá
• Muốn cung cấp cho người dùng trải nghiệm tải từng phần iframe nhất quán trên các trình duyệt.

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

Hãy sử dụng mẫu sau để phát hiện tính năng tải từng phần và tìm nạp từng phần tử khi 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ó trường hợp ngoại lệ đối với việc tải từng phần iframe ngoài màn hình không?

Một thử nghiệm ban đầu với các iframe tự động tải từng phần cho người dùng Trình tiết kiệm dữ liệu trong Chrome đã xác định một ngoại lệ đối với các iframe ẩn, thường dùng để giao tiếp hoặc phân tích. Các tính năng này không được tải từng phần và luôn tải để tránh làm hỏng các tính năng đó.

Thuộc tính loading không áp dụng các thông tin phỏng đoán này, vì vậy, nhà phát triển luôn phải chọn những gì được tải từng phần. Thuộc tính loading phải luôn đúng, tuân theo giới hạn về 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

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

Xin cảm ơn các bài đánh giá của Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley và Stoyan Stefanov.