Lazy loading nội dung và hình ảnh: tải chậm thế nào mà không làm mất nội dung chính?
Biên soạn: Nguyễn Minh Phương · 11 phút đọc · Cập nhật 24/8/2026
Trả lời nhanh
Lazy loading nên áp dụng cho tài sản ngoài màn hình; nội dung chính và ảnh quan trọng không nên phụ thuộc click. QA phải kiểm tra rendered output, fallback, lỗi API và Core Web Vitals.
Khung áp dụng
Ba điểm cần kiểm tra trước khi làm
Phù hợp với website nhiều ảnh, danh sách dài, component tải dữ liệu hoặc ứng dụng JavaScript.
| STT | Câu hỏi ra quyết định | Hành động hoặc bằng chứng cần có |
|---|---|---|
| 1 | Asset có nằm trong màn hình đầu hoặc ảnh hưởng LCP không? | Phân loại above/below fold assets. |
| 2 | Crawler và người dùng có thấy nội dung khi không click/scroll không? | Giữ core content không phụ thuộc click. |
| 3 | API, placeholder và fallback hoạt động ra sao khi lỗi? | Test API/error/fallback. |
Chỉ lazy-load phần ngoài màn hình và không giấu nội dung chính sau tương tác
Google khuyến nghị tải nội dung lazy khi vào viewport theo cách có thể render, không dựa vào click hoặc typing. Hero, heading, thông tin ra quyết định và CTA quan trọng cần có sớm; ảnh dưới màn hình có thể dùng native loading hoặc cơ chế quan sát viewport. Placeholder cần giữ kích thước để giảm dịch chuyển bố cục, trong khi alt và liên kết vẫn thuộc markup phù hợp.
- Không lazy-load hero chỉ để giảm số request ban đầu.
- Không yêu cầu click để crawler thấy nội dung chính.
- Đặt width/height hoặc aspect ratio cho ảnh.
URL, status và fallback vẫn cần hoạt động khi JavaScript hoặc API chậm
Nội dung theo trang hoặc chunk phải có URL trực tiếp nếu là phần độc lập. Khi API lỗi, giao diện không nên trả shell 200 rồi mất toàn bộ nội dung; error state và retry cần rõ cho người dùng. Progressive enhancement giữ HTML hoặc fallback cần thiết, đặc biệt với navigation, pagination và thông tin cốt lõi. Cache và CDN được kiểm tra để không giữ placeholder thay nội dung.
- Test direct URL và hard refresh.
- Không để loading skeleton thành nội dung indexed.
- Có fallback cho link và pagination.
QA đo cả rendering, khả năng dùng và hiệu suất thực tế
Test matrix so response HTML, rendered DOM, screenshot, network waterfall, image requests, alt text, keyboard/assistive use và Core Web Vitals. Kiểm tra mạng chậm, JavaScript disabled có chọn lọc, API error, scroll sâu và mobile. Lazy loading có thể cải thiện tải ban đầu nhưng triển khai sai làm chậm ảnh quan trọng hoặc không tải nội dung; không có một thuộc tính bảo đảm SEO hoặc trải nghiệm.
- Kiểm tra URL mẫu theo template.
- Đo LCP image có bị lazy nhầm không.
- Gắn lỗi với release và component.
Tình huống minh họa
Ảnh hero bị gắn lazy và trở thành LCP chậm
Hero được tải ưu tiên, còn gallery dưới màn hình tiếp tục dùng lazy load có kích thước cố định và alt đầy đủ.
Lazy-load annotated QA
Tải chậm chỉ có lợi khi nội dung cốt lõi vẫn có đường xuất hiện ổn định
Annotate priority, trigger, placeholder, fallback and URL
Google khuyến nghị lazy-load theo viewport và không phụ thuộc click/typing để tải nội dung cần index. Asset map đánh dấu hero/LCP, below-fold media, content chunk, trigger, dimensions, alt, direct URL và fallback. Hero hoặc thông tin quyết định được tải sớm; ảnh dưới màn hình giữ kích thước để tránh layout shift.
- Không lazy LCP image.
- Không click-gate core content.
- Không bỏ dimensions/alt.
Test rendering, API failure, deep scroll and user interaction
QA so response và rendered DOM, network requests, screenshot, status và Core Web Vitals trên mobile/mạng chậm. API error không được biến thành shell 200; pagination hoặc links có fallback crawlable. Progressive enhancement giữ task chính hoạt động khi JavaScript thất bại. Kết quả performance được đọc cùng usability, không chỉ request count.
- Mở direct chunk URL.
- Test placeholder caching.
- Gắn lỗi với component/release.
Checklist triển khai
- Phân loại above/below fold assets.
- Giữ core content không phụ thuộc click.
- Test API/error/fallback.
- Đo rendered output và CWV.
Ảnh chụp công cụ thực tế
Màn hình kiểm tra thực tế bằng PageSpeed Insights
Tóm tắt
Map priority/trigger/fallback, giữ core content crawlable và test rendering, API error cùng LCP. Lazy loading không mặc định cải thiện hiệu suất hoặc SEO; kết quả phụ thuộc template và thiết bị.
Tài liệu tham khảo
- Google Search Central — Fix lazy-loaded content
- Google Search Central — Understand the JavaScript SEO basics
- Google Search Central — Pagination, incremental page loading, and Search
- Google Search Central — Core Web Vitals report
Ghi chú biên soạn: nội dung được tổng hợp từ các tài liệu được liệt kê và giới hạn ở góc nhìn quản lý thông tin marketing; bài không bảo đảm vị trí hiển thị trên Google.