Image Lazy Loading là một kỹ thuật tối ưu hóa hiệu suất trang web, khiến trình duyệt chỉ load các hình ảnh đang hiển thị sẵn hoặc sắp hiển thị trên màn hình. Điều này làm tăng hiệu suất vì trình duyệt sẽ chỉ tải xuống và hiển thị hình ảnh khi cần thiết thay vì tải xuống tất cả cùng một lúc.
Mozilla Firefox hỗ trợ tính năng Lazy Loading của Chrome
Theo truyền thống, nhà phát triển sẽ bổ sung tính năng Lazy Loading cho một trang web thông qua các thư viện JavaScript của bên thứ ba, nhưng với việc phát hành Chrome 76, Google đã thêm nó như một tính năng gốc cho trình duyệt của mình. Để sử dụng tính năng này, nhà phát triển đơn giản chỉ cần thêm thuộc tính loading="lazy" vào các thẻ HTML IMG như hiển thị bên dưới:
Tính năng Lazy Loading đã có mặt trong phiên bản Firefox Nightly mới nhất, ngay bây giờ người dùng có thể tải và cài đặt theo liên kết được chia sẻ bên dưới:
- Tải Firefox Nightly mới nhất tại đây: Download Firefox Nightly
Trong bản build Firefox 75 Nightly hiện tại, Mozilla đã bổ sung một tùy chọn about:config mới có tên là "dom.image-lazy-loading.enabled", cho phép bạn bật tính năng Lazy Loading trong trình duyệt.
Để thử nghiệm tính năng này, bạn đơn giản chỉ cần mở công cụ phát triển của Firefox, click vào tab Network và say đó truy cập vào trang lazy loading demo.
Khi tải trang lần đầu tiên, bạn sẽ nhìn thấy rằng Firefox chỉ download các nguồn và hình ảnh cần thiết để hiển thị những hình ảnh có thể xem được trên trình duyệt. Khi bạn cuộn xuống dưới, bảng điều khiển dành cho nhà phát triển sẽ hiển thị rằng Firefox tải xuống nhiều hình ảnh hơn vì chúng gần như hiển thị hết trong trình duyệt.
Với việc 2 nhà phát triển trình duyệt lớn nhất hỗ trợ tình năng Lazy Loading trực tiếp trong trình duyệt, một thư viện JavaScript được cần để duy trì và tải xuống từ các trang web sẽ được loại bỏ.