Lazy-loading là gì?
Lazy-loading (hay lazyload) là một kỹ thuật tải/nạp tài nguyên giúp tiết kiệm băng thông và mang lại trải nghiệm người dùng tốt hơn.Khi bạn truy cập vào một trang web chứa rất nhiều hình ảnh hoặc video. Thông thường các trang web sẽ tải toàn bộ tài nguyên này ngay tại thời điểm truy cập.
Nhưng với lazy-loading, trang web sẽ chỉ tải các hình ảnh, video đang xuất hiện trong màn hình (viewport). Chỉ khi bạn cuộn xuống, các hình ảnh hay video tiếp theo mới được tải. Ở góc độ webmaster thì điều này sẽ tiết kiệm rất nhiều băng thông cho bạn.
Chính thức được hỗ trợ từ Chrome 76
Bắt đầu từ phiên bản 76, bạn sẽ có thể sử dụng thuộc tính mới là "loading" để nạp tài nguyên bằng lazy-loading mà không cần phải viết một đoạn code tùy chỉnh hoặc sử dụng thư viện JavaScript.Tại sao lại hỗ trợ sẵn lazy-loading?
Theo trang HTTPArchive, hình ảnh là loại tài nguyên được yêu cầu nhiều nhất cho 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ể ảnh hưởng xấu tới 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 sẽ 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ớ.
Hiện tại các lập trình viên đang sử dụng các thư viện lazy-loading được xây dựng dựa trên Observer API và các sự kiện "scroll", "resize" hoặc "orientationchange".
Tuy nhiên, với việc được hỗ trợ trực tiếp bởi trình duyệt, bạn sẽ không cần một thư viện bên ngoài nữa. Đồng thời cũng bảo đảm rằng hình ảnh và iframe vẫn hoạt động ngay cả khi JavaScript bị vô hiệu hóa trên máy người dùng.
Thuộc tính loading
Ngày nay, Chrome đã tải hình ảnh ở các mức độ ưu tiên khác nhau tùy thuộc vào vị trí của chúng đối với chế độ xem của thiết bị. Hình ảnh bên dưới khung nhìn được tải với mức độ ưu tiên thấp hơn, nhưng chúng vẫn được tìm nạp càng sớm càng tốt.Trong Chrome 76, bạn có thể sử dụng thuộc tính "loading" để trì hoãn hoàn toàn việc tải hình ảnh ngoài màn hình và iframe có thể tiếp cận khi cuộn trang:
<img alt="juno_okyo" height="200" loading="lazy" src="image.png" width="200" />
<iframe loading="lazy" src="https://www.junookyo.com"></iframe>
Dưới đây là các giá trị được hỗ trợ cho thuộc tính "loading":
- auto: Hành vi mặc định của trình duyệt, tương tự như khi bạn không dùng thuộc tính "loading".
- lazy: Trì hoãn tải tài nguyên cho đến khi đạt được khoảng cách đã tính toán từ chế độ xem.
- eager: Tải tài nguyên ngay lập tức, bất kể vị trí của nó trên trang.