Core Web Vitals: Ảnh ảnh hưởng đến LCP và CLS thế nào (và cách khắc phục)
Khi một trang có cảm giác chậm, thủ phạm thường là một bức ảnh lớn ở gần đầu trang. Core Web Vitals cho bạn các con số để đo điều đó, và việc sửa ảnh thường cải thiện chúng nhiều hơn hầu hết mọi thứ khác. Bài này giải thích những gì được đo, điều gì làm ảnh chậm, và cách sửa.
LCP và CLS đo điều gì
Largest Contentful Paint (LCP) là thời gian để phần tử lớn nhất nhìn thấy được, rất thường là ảnh banner, hiện ra. Google coi LCP từ 2,5 giây trở xuống là tốt, và trên 4 giây là kém.
Cumulative Layout Shift (CLS) đo mức độ trang bị xê dịch khi đang tải. Điểm từ 0,1 trở xuống được coi là tốt. Ảnh xuất hiện mà không có chỗ dành sẵn sẽ đẩy chữ xuống dưới, và đó là nguyên nhân kinh điển gây ra xê dịch bố cục.
Cả hai chỉ số đều được đo trên người dùng thật, và các ngưỡng áp dụng cho phần lớn lượt truy cập của bạn chứ không phải một lần thử riêng lẻ, nên hãy nhắm tới mức an toàn thoải mái.
Vì sao ảnh thường là nguyên nhân
Ảnh thì lớn, trình duyệt chỉ phát hiện ra chúng sau khi đọc xong HTML, và chúng có thể về muộn. Các vấn đề thường gặp nhất là:
- File quá lớn. Một ảnh banner 3 MB tải rất lâu trên điện thoại.
- Định dạng cũ. JPG và PNG nặng hơn WebP hay AVIF ở cùng chất lượng.
- Phát hiện muộn. Nếu ảnh được đặt bằng JavaScript hoặc nằm trong ảnh nền CSS, trình duyệt sẽ tìm thấy nó muộn hơn.
- Tải trễ sai chỗ. Bảo trình duyệt chờ đợi ở bức ảnh quan trọng nhất là điều ngược lại với những gì bạn muốn.
- Thiếu khai báo kích thước. Không có
widthvàheight, trang không thể dành sẵn chỗ, gây ra xê dịch bố cục.
Trước hết hãy tìm ảnh LCP của bạn
Chạy trang trong PageSpeed Insights hoặc Lighthouse rồi mở phần LCP, nơi nêu tên chính xác phần tử đó. Chrome DevTools cũng đánh dấu nó trong bảng Performance. Hãy sửa đúng bức ảnh này trước khi đụng tới thứ gì khác, vì cải thiện các ảnh khác sẽ không làm đổi con số.
Nếu phần tử LCP là chữ chứ không phải ảnh, việc xử lý ảnh sẽ không giúp gì cho trang đó, và bạn nên xem lại phông chữ và tốc độ máy chủ.
So sánh các cách sửa: nên thử gì trước
| Cách sửa | Công sức | Tác động thường gặp |
|---|---|---|
| Đổi kích thước và nén ảnh LCP | Thấp | Cao, thường là mức cải thiện lớn nhất |
| Chuyển sang WebP hoặc AVIF | Thấp đến trung bình | Trung bình đến cao |
| Bỏ tải trễ khỏi ảnh LCP | Thấp | Trung bình |
Thêm fetchpriority="high" | Thấp | Trung bình |
| Phát từ CDN với bộ nhớ đệm dài | Trung bình | Trung bình, nhất là với khách ở xa |
Hãy bắt đầu từ dòng trên cùng của bảng. Ba cách đầu thường chỉ mất vài phút mà mang lại phần lớn mức cải thiện.
Từng bước: sửa ảnh LCP
- 1Xác định phần tử bằng PageSpeed Insights hoặc Lighthouse.
- 2Đổi kích thước về cỡ lớn nhất mà nó thực sự được hiển thị. Đổi kích thước & nén ảnh làm cả hai việc trong một bước, và bài về kích thước ảnh lý tưởng nêu các mục tiêu hợp lý.
- 3Nén ảnh. Nén ảnh có thể nhắm tới một dung lượng mục tiêu, ví dụ 200 KB cho ảnh banner. Một ảnh 3 MB giảm xuống 200 KB có thể làm điểm số thay đổi rõ rệt.
- 4Dùng định dạng hiện đại. Chuyển bằng PNG sang WebP hoặc JPG sang WebP, và giữ lại một phương án dự phòng. Hướng dẫn chuyển sang WebP chỉ cách làm.
- 5Đảm bảo ảnh có trong HTML dưới dạng thẻ
img, để trình duyệt tìm thấy nó sớm. - 6Bỏ
loading="lazy"khỏi ảnh đó và thêmfetchpriority="high". - 7Đo lại và xác nhận thời gian LCP đã giảm.
Từng bước: chặn hiện tượng xê dịch bố cục
- 1Thêm thuộc tính
widthvàheightcho mọi ảnh, hoặc đặtaspect-ratiotrong CSS, để trình duyệt dành đúng chỗ trước khi file tải về. - 2Dành chỗ cho nội dung đến muộn như banner, nội dung nhúng và quảng cáo, bằng một chiều cao tối thiểu cố định.
- 3Tránh chèn nội dung lên phía trên phần người xem đang đọc, trừ khi đó là phản hồi cho thao tác của họ.
- 4Kiểm tra chỉ số CLS trong PageSpeed Insights hoặc báo cáo Core Web Vitals trong Search Console.
Những lỗi thường gặp
- Tải trễ mọi ảnh, kể cả ảnh ở đầu trang. Xem hướng dẫn tải trễ ảnh.
- Tối ưu các ảnh trang trí mà bỏ qua phần tử LCP thật sự.
- Chỉ thử một lần trên mạng văn phòng nhanh. Hãy thử cả trên điện thoại với mạng chậm hơn.
- Coi điểm đo trong phòng thí nghiệm là kết quả cuối cùng. Dữ liệu người dùng thật trong Search Console có thể mất vài tuần mới phản ánh thay đổi.
Câu hỏi thường gặp
Điểm LCP thế nào là tốt?
Google coi LCP từ 2,5 giây trở xuống là tốt, từ 2,5 đến 4 giây là cần cải thiện, và trên 4 giây là kém. Các ngưỡng này áp dụng cho phần lớn lượt truy cập thật, nên hãy nhắm tới mức an toàn thoải mái.
Ảnh ảnh hưởng đến CLS như thế nào?
Khi một ảnh tải xong mà không có chỗ dành sẵn, nội dung phía dưới bị đẩy xuống. Thêm thuộc tính width và height, hoặc tỷ lệ khung hình trong CSS, giúp trình duyệt dành đúng chỗ từ trước và ngăn việc xê dịch.
Tôi có nên tải trễ mọi ảnh không?
Không. Hãy tải trễ các ảnh nằm dưới màn hình đầu tiên, nhưng đừng làm vậy với ảnh chính ở đầu trang, vì đó thường là phần tử LCP và nên được tải sớm nhất có thể.
WebP hoặc AVIF có cải thiện LCP không?
Thường là có, vì file nhỏ hơn tải nhanh hơn. Tuy vậy mức cải thiện lớn nhất vẫn đến từ việc đổi kích thước và nén ảnh LCP, nên hãy làm việc đó trước rồi mới cân nhắc định dạng hiện đại.
Vì sao điểm của tôi không đổi sau khi tối ưu ảnh?
Có thể bạn đã tối ưu một ảnh không phải phần tử LCP, hoặc dữ liệu người dùng thật chưa được cập nhật. Hãy xác định đúng phần tử LCP, và nhớ rằng dữ liệu thực tế trong Search Console có thể mất vài tuần mới phản ánh thay đổi.