Trên phần lớn web WordPress nhỏ, ảnh chiếm phần lớn dung lượng mỗi trang. Một ảnh chụp từ điện thoại có thể nặng hơn toàn bộ mã của trang cộng lại. Tối ưu ảnh vì thế thường là việc đem lại kết quả nhanh nhất khi tăng tốc web, và bạn có thể tự làm mà không cần biết code.
1. Đúng kích thước trước, nén sau
Lỗi phổ biến nhất là tải ảnh gốc 4000 × 3000 điểm ảnh lên rồi hiển thị trong khung rộng 800 điểm ảnh. Trình duyệt vẫn phải tải cả ảnh lớn. Nên thu nhỏ ảnh trước khi tải lên:
| Vị trí ảnh | Chiều rộng gợi ý |
|---|---|
| Ảnh bìa tràn màn hình | 1600–1920 px |
| Ảnh trong bài viết | 1200 px (đủ nét trên màn hình độ phân giải cao) |
| Ảnh sản phẩm | 1000–1200 px, khung vuông thống nhất |
| Ảnh thu nhỏ, logo đối tác | 300–600 px |
WordPress tự tạo nhiều cỡ ảnh nhỏ hơn và trình duyệt chọn cỡ phù hợp (thuộc tính srcset). Nhưng WordPress vẫn giữ ảnh gốc, và một số theme hoặc trình dựng trang lại dùng ảnh gốc. Vì vậy thu nhỏ trước vẫn là cách chắc nhất.
2. Chuyển sang WebP
WebP là định dạng ảnh mọi trình duyệt hiện nay đều hỗ trợ. Ở cùng chất lượng nhìn, ảnh WebP thường nhẹ hơn JPEG và PNG khá nhiều. WordPress hỗ trợ tải ảnh WebP lên từ phiên bản 5.8. Có ba cách dùng WebP:
- Chuyển trước khi tải lên: dùng công cụ nén ảnh WebP miễn phí của DatPilot. Ảnh được xử lý ngay trong trình duyệt của bạn, không gửi lên máy chủ. Cách này hợp với web ít ảnh mới.
- Plugin tự chuyển: các plugin như Converter for Media, EWWW Image Optimizer, ShortPixel hay LiteSpeed Cache (trên hosting LiteSpeed) tự tạo bản WebP cho ảnh có sẵn và ảnh mới tải lên, rồi gửi bản WebP cho trình duyệt.
- CDN chuyển định dạng: một số CDN tự đổi định dạng ảnh khi gửi đi. Tiện, nhưng thường tốn phí.
Ảnh có chữ, logo, biểu đồ nên giữ chất lượng cao hơn (khoảng 85–90) để chữ không bị nhoè. Ảnh chụp thông thường để khoảng 75–80 là khó nhận ra khác biệt.
3. Tải chậm (lazy load) đúng cách
Từ phiên bản 5.5, WordPress tự thêm loading="lazy" cho ảnh, nghĩa là ảnh dưới màn hình chỉ tải khi khách cuộn tới. Điều này tốt cho ảnh ở cuối trang, nhưng có hại nếu áp vào ảnh lớn đầu trang: ảnh đó sẽ hiện muộn và làm chỉ số LCP kém. Các phiên bản WordPress gần đây đã bỏ qua lazy load cho ảnh đầu tiên, nhưng theme và plugin có thể ghi đè. Kiểm tra ảnh đầu trang không có loading="lazy", và nên có fetchpriority="high". Bài Core Web Vitals là gì giải thích LCP.
4. Khai báo kích thước để trang không nhảy
Ảnh thiếu thuộc tính width và height làm trang bị đẩy xuống khi ảnh tải xong, gây khó chịu và làm chỉ số CLS kém. Ảnh chèn bằng trình soạn thảo của WordPress tự có hai thuộc tính này. Ảnh chèn bằng mã HTML tự viết hoặc một số trình dựng trang thì cần kiểm tra.
5. Ảnh nền và ảnh trong slider
Ảnh nền đặt bằng CSS (thường dùng trong trình dựng trang) không được WordPress tạo nhiều cỡ và không tự lazy load. Hãy tự thu nhỏ ảnh nền, và với ảnh nền đầu trang thì cân nhắc thay bằng thẻ ảnh thường. Slider tải nhiều ảnh lớn cùng lúc. Giữ tối đa 2–3 slide hoặc thay bằng một ảnh tĩnh.
6. Dọn thư viện ảnh
- Mỗi ảnh tải lên được WordPress nhân thành nhiều cỡ, cộng thêm các cỡ do theme và plugin đăng ký. Web lâu năm có thư mục
uploadshàng GB, làm sao lưu chậm và tốn dung lượng.
- Tắt các cỡ ảnh không dùng (trong cài đặt theme hoặc bằng plugin), rồi tạo lại ảnh thu nhỏ bằng plugin Regenerate Thumbnails.
- Xoá ảnh không còn gắn vào bài nào. Làm sau khi đã sao lưu, vì một số ảnh được dùng trong trình dựng trang mà WordPress không nhận ra.
7. Kiểm tra kết quả
Mở PageSpeed Insights và xem các mục “Phân phát hình ảnh ở định dạng mới”, “Định kích thước hình ảnh phù hợp”, “Trì hoãn hình ảnh ngoài màn hình”. Hoặc chạy kiểm tra website của DatPilot để xem tổng thể tốc độ. Đọc thêm bài cách tăng tốc website WordPress từng bước cho các bước tiếp theo.
8. Khi nào nên nhờ người làm
Web có hàng nghìn ảnh cũ chưa tối ưu, hoặc shop có nhiều ảnh sản phẩm, xử lý hàng loạt sẽ an toàn hơn khi có người làm và sao lưu trước. Gói tăng tốc website WordPress giá 990.000đ gồm chuyển WebP, dọn cỡ ảnh, sửa lazy load và đo trước sau. Nếu bạn cần làm lại ảnh sản phẩm cho đẹp và đồng bộ, có dịch vụ làm ảnh sản phẩm bằng AI 199.000đ.
