Đổi mới để phát triển!
Trên một trang web, hình ảnh thường chiếm đến hơn 60% tổng dung lượng tải về. Một bức ảnh chưa được tối ưu có thể khiến thời gian tải trang tăng gấp đôi, kéo theo chỉ số Core Web Vitals tụt dốc nghiêm trọng. Với những trang có ảnh nền lớn, ảnh sản phẩm, ảnh hero hoặc banner chính, tác động lên LCP và CLS càng rõ rệt.
Core Web Vitals là tập hợp 3 chỉ số: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) và INP (Interaction to Next Paint). Trong đó:
Một số vấn đề ảnh hưởng đến hình ảnh và Core Web Vitals thường gặp:
width và height → CLS caoTối ưu hình ảnh đúng cách là một trong những biện pháp hiệu quả nhất giúp cải thiện hiệu suất toàn trang và đạt chuẩn SEO bền vững.
Không chỉ cần công cụ kỹ thuật, người tối ưu ảnh cũng cần nắm chắc các khái niệm và tiêu chuẩn thiết kế web hiện đại. Việc chuẩn bị đúng sẽ giúp quá trình tối ưu diễn ra hiệu quả và tránh sai sót.
sharp (CLI/Node.js)Content-Encoding để nén ảnh đầu raloading="lazy"), preload ảnh ()Đừng nghĩ rằng chỉ cần nén ảnh là đủ. Tối ưu hình ảnh và Core Web Vitals là một quá trình tổng thể gồm nhiều bước, mỗi bước đều ảnh hưởng trực tiếp đến chỉ số LCP, CLS và cả INP. Dưới đây là quy trình 7 bước chi tiết bạn có thể thực hiện ngay.
Bước đầu tiên là xác định ảnh nào đang làm chậm chỉ số LCP. Thường là ảnh hero hoặc ảnh lớn xuất hiện đầu trang. Dùng Lighthouse hoặc PageSpeed Insights, bạn sẽ thấy mục "Largest Contentful Paint element" để biết ảnh nào cần tối ưu đầu tiên. Mục tiêu là giảm thời gian tải ảnh này xuống <2.5s.
Sử dụng công cụ như Squoosh, bạn có thể chuyển ảnh JPEG/PNG sang WebP hoặc AVIF. Ưu tiên WebP do tương thích trình duyệt cao hơn. Hãy kiểm tra lại trên website thật sau khi đổi định dạng để tránh lỗi không hiển thị. Lưu ý không nên đổi ảnh nhỏ hoặc icon sang AVIF vì chi phí nén không đáng kể.
Nhiều trang web tải ảnh gốc 3000px trong khi chỉ hiển thị ở mức 600px. Điều này không chỉ làm trang nặng hơn mà còn ảnh hưởng thời gian tải. Dùng DevTools kiểm tra kích thước thực tế ảnh hiển thị và dùng công cụ như Photoshop, TinyPNG hoặc sharp để resize về đúng tỉ lệ.
width và height cho mọi ảnhThiếu kích thước cố định là nguyên nhân hàng đầu gây ra CLS cao. Hãy đảm bảo mọi ảnh HTML đều có thuộc tính width và height. Nếu bạn dùng CSS hoặc object-fit, vẫn cần đặt kích thước HTML để trình duyệt tính layout trước khi tải.
Tất cả ảnh nằm dưới phần "gấp" (below-the-fold) nên dùng loading="lazy". Điều này giúp giảm tài nguyên tải ban đầu, cải thiện INP và FCP. Tuy nhiên, không áp dụng lazy load cho ảnh hero, vì sẽ làm LCP xấu đi đáng kể.
Sử dụng thẻ
để preload ảnh quan trọng nhất. Điều này đảm bảo ảnh hero tải sớm, tránh bị trì hoãn bởi các tài nguyên khác. Đặc biệt quan trọng với ảnh banner, ảnh sản phẩm đầu trang.
srcset và sizesNếu ảnh của bạn hiển thị trên nhiều loại màn hình, dùng srcset và sizes để trình duyệt chọn ảnh phù hợp độ phân giải. Điều này giúp tiết kiệm băng thông, giảm thời gian tải trên thiết bị di động, từ đó cải thiện LCP.
Dù có nhiều hướng dẫn, rất nhiều người vẫn mắc sai lầm khiến việc tối ưu ảnh phản tác dụng hoặc làm xấu đi chỉ số. Dưới đây là những lỗi nghiêm trọng nhất bạn cần tránh.
Đây là lỗi phổ biến nhất. Khi bạn áp dụng loading="lazy" cho ảnh hero (ảnh đầu trang), trình duyệt sẽ trì hoãn tải ảnh này → LCP tăng mạnh. Chỉ lazy load ảnh dưới phần gấp, không dùng với ảnh đầu tiên hiển thị.
Không khai báo width và height cho ảnh làm trình duyệt phải tính toán lại layout khi ảnh tải về, gây ra CLS cao. Đặc biệt khi ảnh nằm trong slider, grid hoặc bố cục phức tạp, lỗi này càng rõ rệt.
Tải ảnh có độ phân giải gấp 3–4 lần kích thước hiển thị khiến trang nặng không cần thiết. Đây là nguyên nhân khiến chỉ số INP và cả LCP bị ảnh hưởng.
JPEG hoặc PNG vẫn phổ biến, nhưng không còn phù hợp với yêu cầu hiệu suất. WebP cho ảnh raster và SVG cho ảnh vector là lựa chọn tốt hơn. Một ảnh PNG 300KB có thể giảm còn 90KB khi chuyển sang WebP mà không thay đổi chất lượng.
Ảnh quan trọng như banner, ảnh sản phẩm đầu tiên, nếu không preload sẽ bị trì hoãn tải bởi các tài nguyên khác (CSS, JS). Điều này ảnh hưởng lớn đến LCP – thậm chí còn khiến ảnh không hiển thị kịp khi trang tải.
Bạn đã áp dụng đủ các bước tối ưu ảnh, nhưng làm sao biết kết quả có cải thiện thật sự không? Việc đo lường đúng sẽ giúp bạn xác định ảnh nào đang “ngốn tài nguyên” và xác minh tác động của việc tối ưu lên chỉ số Core Web Vitals. Dưới đây là các phương pháp và công cụ giúp bạn làm điều đó một cách chính xác.
Lighthouse là công cụ mạnh mẽ có sẵn trong DevTools của Chrome. Sau khi tối ưu ảnh, chạy lại báo cáo và chú ý các mục:
Nếu ảnh hero được preload và có kích thước rõ ràng, chỉ số LCP có thể giảm từ 4.2s xuống còn 1.9s – cải thiện rõ rệt. Ngoài ra, Lighthouse cũng cảnh báo nếu ảnh chưa có width/height hoặc không lazy load đúng cách.
Trước khi tối ưu ảnh, bạn nên lưu lại kết quả từ PageSpeed Insights. Sau khi thực hiện xong, chạy lại kiểm tra và so sánh các mục:
Nhiều trường hợp sau khi đổi từ JPEG sang WebP và preload ảnh hero, điểm LCP cải thiện 25–40%.
WebPageTest cho phép bạn kiểm tra tải ảnh theo từng mili giây. Tại biểu đồ Waterfall, hãy kiểm tra:
Nếu thấy ảnh hero nằm quá xa đầu dòng Waterfall, cần kiểm tra lại preload hoặc loại bỏ lazy load nhầm.
Sau vài ngày tối ưu, Google sẽ cập nhật báo cáo trong Search Console. Trang được coi là “Tốt” khi cả 3 chỉ số đều đạt chuẩn:
Bạn có thể xem tỷ lệ URL “Tốt” tăng dần – đó là bằng chứng rõ ràng nhất về hiệu quả của việc tối ưu hình ảnh và Core Web Vitals.
Không ít người băn khoăn: WebP hay AVIF tốt hơn? PNG có nên bỏ hoàn toàn? Việc lựa chọn định dạng ảnh phù hợp giúp cải thiện tốc độ tải trang mà vẫn giữ chất lượng hình ảnh. Dưới đây là phân tích giúp bạn chọn đúng theo ngữ cảnh.
WebP là lựa chọn phổ biến nhất hiện nay nhờ hiệu suất cao và hỗ trợ rộng rãi.
AVIF phù hợp với trang tốc độ cao hoặc PWA – nhưng cần có fallback WebP cho trình duyệt cũ.
Hạn chế dùng JPEG/PNG nếu không có lý do rõ ràng. Với ảnh icon, logo – chuyển sang SVG là lựa chọn tốt hơn.
SVG không phù hợp cho ảnh raster hoặc ảnh chụp – tránh lạm dụng.
Nếu bạn dùng AVIF, hãy áp dụng cú pháp fallback:
>
="img.avif" type="image/avif">
="img.webp" type="image/webp">
="img.jpg" alt="Ảnh minh họa">
>
Cách này đảm bảo ảnh vẫn hiển thị trên mọi trình duyệt mà không hy sinh hiệu suất.
Khi bạn đã thực hiện đầy đủ các bước cơ bản, vẫn còn nhiều cách tinh chỉnh sâu hơn để giúp hình ảnh hoạt động hiệu quả hơn, đồng thời hỗ trợ xếp hạng SEO và trải nghiệm người dùng. Dưới đây là 5 mẹo nâng cao bạn nên áp dụng nếu muốn đi xa hơn trong việc tối ưu hình ảnh và Core Web Vitals.
Bạn có thể kết hợp srcset, sizes với media để tải ảnh phù hợp với từng kích thước màn hình. Điều này giúp tránh lãng phí băng thông trên mobile.
>
="(max-width: 768px)" srcset="img-mobile.webp">
="(min-width: 769px)" srcset="img-desktop.webp">
="img-default.jpg" alt="Ảnh sản phẩm">
>
Thay vì mặc định chọn nén ảnh ở mức 80%, hãy thử nhiều mức khác nhau (75%, 60%, 40%) và so sánh kích thước/độ sắc nét để chọn mức tối ưu. Với ảnh hero, bạn nên ưu tiên chất lượng cao hơn, còn ảnh phụ có thể nén mạnh hơn.
Sử dụng CDN như Cloudflare, BunnyCDN hoặc các dịch vụ như Cloudinary sẽ giúp ảnh tải từ máy chủ gần vị trí người dùng hơn, giảm độ trễ, cải thiện LCP rõ rệt.
Ngoài ra, một số CDN còn tự động tối ưu ảnh theo thiết bị và định dạng hỗ trợ, giúp bạn tiết kiệm rất nhiều thời gian.
Không nên nhúng ảnh inline bằng Base64 trừ khi đó là ảnh rất nhỏ (<1KB). Thay vào đó, hãy tải ảnh qua URL để trình duyệt có thể cache, preload hoặc tải song song. Điều này giúp cải thiện tốc độ phản hồi và tránh ảnh hưởng đến INP.
Định dạng JPEG-XL (JXL) là thế hệ kế tiếp của JPEG, có tiềm năng thay thế cả WebP và AVIF. Dù chưa được hỗ trợ rộng rãi, bạn có thể thử nghiệm trên các trang riêng biệt hoặc landing page quan trọng để đo hiệu suất.
Tối ưu hình ảnh và Core Web Vitals không chỉ là kỹ thuật cải thiện tốc độ mà còn là yếu tố quan trọng trong chiến lược SEO bền vững. Bằng cách chuyển đổi định dạng, tối ưu dung lượng, preload và lazy load hợp lý, bạn có thể nâng điểm hiệu suất trang lên rõ rệt. Hãy bắt đầu với ảnh hero – nơi ảnh hưởng LCP nhiều nhất, và áp dụng các mẹo nâng cao để duy trì lợi thế cạnh tranh trên công cụ tìm kiếm.
Chỉ nên preload ảnh hero – là ảnh lớn đầu tiên xuất hiện trong khung nhìn. Ảnh phụ hoặc ảnh nằm dưới phần gấp không cần preload.
Không. Google hỗ trợ định dạng WebP đầy đủ. Bạn chỉ cần đảm bảo có alt, title và cấu trúc sitemap hình ảnh chuẩn.
Nên chuyển phần lớn ảnh sang WebP. AVIF có thể dùng nhưng cần fallback do chưa hỗ trợ toàn trình duyệt. Không nên bỏ JPEG/PNG hoàn toàn nếu dùng trong tình huống đặc biệt.
Thông thường từ 3–10 ngày sau khi triển khai, báo cáo trong Search Console sẽ cập nhật chỉ số mới.
Có. Ảnh nhẹ hơn giúp trình duyệt xử lý nhanh hơn, giảm block thread, từ đó cải thiện INP gián tiếp.
Nếu bạn dùng WordPress, các plugin như ShortPixel, Imagify, hoặc Smush Pro có thể tự động chuyển WebP, lazy load và nén ảnh hiệu quả mà không cần thao tác thủ công.
