Hình ảnh là lý do số một khiến các trang web không đạt chuẩn Core Web Vitals. Chúng thường là phần tử lớn nhất trên trang, chặn quá trình hiển thị và gây ra hiện tượng xô lệch bố cục khi xuất hiện đột ngột mà không được đặt trước không gian.
Tin tốt dành cho các nhà phát triển: các vấn đề về hình ảnh lại là những lỗi dễ khắc phục nhất trong Core Web Vitals. Khác với những xử lý JavaScript chuyên sâu mà chỉ số INP đòi hỏi, việc tối ưu hóa hình ảnh tuân theo các quy trình rõ ràng và dễ lặp lại. Làm đúng những điều này, bạn sẽ cải thiện cùng lúc hai trong số ba chỉ số quan trọng.
Đây là danh sách kiểm tra thực tế, không phải lý thuyết thô khan. Mọi mục đều là những việc bạn có thể triển khai ngay hôm nay: cách chọn định dạng, thuộc tính tải, quy tắc kích thước và thiết lập phân phối giúp chuyển điểm số Core Web Vitals từ đỏ sang xanh.
Đến cuối cùng, bạn sẽ nắm trong tay quy trình tối ưu hóa hình ảnh chuẩn xác để áp dụng cho bất kỳ trang web trên bất kỳ nền tảng công nghệ nào.
Hình ảnh ảnh hưởng đến từng chỉ số Core Web Vitals như thế nào
Core Web Vitals là ba chỉ số được Google sử dụng làm tín hiệu đánh giá trải nghiệm trang web, được đo lường trên người dùng thực tế ở phân vị thứ 75. Theo tài liệu chính thức về Core Web Vitals của Google trên web.dev, ba chỉ số và ngưỡng đạt chuẩn "Tốt" được quy định như sau.
LCP (Largest Contentful Paint): dưới 2,5 giây
Đo lường thời gian hiển thị phần tử lớn nhất có thể nhìn thấy trên màn hình. Trên hầu hết các trang, phần tử đó chính là hình ảnh, thường là ảnh chính (hero image). Một ảnh hero nặng và tải chậm là nguyên nhân phổ biến nhất dẫn đến điểm LCP kém. Hình ảnh chính là trung tâm của chỉ số này.
CLS (Cumulative Layout Shift): dưới 0,1
Đo lường sự xô lệch bố cục bất ngờ trong quá trình tải trang. Hình ảnh không được khai báo chiều rộng và chiều cao cụ thể là nguyên nhân hàng đầu. Khi một bức ảnh được tải xong và đẩy nội dung phía dưới lệch đi vì trình duyệt không chừa trước chỗ trống cho nó, sự xô lệch đó sẽ làm giảm điểm CLS của bạn.
INP (Interaction to Next Paint): dưới 200 mili giây
Đo lường độ phản hồi đối với các tương tác của người dùng. INP đã thay thế First Input Delay vào tháng 3 năm 2024. Hình ảnh ảnh hưởng đến INP gián tiếp hơn, nhưng việc giải mã hình ảnh nặng và tệp quá lớn sẽ chiếm dụng luồng chính của trình duyệt, làm chậm thời gian sẵn sàng phản hồi. Hình ảnh nhẹ hơn cũng đóng góp tích cực vào việc này.
Như vậy, hình ảnh tác động trực tiếp đến LCP và CLS trong khi ảnh hưởng gián tiếp đến INP. Tối ưu hóa hình ảnh sẽ giúp bạn cải thiện hai chỉ số mà hầu hết các trang web nhiều hình ảnh hay gặp thất bại nhất.
Các ngưỡng Core Web Vitals năm 2026
Hãy ghi nhớ kỹ các con số này. Google đo lường ở phân vị thứ 75 của dữ liệu người dùng thực, nghĩa là 75% số lượt truy cập phải đạt mức "Tốt" thì trang web mới vượt qua.
Danh sách kiểm tra phần 1: cải thiện LCP (ảnh hero của bạn)
LCP là chỉ số chịu tác động lớn nhất từ hình ảnh. Phần tử lớn nhất hầu như luôn là một hình ảnh, vì vậy những bước sau đây sẽ nhắm thẳng vào nó.
1. Sử dụng định dạng AVIF hoặc WebP cho ảnh LCP
Các định dạng hiện đại giúp giảm đáng kể kích thước tệp ảnh LCP. AVIF nhỏ hơn đến 50% so với JPEG, còn WebP nhỏ hơn khoảng 25-35%. Tệp nhỏ hơn đồng nghĩa với tải nhanh hơn và cải thiện điểm LCP. Bài so sánh giữa JPEG vs PNG vs WebP vs AVIF sẽ hướng dẫn bạn chọn định dạng nào và cách thiết lập phương án dự phòng cho mọi trình duyệt.
2. Thêm fetchpriority="high" vào ảnh LCP
Hãy thông báo cho trình duyệt biết bức ảnh này rất quan trọng. Thêm thuộc tính fetchpriority="high" vào ảnh hero sẽ khiến trình duyệt ưu tiên tải nó sớm hơn các tài nguyên có độ ưu tiên thấp. Chỉ riêng thuộc tính nhỏ này có thể giúp giảm hàng trăm mili giây cho điểm LCP.
3. Không bao giờ áp dụng lazy-load cho ảnh LCP
Tải lười biếng (lazy loading) rất tuyệt vời cho các hình ảnh bên dưới màn hình đầu tiên (below-the-fold), nhưng áp dụng loading="lazy" cho ảnh hero là một sai lầm kinh điển. Nó làm chậm trễ bức ảnh quan trọng nhất trên trang. Ảnh LCP cần được tải ngay lập tức với độ ưu tiên cao nhất.
4. Tải trước (preload) ảnh hero
Thêm thẻ <link rel="preload" as="image"> trong phần head cho ảnh hero của bạn để trình duyệt phát hiện ra nó sớm trước khi hoàn tất việc phân tích phần còn lại của HTML. Kết hợp với fetchpriority high để đạt hiệu quả tối đa.
5. Đổi kích thước ảnh theo đúng kích thước hiển thị thực tế
Phục vụ một bức ảnh rộng 3000 pixel vào một khung chứa 800 pixel gây lãng phí thời gian tải cho những pixel không ai nhìn thấy. Hãy thu nhỏ ảnh hero về kích thước lớn nhất mà nó thực sự hiển thị, sau đó cung cấp các phiên bản đáp ứng cho màn hình nhỏ hơn. Đây thường là cải tiến đem lại hiệu quả LCP lớn nhất.
6. Giữ TTFB dưới 200ms
Time to First Byte (thời gian phản hồi byte đầu tiên) là nền tảng của LCP. Nếu máy chủ mất tới một giây để phản hồi, mọi nỗ lực tối ưu ảnh đều vô nghĩa. Hãy sử dụng CDN, lưu bộ nhớ đệm (cache) mạnh mẽ và cân nhắc phân phối từ các edge server. Mục tiêu là giữ TTFB dưới 200ms, vì ảnh LCP chỉ có thể tải nhanh khi máy chủ phản hồi kịp thời.
Bạn cần nén ảnh hero và ảnh nội dung về đúng kích thước và định dạng chuẩn? Sử dụng công cụ nén ảnh miễn phí → để nén nhanh AVIF và WebP, hoặc thử trình nén tùy chỉnh → để kiểm soát chính xác kích thước, định dạng và chất lượng cho từng độ phân giải. Cả hai đều chạy ngay trên trình duyệt của bạn mà không cần tải tệp lên bất kỳ máy chủ nào.
Danh sách kiểm tra phần 2: cải thiện CLS (đặt trước không gian cho ảnh)
Lỗi CLS do hình ảnh gây ra hầu hết đến từ một nguyên nhân: trình duyệt không biết hình ảnh sẽ lớn bao nhiêu nên không giữ chỗ, dẫn đến việc đẩy lệch nội dung xung quanh khi ảnh tải xong. Giải pháp cốt lõi là giữ chỗ trước cho ảnh.
7. Luôn thiết lập thuộc tính width và height
Mọi thẻ hình ảnh đều cần các thuộc tính width và height rõ ràng. Trình duyệt dựa vào chúng để tính toán tỷ lệ khung hình (aspect ratio) và giữ đúng phần diện tích trước khi ảnh tải về, qua đó loại bỏ hoàn toàn hiện tượng nhảy trang. Đây là bước sửa lỗi CLS quan trọng nhất nhưng hay bị bỏ quên nhất.
8. Sử dụng thuộc tính CSS aspect-ratio cho ảnh phản hồi (responsive)
Đối với các hình ảnh phản hồi co giãn theo khung chứa, hãy khai báo thuộc tính CSS aspect-ratio để trình duyệt luôn giữ chỗ theo đúng tỷ lệ trên bất kỳ chiều rộng màn hình nào. Khi kết hợp với width và height, layout của bạn sẽ ổn định trên mọi thiết bị.
9. Giữ chỗ cho các hình ảnh tải muộn
Với các bức ảnh được tải bằng JavaScript, trong slider/carousel, hoặc cuộn xuống mới thấy, hãy đảm bảo khung chứa của chúng có sẵn kích thước cố định từ đầu. Một hình ảnh xuất hiện sau khi người dùng tương tác phải nằm khít vào vùng đã định sẵn chứ không làm xô lệch trang.
10. Tránh chèn hình ảnh phía trên nội dung hiện có
Nếu bạn chèn một hình ảnh (quảng cáo, banner hoặc ảnh hero tải chậm) phía trên phần nội dung người dùng đang đọc, mọi thứ sẽ bị đẩy tụt xuống dưới. Hãy đặt chỗ trước hoặc chỉ chèn phía dưới màn hình đầu tiên để không làm gián đoạn trải nghiệm đọc.
Danh sách kiểm tra phần 3: tối ưu phân phối (cho mọi hình ảnh)
Những quy tắc này áp dụng cho toàn bộ hình ảnh trên trang, giúp tạo hiệu ứng cộng hưởng rất lớn trên các bài viết nhiều hình ảnh.
11. Áp dụng lazy-load cho ảnh bên dưới màn hình đầu tiên
Thêm loading="lazy" vào từng bức ảnh nằm dưới màn hình hiển thị đầu tiên. Trình duyệt sẽ chỉ tải chúng khi người dùng cuộn đến gần, giúp tiết kiệm băng thông và tài nguyên CPU cho các nội dung quan trọng phía trên. Chỉ cần tuyệt đối không áp dụng nó cho ảnh LCP.
12. Phục vụ ảnh phản hồi với srcset
Sử dụng thuộc tính srcset và sizes để cung cấp kích thước ảnh phù hợp cho từng thiết bị. Điện thoại nhận ảnh nhỏ, máy tính bàn nhận ảnh lớn. Cách này có thể giảm một nửa dung lượng tải trên di động, và vì Google đánh giá thứ hạng dựa trên dữ liệu di động, đây là yếu tố mang tính quyết định.
13. Nén tất cả hình ảnh, không chỉ riêng ảnh hero
Một bài viết có thể có một ảnh hero nhưng kèm theo hai mươi ảnh nội dung. Hai mươi ảnh đó cộng lại rất nặng. Hãy nén tất cả về chất lượng 80-85%. Hướng dẫn chi tiết về nén ảnh để tăng tốc trang web sẽ hướng dẫn quy trình toàn diện bao gồm cả tự động hóa hàng loạt.
14. Sử dụng CDN hoặc dịch vụ xử lý ảnh chuyên dụng
Các mạng phân phối nội dung ảnh CDN (Cloudinary, ImageKit, Cloudflare Images) phân phối ảnh từ các máy chủ gần người dùng nhất, tự động chuyển đổi sang AVIF hoặc WebP và đổi kích thước theo từng thiết bị. Với các trang web quy mô lớn, chỉ riêng giải pháp này có thể giải quyết hầu hết các vấn đề Core Web Vitals liên quan đến ảnh.
15. Xử lý cẩn thận tệp PNG
PNG thường là loại tệp nặng nhất trên trang. Nếu bạn có ảnh chụp màn hình hoặc đồ họa dạng PNG, đây là cách nén ảnh PNG giảm tới 70% dung lượng, hoặc chuyển đổi sang WebP để giữ nền trong suốt với dung lượng nhỏ hơn rất nhiều.
Cách đo lường các chỉ số Core Web Vitals từ hình ảnh
Bạn không thể tối ưu những gì mình không đo lường. Hãy sử dụng các công cụ sau theo thứ tự:
- PageSpeed Insights: dán đường dẫn URL của bạn để kiểm tra dữ liệu phòng thí nghiệm và dữ liệu người dùng thực, quan sát kỹ phần tử LCP được chỉ ra
- Bảng Performance trong Chrome DevTools: ghi lại quá trình tải trang để xem chính xác hình ảnh nào là phần tử LCP và mất bao lâu để hiển thị
- Lighthouse: chạy kiểm tra trước mỗi đợt phát hành lớn để phát hiện lỗi sụt giảm hiệu suất trước khi đưa ra bản chính thức
- Báo cáo Core Web Vitals trong Google Search Console: theo dõi tỷ lệ đạt chuẩn của người dùng thực trên toàn bộ trang web trong chu kỳ 28 ngày
- Tiện ích mở rộng Web Vitals cho Chrome: xem trực tiếp điểm số LCP, CLS và INP ngay trong quá trình phát triển web
Hãy bắt đầu với PageSpeed Insights để xác định phần tử LCP. Nếu đó là một hình ảnh (thường là vậy), danh sách kiểm tra LCP phía trên chính là việc ưu tiên số một của bạn.
Lưu ý về hình ảnh ngoài trang web
Core Web Vitals chỉ đánh giá trang web của bạn, nhưng thói quen nén ảnh tối ưu sẽ có ích ở mọi nơi hình ảnh xuất hiện. Nếu bạn cũng đăng ảnh lên mạng xã hội, bảng kích thước chuẩn cho ảnh mạng xã hội sẽ cung cấp kích thước chính xác cho từng nền tảng, giúp bạn tránh bị thuật toán của họ tự động nén lại làm mờ ảnh.
Thứ tự ưu tiên: khắc phục điều gì trước
Nếu bạn có ít thời gian, hãy thực hiện theo thứ tự sau để tạo tác động lớn nhất đến Core Web Vitals:
- Thứ nhất: thêm width và height cho toàn bộ hình ảnh (khắc phục ngay lập tức hầu hết lỗi CLS)
- Thứ hai: chuyển đổi và nén ảnh hero LCP sang định dạng AVIF hoặc WebP ở kích thước hiển thị thực
- Thứ ba: thêm fetchpriority high và preload cho ảnh hero, gỡ bỏ thuộc tính lazy-load trên nó
- Thứ tư: áp dụng lazy-load cho toàn bộ hình ảnh bên dưới màn hình đầu tiên
- Thứ năm: khai báo srcset để phục vụ hình ảnh phản hồi theo kích thước màn hình
- Thứ sáu: chuyển việc phân phối ảnh sang hệ thống CDN hoặc dịch vụ chuyên dụng
Chỉ riêng ba bước đầu tiên đã giải quyết phần lớn các trường hợp trượt Core Web Vitals do hình ảnh trên hầu hết các trang. Chúng chỉ mất một buổi chiều để thực hiện, không tốn nhiều thời gian.
5 sai lầm về hình ảnh âm thầm phá hủy điểm Core Web Vitals
1. Áp dụng lazy-load cho ảnh hero
Lỗi tự "đá phản lưới nhà" phổ biến nhất. Tải lười biếng ảnh LCP sẽ trì hoãn chính phần tử mà hệ thống đang đo lường. Hãy tải ngay lập tức (eager load) ảnh hero và chỉ áp dụng lazy-load cho những gì nằm bên dưới màn hình đầu tiên.
2. Thiếu thuộc tính width và height
Không có kích thước đồng nghĩa với không giữ chỗ trước, dẫn đến xô lệch layout. Bỏ sót điều đơn giản này là nguyên nhân chính gây trượt điểm CLS. Hãy luôn luôn bổ sung chúng cho từng hình ảnh.
3. Phục vụ hình ảnh quá khổ
Một bức ảnh 4000px hiển thị trong khung 800px sẽ tải chậm gấp bốn lần mức cần thiết. Hãy đổi kích thước ảnh theo thực tế hiển thị và dùng responsive images. Người dùng không bao giờ nhìn thấy các pixel bị lãng phí, but họ phải chịu đựng sự chờ đợi.
4. Vẫn dùng JPEG và PNG ở mọi nơi
Việc bám lấy các định dạng cũ khiến bạn bỏ lỡ cơ hội tiết kiệm 25-50% dung lượng tệp. Hãy chuyển sang AVIF hoặc WebP kèm phương án dự phòng và điểm LCP của toàn bộ trang web sẽ được cải thiện rõ rệt.
5. Chỉ tối ưu duy nhất ảnh hero
Ảnh hero quan trọng nhất cho LCP, nhưng hai mươi bức ảnh bài viết nặng nề vẫn làm chậm toàn bộ trang và chiếm đoạt băng thông. Hãy nén mọi bức ảnh trên trang, không chỉ bức ảnh trên cùng.
Tóm lại
Hình ảnh là lý do phổ biến nhất khiến các trang web trượt Core Web Vitals, nhưng cũng là phần dễ cải thiện nhất. Chúng tác động trực tiếp đến LCP, gây ra hầu hết lỗi CLS và tạo gánh nặng ảnh hưởng đến INP. Xử lý tốt hình ảnh sẽ nâng cao hai trong số ba chỉ số quan trọng cùng lúc.
Hãy thực hiện theo danh sách kiểm tra: bổ sung kích thước cho mọi ảnh để khắc phục CLS, nén ảnh hero sang định dạng mới với độ ưu tiên cao cho LCP, và áp dụng lazy loading cùng responsive images cho các phần còn lại. Đo lường bằng PageSpeed Insights và Search Console để kiểm soát hiệu suất liên tục.
Hầu hết các lỗi Core Web Vitals do hình ảnh đều xoay quanh một vài nguyên tắc cố định. Chỉ cần nắm vững một lần, bạn có thể đưa trang web đạt chuẩn xanh chỉ trong một buổi chiều.