Một câu chuyện rất quen thuộc khi chúng tôi bàn giao website: Khách hàng tự up ảnh một bài viết lên. Bức ảnh được chụp bằng iPhone 15, nặng 8MB. Thế là bài viết mất tới 6 giây mới load xong trên mạng 4G. Khách trên 4G hay thoát trước khi thấy sản phẩm nếu hero và gallery quá nặng — đây là quan sát khi bàn giao site, không phải một con số cam kết chung cho mọi ngành.
Nửa ngày công để cấu hình nén ảnh WebP trên website đôi khi còn mang lại nhiều chuyển đổi hơn một tháng hì hục cày SEO. Đây không phải là kỹ thuật thần thánh gì, nó chỉ là một việc bắt buộc-phải-làm mà nhiều chủ shop hay bỏ quên.
1. Trình tự đúng: Đừng nén lung tung
Nhiều người nghĩ cứ cài một plugin nén ảnh là xong. Sai lầm. Trình tự đúng phải là:
Nguồn ảnh (chụp máy/Tạo AI) -> Cắt (Crop) vào đúng trọng tâm -> Resize (Đổi kích thước) cho gần với kích thước hiển thị thật trên web -> Nén/Chuyển sang WebP -> Đặt Alt Text mô tả ảnh.
Ví dụ: Khu vực hiển thị ảnh bài viết của bạn chỉ rộng tối đa 800px. Nếu bạn up một tấm ảnh 4000px lên rồi nhờ plugin ép nó xuống, bạn đang lãng phí tài nguyên máy chủ trầm trọng.
2. Cấu hình WebP trên WordPress như thế nào?
WebP là định dạng ảnh của Google, nhẹ hơn JPEG và PNG khoảng 25-30% mà chất lượng không giảm đáng kể. Với WordPress, anh/chị có thể cài một plugin (ví dụ: LiteSpeed Cache, Smush hoặc WebP Express) để tự động convert ảnh khi upload. Trình duyệt nào hỗ trợ WebP thì sẽ đọc bản WebP, trình duyệt cũ sẽ tự lùi về bản JPEG gốc.
Lưu ý: Chỉ dùng MỘT giải pháp nén ảnh. Việc cài 3-4 plugin nén ảnh chồng chéo lên nhau là nguyên nhân số một gây xung đột (conflict) làm vỡ giao diện web.
Với các ảnh Banner lớn ở ngay đầu trang (Hero image/LCP), tuyệt đối không bật tính năng Lazy Load (Tải chậm). Hãy để ảnh đầu tiên load ngay lập tức, chỉ lazy-load các ảnh nằm bên dưới cuộn chuột (below the fold).
3. Kiểm tra kết quả trong nửa phút
Sau khi tối ưu, làm sao biết ảnh đã được nén? Bấm F12 trên trình duyệt Chrome (Mở DevTools) -> Qua tab Network -> Lọc Img -> F5 lại trang.
Cột Type hiện chữ `webp` và Size chỉ loanh quanh vài chục KB là thành công. Nếu vẫn thấy `jpeg` nặng cả Megabyte? Có thể do Cache cũ chưa xóa, Plugin bị tắt, hoặc Theme của bạn đang cưỡng ép hiển thị ảnh gốc (original).
Anh/chị có thể tham khảo thêm bảng kích thước ảnh chuẩn trên web để resize cho đúng. Nếu dùng AI để vẽ ảnh qua các web tạo ảnh AI, thì export xong vẫn phải qua bước resize và nén như thường.
4. Mặt trái của việc nén ảnh quá đà
Đừng cuồng tốc độ đến mức nén nát bét hình ảnh. Nén quá tay khiến ảnh vỡ hạt, mờ căm sẽ làm thương hiệu của bạn trông rất rẻ tiền, nhất là các ngành bán lẻ, thời trang, nội thất.
Bên cạnh đó, file WebP rất tốt cho trải nghiệm người dùng, nhưng nó không thay thế được thẻ Alt (mô tả văn bản của ảnh). Google Bot mù màu, nó đọc chữ trong thẻ Alt để hiểu ảnh của bạn nói về gì.
Với một website catalogue có 5.000 sản phẩm, việc nén ảnh thủ công là bất khả thi. Hãy yêu cầu đơn vị thiết kế website set up quy trình nén tự động ngay từ đầu.
5. Checklist sống còn trước khi Publish trang Sản phẩm
Trước khi bấm nút Đăng (Publish), hãy hỏi thẳng team nội dung 4 câu này:
- Ảnh Hero (Banner đầu tiên) đã được nén tối đa nhưng không vỡ hạt chưa?
- Các ảnh trong Gallery sản phẩm có cùng một tỷ lệ khung hình (1:1 hoặc 4:3) để không làm lệch giao diện chưa?
- Ảnh OG Image (Ảnh hiển thị khi share link qua Zalo/Facebook) đã đúng size chuẩn 1200×630 chưa?
- Đã thử mở trang bằng giả lập mạng 4G trên điện thoại xem có bị trắng trang quá 3 giây không?
Quy trình nửa ngày công khi site vừa bàn giao
Buổi sáng: chốt plugin nén một cái, bật convert WebP, purge cache, kiểm tra 5 URL quan trọng (trang chủ, 1 danh mục, 1 sản phẩm, 1 bài blog, 1 landing). Buổi chiều: sửa hero LCP nếu vẫn JPEG khổng lồ, thống nhất tỉ lệ gallery, set OG 1200×630 cho 2–3 URL hay share ads.
Site catalogue lớn (hàng nghìn SKU): không nén tay. Pipeline lúc upload + CDN/cache. Gói dựng web theo mẫu tại 123Website (từ khoảng 4,99 triệu trên bảng giá) nên chốt stack nén ngay từ đầu — đỡ “dọn nợ” sau 6 tháng up ảnh iPhone 8MB.
Ai trong team làm bước nào?
Content/marketing: crop, resize gần size hiển thị, viết alt. Kỹ thuật: plugin/CDN, cache, width/height, không lazy hero. Chủ shop: không up file gốc 12MP vào bài khi đã có quy trình. Lệch vai trò = mỗi người up một kiểu, web lại nặng.
Từ 2013 và hơn 2000 dự án, chúng tôi thấy tốc độ mobile hay là việc phải xong trước khi team cày content SEO dài. WebP không thay nội dung hay link — chỉ bỏ “hòn đá” chặn khách đọc.
Ba lỗi hay gặp sau khi “đã bật WebP”
Cache HTML cũ vẫn trỏ JPEG — purge WP Rocket / CDN rồi mới kết luận. Theme hardcode URL full-size trong CSS background — plugin convert media library không đụng. Content up ảnh qua builder nhưng chọn “full” 4000px — đổi size medium/large. Ba lỗi này làm team tưởng WebP hỏng trong khi pipeline đúng, chỉ còn “cửa” tải ảnh gốc.
Câu hỏi hay gặp
WebP là gì?
Định dạng ảnh thường nhẹ hơn JPEG/PNG ở chất lượng nhìn tương đương, giúp trang tải nhanh hơn trên mobile 4G.
Có bắt buộc đổi 100% ảnh sang WebP không?
Ưu tiên ảnh nội dung, sản phẩm, banner. Logo vector nên SVG. Icon đơn sắc cũng ưu tiên SVG khi được.
Ảnh AI export xong dùng thẳng được không?
Chưa. Vẫn crop, resize theo chỗ hiển thị, rồi nén WebP. Ảnh AI thường rất nặng và quá nét so với chỗ cần.
CLS liên quan gì tới ảnh?
Thiếu width/height (hoặc chỗ dành sẵn) khiến layout nhảy khi ảnh load xong. Khai báo kích thước hoặc aspect-ratio.
Có nên cài nhiều plugin nén cho chắc?
Không. Một giải pháp nén chính. Chồng plugin dễ conflict, vỡ ảnh hoặc chậm admin.
Hero có nên lazy-load không?
Ảnh LCP đầu trang thường load ngay; lazy dành cho ảnh dưới fold.
Site hàng nghìn sản phẩm làm sao?
Pipeline tự động lúc upload + cache/CDN. Đừng nén tay từng file — sẽ cháy người và không đồng đều.
Nén xong SEO có lên ngay không?
Tốc độ hỗ trợ trải nghiệm và Core Web Vitals. Thứ hạng còn phụ thuộc nội dung, cạnh tranh, link — không hứa top chỉ vì WebP.
