Vì sao chrome load script load

Trình duyệt Chrome chính thức hỗ trợ lazy load cho ảnh và iframe ở cấp độ trình duyệt! Dưới đây là video demo tính năng này:

Bắt đầu từ Chrome 76, bạn có thể sử dụng thuộc tính loading để lazy load các tài nguyên mà không cần viết riêng mã lazy-loading hoặc sử dụng riêng thư viện JavaScript [chẳng hạn như lazysizes]. Chúng ta sẽ đi vào chi tiết ngay sau đây.

P/S: native trong cụm từ “native lazy-loading” có thể được dịch sát nghĩa là “tải lười kiểu bản địa” hoặc “lazy-loading bản địa”, tuy nhiên tôi [người dịch] thấy giữ nguyên từ gốc tiếng Anh hay hơn, hoặc nếu có dịch sẽ dùng từ “lazy-loading cấp trình duyệt” cho dễ hiểu.

Cập nhật nhanh: native lazy-loading đã được tích hợp sẵn và các bản cài đặt của WordPress. Nó cũng được nhiều trình duyệt hỗ trợ hơn thay vì chỉ có mỗi Chrome thủa ban đầu, và dự tính sẽ sớm được tất cả trình duyệt hỗ trợ.

Tại sao lại dùng native lazy-loading?

Theo HTTPArchive, ảnh là thành phần được yêu cầu nhiều nhất trên hầu hết website và thường chiếm nhiều băng thông hơn bất kỳ tài nguyên nào. Ở phân vị 90[*], các website gửi 4,7 MB ảnh trên máy bàn và di động.

[*]: phân vị thứ 90 [90th percentile], theo cách hiểu thông thường là những trang web có dung lượng ảnh lớn hơn 90% các website khác, nói cách khác top 10% các website có nhiều ảnh nhất chứa ít nhất 4,7 MB ảnh.

Nhúng iframe cũng sử dụng rất nhiều dữ liệu và có thể ảnh hưởng tiêu cực đến hiệu suất của trang [page performance]. Nếu chúng ta chỉ tải các ảnh, iframe không quan trọng [non-critical], nằm trong màn hình thứ hai trở đi [below-the-fold] khi người dùng cần xem chúng thì sẽ giúp cải thiện thời gian tải trang [page load times], tối thiểu hóa băng thông [bandwidth], và giảm sử dụng bộ nhớ.

Hiện tại có hai cách để trì hoãn tải ảnh và iframe không thuộc màn hình đầu tiên [off-screen]:

Cả hai tùy chọn này có thể cho phép lập trình viên bao gồm hàm lazy-loading vào website, và nhiều lập trình viên xây dựng thư viện của bên thứ ba để đưa ra các abstraction thậm chí còn dễ sử dụng hơn. Nhưng với lazy-loading được hỗ trợ trực tiếp bởi trình duyệt, bạn không cần đến các thư viện bên ngoài [external library] nữa. Native lazy loading cũng đảm bảo việc trì hoãn tải ảnh và iframes vẫn hoạt động bình thường ngay cả khi JavaScript bị vô hiệu hóa trên trình duyệt của người dùng [còn gọi là máy khách/client].

P/S: Rất hiếm khi trình duyệt bị vô hiệu hóa JavaScript, vì các website hiện đại, nhiều chức năng thì JavaScript là một thành phần cốt lõi, nhưng nếu nó bị vô hiệu hóa, mà trang của bạn không triển khai dự phòng bằng thẻ thì lazy load sẽ bị gặp lỗi không hiển thị ảnh. Bạn có thể thử vô hiệu hóa JS trên Chrome bằng cách vào copy đường dẫn sau vào thanh địa chỉ:

chrome://settings/content/javascript

Rồi nhấn button vô hiệu hóa, tiếp theo bạn thử vào trang này, sẽ thấy nhiều ảnh không được tải: //static.chimcat.net/2020/lazysizes-demo1.html

Thuộc tính loading

Ở thời điểm hiện tại, Chrome đã hỗ trợ tải ảnh ở các cấp độ ưu tiên khác nhau phụ thuộc vào vị trí của nó tương quan với viewport [khung nhìn] của thiết bị. Ảnh ở bên dưới viewport được tải với mức ưu tiên thấp hơn [lower priority], nhưng chúng sẽ vẫn được tìm nạp [fetched] để tải về nhanh nhất có thể [as soon as possible].

Trong Chrome 76, bạn có thể sử dụng thuộc tính loading để trì hoãn tải hoàn toàn các ảnh và iframes không thuộc màn hình đầu tiên [những khu vực mà phải cuộn chuột mới tiếp cận được], mã trông giống như thế này:

if ['loading' in HTMLImageElement.prototype] { const images = document.querySelectorAll['img[loading="lazy"]']; images.forEach[img => { img.srx = img.dataset.srx; }]; } else { // Dynamically import the LazySizes library const script = document.createElement['script']; script.srx = '//cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js'; document.body.appendChild[script]; }

Dưới đây là trang demo cho kiểu tải này. Bạn hãy thử nó trên trình duyệt FireFox hoặc Safari để xem mã dự phòng hoạt động ra sao.

Lưu ý: Thư viện lazysizes cũng cung cấp plugin native loading được sử dụng để native lazy-loading khi có cơ hội nhưng vẫn có dự phỏng bằng chức năng tùy chỉnh của thư viện khi cần thiết.

Native lazy-loading ảnh hưởng như thế nào đến các quảng cáo trên trang web?

Tất cả các quảng cáo hiển thị cho người dùng dưới dạng ảnh hoặc iframe sẽ được lazy-load giống như bất kỳ ảnh hoặc iframe nào khác.

Ảnh sẽ được xử lý như thế nào khi trang web được in?

Mặc dù chức năng này không có trong Chrome 76, có một open issue để đảm bảo rằng tất cả ảnh và iframe được tải ngay lập tức nếu trang trong chế độ in ấn.

Kết luận

Triển khai lazy-loading ảnh và iframe dưới dạng native của trình duyệt có thể làm nhiệm vụ này trở nên dễ dàng hơn đáng kể cho mục tiêu cải thiện hiệu suất của trang web.

Nếu bạn để ý thấy bất kỳ hành vi bất thường nào với tính năng này trên Chrome hãy báo cho chúng tôi biết.

[Dịch từ bài viết: Native lazy-loading for the web, các tác giả: Houssein Djirdeh, Addy Osmani và Mathias Bynens, trang web: web[.]dev]

Thông tin bổ sung. Hiện tôi biết có 2 plugin cho WordPress hỗ trợ tính năng native lazy-loading là:

Mặc dù rất thích lazy loading, tôi có một bài viết mang hơi hướng chống lại nó: Tại sao lazy load ảnh không hấp dẫn như bạn nghĩ.