Lazy loading FAQs

Mặc định là <img> có loading=eager, nghĩa là nó load ngay khi vào trang, app mình thêm loading=lazy, để load khi cuộn đến ảnh "loading" là 1 property do browser (chrome, firefox, ...) hỗ trợ sẵn, nếu browser ko hỗ trợ loading=lazy thì nó tự động bỏ qua và coi là loading=eager https://web.dev/browser-level-image-lazy-loading/

Lỗi 429 (Too Many Requests)

Thường xảy ra khi site đang chạy optimize ảnh mà bật/tắt Minification/Lazy Loading. Do cả 3 tính năng cần gọi nhiều Shopify API.

tip

Đợi optimize ảnh và Minification xong rồi bật/tắt Lazy Loading lại

Lỗi 422 (Unprocessable Entity)

Có thể do 1 số file liquid trong theme có thẻ <img> nhưng không ghi thêm props loading="lazy" được.

Xin quyền theme và báo TS check. TS: tìm các file trong theme có thẻ img, xem file nào ko thể thêm props loading="lazy" thì sửa, hoặc thêm key của file đấy vào

/dev_zone > Lazy Loading > Ignore files

Để skip file đấy khỏi bị thêm loading="lazy" vào <img>