Web

Lazy loading là gì?

lazy loadinglazy loadtải lườitải trễ

Lazy loading là kỹ thuật chỉ tải ảnh, video hay nội dung khi người dùng sắp cuộn đến, thay vì tải hết ngay từ đầu, giúp trang mở nhanh và tiết kiệm dữ liệu.

Hiểu kỹ hơn

Trong HTML, chỉ cần thêm loading="lazy" cho thẻ img hoặc iframe. Không nên lazy load ảnh lớn ở đầu trang (ảnh hero), vì sẽ làm nội dung chính hiện chậm hơn. Khi lazy load, nên khai báo kích thước ảnh để tránh bố cục nhảy khi ảnh tải xong.

Ảnh minh hoạ Lazy loading (tải trễ): một trang dài với ảnh trong màn hình đã tải và ảnh phía dưới còn chờ tải, có mũi tên cuộn
Một trang dài với ảnh trong màn hình đã tải và ảnh phía dưới còn chờ tải, có mũi tên cuộn

Thuật ngữ liên quan

01Core Web Vitals (LCP, INP, CLS)

Core Web Vitals là bộ chỉ số của Google đo trải nghiệm thực tế khi tải và dùng trang web: LCP (nội dung chính hiện nhanh không), INP (phản hồi thao tác…

02Tối ưu ảnh cho web (image optimization)

Tối ưu ảnh cho web là việc giảm dung lượng ảnh mà vẫn giữ chất lượng đủ đẹp, bằng cách chọn đúng kích thước, định dạng, mức nén, để trang tải nhanh hơn.

03Skeleton screen (khung chờ tải)

Skeleton screen là bố cục giả dạng các khối xám hiện ra trong lúc nội dung đang tải, mô phỏng vị trí của ảnh và chữ sắp xuất hiện, giúp việc chờ có cảm…

04HTML

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu dùng để tạo cấu trúc và nội dung của trang web: tiêu đề, đoạn văn, hình ảnh, liên kết, nút, biểu mẫu.