Lazy Loading là gì? Khi nào dùng và cách kiểm tra SEO

Lazy loading (tải trì hoãn) là cách chỉ tải tài nguyên chưa cần hiển thị khi nó sắp vào vùng nhìn thấy. Áp dụng đúng có thể giảm dữ liệu tải ban đầu; áp dụng sai có thể trì hoãn ảnh quan trọng hoặc khiến công cụ tìm kiếm không thấy nội dung. Bài này phân biệt ảnh/iframe tải trì hoãn với chia nhỏ mã JavaScript, kèm cách đo thay vì hứa tăng điểm SEO.

Lazy loading là gì?

Trình duyệt có thể trì hoãn ảnh và iframe ở xa vùng nhìn thấy, rồi tải chúng khi người dùng tiến gần tới vị trí đó. Thời điểm cụ thể do trình duyệt quyết định, không phải lúc nào cũng chờ đến đúng khoảnh khắc cuộn. Tài nguyên quan trọng ngay đầu trang nên được tải sớm. Lazy loading không thay thế việc nén ảnh, chọn kích thước phù hợp hoặc tối ưu máy chủ.

Khi nào nên dùng và khi nào cần tránh?

Ưu tiên cho ảnh minh họa ở sâu trong bài, iframe nhúng bên dưới và nội dung phụ ít người xem. Không thêm loading="lazy" cho ảnh hero hoặc phần tử có khả năng là Largest Contentful Paint (LCP): việc trì hoãn ảnh đó có thể làm LCP xấu đi. Kiểm tra trên cả màn hình di động và desktop vì cùng một ảnh có thể nằm trong vùng nhìn thấy ở thiết bị này nhưng không ở thiết bị khác. Hướng dẫn web.dev về ảnh đầu trang giải thích rủi ro này.

Chừa kích thước cho ảnh và iframe bằng thuộc tính width/height hoặc tỷ lệ khung trong CSS. Đây là cách hạn chế layout shift khi tài nguyên tải xong; bản thân việc bật lazy loading không tự giảm CLS. Xem thêm cách đọc Core Web Vitals.

Triển khai bằng HTML trước khi thêm JavaScript

Với ảnh/iframe dưới vùng đầu trang, bắt đầu bằng thuộc tính HTML gốc: loading="lazy". Ví dụ rút gọn: <img src="/images/example.jpg" loading="lazy" width="800" height="450" alt="Mô tả ảnh">. Không áp dụng máy móc cho toàn bộ ảnh trong template; chọn phần tử theo vai trò thực tế. Trình duyệt cũ không hỗ trợ thuộc tính này thường tải ảnh như bình thường, nên không mặc định cần cài polyfill hoặc một thư viện lạ.

Khi nào dùng Intersection Observer?

Nếu có thành phần động cần tải dữ liệu khi tiến gần viewport, Intersection Observer có thể quan sát phần tử rồi kích hoạt tải. Hãy có trạng thái lỗi, hủy quan sát khi không còn cần và bảo đảm nội dung quan trọng vẫn xuất hiện khi JavaScript lỗi hoặc người dùng không cuộn. Không buộc nội dung cần index chỉ xuất hiện sau một nút bấm. Google hướng dẫn nội dung lazy-load cần hiện khi vào viewport, vì Google Search không thao tác cuộn hoặc nhấp như người dùng.

Chia nhỏ JavaScript khác với lazy-load ảnh

Dynamic import hoặc code splitting giúp chỉ tải mã cho một tính năng khi cần. Đây là bài toán JavaScript bundle, không đồng nghĩa “server-side lazy loading” của ảnh. Một widget biểu đồ bên dưới có thể được tải muộn, nhưng nội dung cốt lõi và liên kết điều hướng cần có trong HTML/render để người dùng và bot truy cập được. Kiểm tra tác động thực tế lên bundle, CPU và thời gian tương tác; không giả định việc tách mã luôn cải thiện LCP.

Kiểm tra khả năng Google thấy nội dung

Kiểm tra HTML được render trong URL Inspection và xác nhận ảnh, video hoặc nội dung chính có URL thực khi vào viewport, không chờ một thao tác bắt buộc. Nếu dùng infinite scroll, các nhóm nội dung nên có URL phân trang ổn định và liên kết để Google khám phá. Đừng dùng lazy loading để che nội dung chính hoặc thay cho phân trang. Đọc checklist lazy-load của Google.

Đo kết quả trước khi áp dụng toàn site

1. Ghi số byte ảnh/iframe tải ban đầu, LCP, CLS và số yêu cầu mạng trên một vài trang mẫu.
2. Thử trên mạng chậm và thiết bị di động, kiểm tra ảnh đầu trang không bị trì hoãn.
3. Kiểm tra link, ảnh và nội dung được render trong Search Console; với thành phần JavaScript, thử tình huống lỗi mạng.
4. So cùng URL, thiết bị và điều kiện đo sau thay đổi; giữ giải pháp nếu người dùng thực sự được lợi, không theo một “điểm SEO” chung.

Câu hỏi thường gặp

Có nên lazy-load mọi hình ảnh?

Không. Ảnh đầu trang và ảnh LCP thường cần tải sớm; ảnh dưới trang mới là ứng viên. Hãy xét từng template và viewport.

Có cần thư viện JavaScript?

Không cho trường hợp ảnh/iframe HTML thông thường. Chỉ thêm JavaScript khi có nhu cầu động cụ thể và đã kiểm tra khả năng truy cập, bảo trì, bảo mật của giải pháp.

Lazy loading có tự tăng hạng không?

Không. Kỹ thuật có thể giúp giảm tài nguyên tải ban đầu, nhưng triển khai sai có thể làm LCP hoặc khả năng thấy nội dung xấu đi. Đo hiệu năng và kiểm tra render trước khi kết luận.

Nếu cần rà ảnh LCP và tài nguyên dưới trang trong website doanh nghiệp, trao đổi với Cyno về kiểm tra hiệu năng theo template.