Một bài đăng trên blog web.dev được xuất bản vào ngày 6 tháng 8 năm 2019 có tiêu đề Native lazy-loading for the web với nội dung chính thêm thuộc tính loading="lazy" trong thẻ hình ảnh để trì hoãn việc tải hình ảnh ngoài màn hình và iframe. Tính năng này được giới thiệu trong trình duyệt Chrome phiên bản 76 và ổn định cho phiên bản trình hiện tại.
 |
| Kích hoạt tính tính lazy image và lazy iframe trong chrome flags |
Cụ thể, khi bạn kích đã hoạt 2 tính năng lazy image và lazy iframe trong chrome flags, nếu bạn thêm thuộc tính loading="lazy" trong thẻ <img> hay <iframe> trang blog của bạn khi tải các hình ảnh hay iframe sẽ được trì hoãn tải sau font chữ, css và văn bản mà không cần sử dụng đến các thư viện JavaScript trì hoãn nào.
Tại sao phải sử dụng lazy loading?
Hình ảnh là loại tài nguyên được yêu cầu nhiều nhất đối với hầu hết các trang web và thường chiếm nhiều băng thông hơn bất kỳ tài nguyên nào khác. Iframe nhúng cũng sử dụng nhiều dữ liệu và có thể gây hại cho hiệu suất trang. Chỉ tải các hình ảnh và iframe không quan trọng khi người dùng có thể thấy chúng giúp cải thiện thời gian tải trang, giảm thiểu băng thông người dùng và giảm mức sử dụng bộ nhớ.
Để kiểm tra và kích hoạt tính năng, trên địa chỉ trình duyệt, copy liên kết bên dưới vào địa chỉ nhấn enter
chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading
Một yêu cầu bắt buộc khi bạn thêm thuộc tính loading="lazy" vào thẻ <img> và <iframe> thì các thẻ này phải có hai thuộc tính width/height bằng một kích thước cụ thể
<img alt="…" loading="lazy" src="…" width="400" height="200">
<iframe loading="lazy" src="…" width="400" height="200" title="…"></iframe>
Tham khảo bài viết Tìm hiểu thuộc tính 'width, 'height' của thẻ dữ liệu hình ảnh bài viết blogspot
Cách thêm thuộc tính loading="lazy" trong thẻ <img> và <iframe> trong blogspot
Trong chỉnh sửa chủ đề XML của theme gõ tìm kiếm các thẻ <img và <iframe và thêm thuộc tính loading="lazy" bên trong thẻ. Các bạn nhớ thêm cả 2 thuộc tính width/height chỉ định kích thước ảnh và iframe nếu không console của trình duyệt sẽ cảnh báo nếu thuộc tính width/height không được thêm vào.
Với trường hợp ảnh trong bài viết, khi soạn mới hay chỉnh sửa lại bên tab HTML của bài đăng tìm các thẻ <img> và <iframe> thêm thuộc tính loading="lazy" bên trong, với kích thước bạn cứ lấy theo kích thước ảnh gốc khi upload lên theo thuộc tính data-original-width và data-original-height, ví dụ:
<img alt="…" border="0" width="640" height="429" loading="lazy" data-original-width="640" data-original-height="429" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcCP1N0vOYoN0HXhQB93cCCOyy50zcO7s9pNEB_RZ08DQ2tPHX8TCIupPeuqIXXCYj7FIZhSJo3Ig7Ndw4cc2pz3TAAy7hXSoa1hh29RZtSxE-uVD-trPJZXMbBaH6kwqlZTfuX0MDln6/s1600/2020-03-03_14-40-29.webp" />
Bài đề xuất
- Sử dụng định dạng ảnh WebP để giảm kích thước trang và cải thiện hiệu suất
- Làm cho trang tải nhanh trên thiết bị di động
Kết luận
Thuộc tính loading="lazy" chỉ được hỗ trợ trong trình duyệt Google Chrome, nếu thuộc tính được thêm vào thẻ hình ảnh hay iframe sẽ giúp trì hoãn tài ảnh và iframe khi trang tải giúp tăng hiệu suất trang, trang tải nhanh hơn.
Liên kết tham khảo: https://web.dev/native-lazy-loading
