Lazy load sai cách làm hỏng LCP
Lazy load sai cách khiến LCP tăng vọt và tụt thứ hạng SEO. Cùng LuckySEO tìm hiểu lý do không nên lazy load ảnh hero và loại bỏ thư viện JS rườm rà!
Trong quá trình tối ưu hóa hiệu năng website và làm SEO Onpage, chỉ số LCP (Largest Contentful Paint) luôn là một trong những cột mốc quan trọng nhất thuộc Core Web Vitals của Google. LCP đo lường thời gian hiển thị phần tử nội dung lớn nhất trong màn hình đầu tiên, thông thường là một bức ảnh banner chính (hero image) hoặc một khối văn bản lớn. Rất nhiều bạn sinh viên lập trình web và người mới làm quen với SEO thường được khuyên rằng: 'Hãy gắn tính năng lazy load cho toàn bộ hình ảnh trên trang để tăng tốc độ tải trang'. Tuy nhiên, đây là một tư duy rập khuôn vô cùng nguy hiểm. Khi áp dụng lazy load không đúng đối tượng, bạn vô tình kéo lùi thời điểm trình duyệt phát hiện và tải bức ảnh quan trọng nhất.
Một sai lầm kinh điển khác mà LuckySEO thường ghi nhận ở các dự án lập trình web là việc lạm dụng các thư viện JavaScript bên thứ ba như lazysizes hay Lozad.js để quản lý việc tải ảnh. Hiện nay, các trình duyệt hiện đại như Chrome, Firefox, Safari đều đã hỗ trợ thuộc tính chuẩn HTML5 native `loading="lazy"` với độ bao phủ lên tới hơn 96% người dùng. Việc nhồi nhét thêm các thư viện JS không chỉ làm gia tăng thời gian xử lý của luồng chính Main Thread mà còn gây ra hiện tượng nghẽn mạng do mã script phải khởi chạy xong thì bức ảnh mới bắt đầu được tải về. Bài viết này sẽ phân tích chi tiết nguyên lý hoạt động và hướng dẫn cách khắc phục triệt để.
1. Vì sao Lazy Load ảnh Hero lại biến LCP thành thảm họa?
Để hiểu tại sao lazy load lại làm hỏng chỉ số LCP của ảnh hero, chúng ta cần nhìn vào cơ chế render của trình duyệt. Bản chất của lazy load là trì hoãn tải tài nguyên cho tới khi nó chuẩn bị xuất hiện trong khung hình hiển thị. Khi gắn thuộc tính `loading="lazy"` cho ảnh hero nằm ngay đầu trang, trình duyệt sẽ chủ động hoãn yêu cầu tải ảnh trong bước phân tích cú pháp HTML ban đầu. Chỉ sau khi tính toán xong layout và xác định vị trí phần tử, trình duyệt mới gửi request lấy file ảnh. Việc này vô tình tạo ra một khoảng trễ nghiêm trọng gọi là Resource Load Delay. Ảnh hero xuất hiện muộn hơn đáng kể, đẩy chỉ số LCP từ ngưỡng an toàn dưới 2.5 giây lên mức cảnh báo đỏ trên 4.0 giây.
⚠ Nguyên tắc vàng cho Hero Image
Tất cả các hình ảnh xuất hiện trong khung hình đầu tiên (Above-the-fold) - đặc biệt là Hero Image, Banner sản phẩm chính và Logo - BẮT BUỘC KHÔNG được dùng `loading="lazy"`. Hãy luôn dùng `loading="eager"` hoặc để mặc định kết hợp thuộc tính `fetchpriority="high"`.
2. Tác hại của việc dùng thư viện JavaScript Lazy Load không cần thiết
Trước khi chuẩn HTML native lazy loading ra đời, các lập trình viên phải dựa vào JavaScript để lắng nghe sự kiện cuộn trang hoặc dùng IntersectionObserver nhằm thay thế `data-src` thành `src`. Phương pháp này hiện tại đã trở nên lạc hậu và gây ra nhiều tác dụng phụ cho hiệu năng website. Việc nạp các thư viện JS bên thứ ba buộc trình duyệt phải tải mã script, phân tích cú pháp và thực thi trên Main Thread. Khi Main Thread bị quá tải bởi JS, giao diện trang web sẽ bị đóng băng tạm thời, làm tăng chỉ số Total Blocking Time và Interaction to Next Paint. Hơn nữa, trình duyệt không thể tận dụng trình quét tiền tải Preload Scanner thông minh để tìm thấy liên kết ảnh sớm.
- ✓Lãng phí tài nguyên mạng: Tốn thêm lượt gọi HTTP request và dung lượng tải các file JS bên thứ ba không cần thiết.
- ✓Vô hiệu hóa Preload Scanner: Trình duyệt không thể quét trước liên kết hình ảnh trong mã nguồn HTML gốc.
- ✓Gây ra dịch chuyển giao diện (CLS): Nếu không khai báo kích thước cố định, JS gán ảnh muộn sẽ đẩy các phần tử bên dưới xuống gây giật trang.
- ✓Tăng tải cho CPU thiết bị di động: Thiết bị cấu hình yếu sẽ bị giật lag khi liên tục chạy hàm kiểm tra vị trí cuộn trang của JS.
3. Hướng dẫn sửa lỗi và tối ưu theo tiêu chuẩn kỹ thuật chuẩn SEO
Để giải quyết triệt để lỗi này, công việc đầu tiên bạn cần làm là phân loại chính xác hình ảnh thành hai nhóm: nhóm xuất hiện ngay (above-the-fold) và nhóm xuất hiện khi cuộn trang (below-the-fold). Với bức ảnh hero nằm ở nhóm đầu tiên, mã HTML tối ưu nhất không sử dụng bất kỳ thư viện JS nào và áp dụng cú pháp chuẩn như sau: `<img src="hero.jpg" alt="Banner chính" width="1200" height="600" fetchpriority="high" decoding="async">`. Thuộc tính `fetchpriority="high"` phát tín hiệu cho trình duyệt ưu tiên tải ảnh này trước các tài nguyên khác. Ngoài ra, trong thẻ `<head>`, bạn nên bổ sung thẻ preload: `<link rel="preload" as="image" href="hero.jpg">`.
Đối với các bức ảnh nằm phía dưới màn hình đầu tiên (below-the-fold) như danh sách sản phẩm hay footer, bạn hãy loại bỏ toàn bộ các thư viện JS rườm rà và chuyển hoàn toàn sang Native Lazy Loading. Cú pháp cực kỳ đơn giản: `<img src="product-1.jpg" alt="Sản phẩm" width="400" height="300" loading="lazy" decoding="async">`. Trình duyệt sẽ tự động tính toán khoảng cách cuộn của người dùng dựa trên tốc độ kết nối mạng để chủ động tải ảnh trước khi người dùng cuộn tới. Nhờ loại bỏ mã JS trung gian, bạn giải phóng hoàn toàn luồng chính của CPU, giúp trang web mượt mà hơn và đạt điểm Lighthouse tối đa.
💡 Mẹo nâng cao cho Responsive Images
Nếu sử dụng thẻ `<picture>` cho ảnh Responsive, hãy áp dụng `fetchpriority="high"` cho thẻ `<img>` con bên trong và khai báo thẻ `<link rel="preload">` đi kèm với thuộc tính `imagesrcset` và `imagesizes` trong phần `<head>`.
4. Đo lường hiệu năng và kiểm tra điểm LCP thực tế
Sau khi tiến hành tái cấu trúc mã nguồn, bước không thể thiếu là kiểm tra và xác minh hiệu quả thực tế thông qua các công cụ đo lường chuyên dụng. Bạn hãy mở Chrome DevTools, chuyển sang tab Network và lọc theo loại Img. Kiểm tra cột Waterfall để đảm bảo file ảnh Hero là một trong những tài nguyên hình ảnh đầu tiên được tải về. Tiếp theo, chuyển sang tab Performance, thực hiện thu thập dữ liệu lượt tải trang và di chuột vào hàng đếm LCP. Trình duyệt sẽ chỉ rõ phần tử LCP Element là gì và chỉ số Resource Load Delay đã được rút ngắn hay chưa. Ngoài ra, bạn nên sử dụng công cụ Google PageSpeed Insights để đánh giá.
Checklist tối ưu LCP và Lazy Load cho dự án Web
Thuộc tính nào giúp báo cho trình duyệt ưu tiên tải ảnh Hero nhanh nhất có thể trong hàng đợi tài nguyên?
Dự án web hiện tại của bạn đang quản lý việc lazy load hình ảnh như thế nào?
Cần triển khai SEO bài bản?
Đội ngũ LuckySEO đồng hành cùng bạn từ audit đến tăng trưởng bền vững.
Nhận tư vấn miễn phí
