Cách tối ưu ảnh cho WordPress: Hướng dẫn đầy đủ

Một bài viết hay trang sản phẩm thường có vài bức ảnh, và mỗi ảnh có thể nặng hơn toàn bộ chữ, mã và giao diện của trang cộng lại. Ảnh nặng ảnh hưởng đến web của bạn theo bốn hướng.

• Tốc độ và trải nghiệm: file lớn làm trang lâu hiện xong, nhất là khi dùng mạng di động. Trang chậm khiến người xem bỏ đi trước khi đọc được chữ nào.
• Thứ hạng tìm kiếm: Google tính đến các chỉ số trải nghiệm trang như Largest Contentful Paint (LCP), và ảnh banner lớn thường chính là phần quyết định điểm này.
• Chi phí và giới hạn hosting: mỗi lượt truy cập đều phải tải các file ảnh, nên ảnh nặng tốn băng thông và có thể làm gói hosting giá rẻ nhanh chạm giới hạn.
• Việc bảo trì: thư viện media đầy ảnh gốc quá lớn khiến sao lưu, chuyển web và tạo bản thử nghiệm đều chậm và tốn dung lượng hơn.

Tin vui là ảnh cũng là phần dễ cải thiện nhất của một website. Vài thói quen khi tải ảnh lên thường giúp trang nhẹ đi một nửa.

Các bản WordPress gần đây tự xử lý khá nhiều việc:

• Tạo ra các bản nhỏ hơn cho mỗi ảnh, thường rộng khoảng 150, 300, 768, 1024 và 1536 pixel, và thêm thuộc tính srcset để trình duyệt chọn bản phù hợp nhất với từng màn hình.
• Tự thu nhỏ các ảnh gốc quá lớn, với ngưỡng 2560 pixel.
• Thêm loading="lazy" vào ảnh, nên các ảnh nằm dưới màn hình đầu tiên được tải sau.
• Nhận ảnh WebP tải lên, và các bản gần đây còn nhận cả AVIF.

Những tính năng này hữu ích, nhưng có giới hạn: WordPress chỉ làm việc trên file bạn tải lên. Nếu file đó chưa được nén và rất lớn, mọi bản sao được tạo ra đều nặng hơn mức cần thiết. Giao diện đặt ảnh kích thước đầy đủ vào một khung nhỏ cũng tốn băng thông, và một plugin tải trễ mọi thứ có thể làm chậm đúng bức ảnh quan trọng nhất.

Không có cách nào là tốt nhất cho mọi trường hợp. Phần lớn các web làm tốt nhất khi kết hợp nhiều cách. Dưới đây là so sánh.

Tối ưu thủ công

• Ưu điểm: bạn tự quyết định kích thước và chất lượng, không có gì chạy trên máy chủ của bạn, và bạn xem được kết quả trước khi đăng.
• Nhược điểm: chỉ giúp các ảnh bạn tự xử lý, nên không sửa được thư viện cũ, và cần mọi người cùng đăng bài làm theo các bước giống nhau.

Plugin

• Ưu điểm: xử lý được hàng trăm ảnh cũ, và tiếp tục chạy mà không ai phải nhớ làm gì.
• Nhược điểm: mỗi plugin thêm mã, cài đặt và các bản cập nhật cần theo dõi. Hãy kiểm tra xem plugin có giữ lại ảnh gốc không, bạn có hoàn tác được không, và ảnh có bị gửi tới dịch vụ bên thứ ba không, điều này quan trọng với quyền riêng tư và với web làm cho khách hàng.

CDN và dịch vụ xử lý ảnh

• Ưu điểm: tự đổi định dạng và đổi kích thước ngay khi có yêu cầu, nên mỗi khách nhận một file phù hợp, và giao ảnh nhanh hơn.
• Nhược điểm: tốn tiền, tạo thêm sự phụ thuộc, và cần cài đặt đúng để không làm hỏng bộ nhớ đệm hay đường dẫn ảnh.

Cách làm hợp lý: tối ưu thủ công các ảnh mới trước khi tải lên, và chỉ dùng plugin hoặc CDN để xử lý thư viện ảnh sẵn có.

Bạn không cần sửa hết mọi ảnh cũ. Hãy bắt đầu từ những ảnh quan trọng nhất.

• Tìm các ảnh nặng nhất. Chạy trang chủ và năm bài viết hàng đầu qua PageSpeed Insights, rồi ghi lại những file bị báo là quá lớn hoặc dùng định dạng cũ.
• Thay các file đó trước. Tải ảnh gốc về, đổi kích thước và nén, rồi tải lại lên và thay vào bài. Thay một số ít ảnh nặng thường hiệu quả hơn việc chuyển đổi hàng loạt cả thư viện.
• Dùng công cụ hàng loạt một cách thận trọng. Nếu dùng plugin, hãy thử trên một bản sao của web, kiểm tra xem ảnh gốc có được giữ lại không, và sau đó xem vài trang để chắc không có ảnh vỡ hay bị mờ.
• Tạo lại các kích thước sau khi đổi giao diện. Giao diện mới có thể dùng các kích thước ảnh khác, nên có thể phải tạo lại ảnh thu nhỏ.

• Tải thẳng ảnh gốc từ máy ảnh lên. Một ảnh 6000 pixel chỉ hiển thị trong khung 800 pixel là lãng phí gần hết dữ liệu.
• Nén đi nén lại cùng một file. Mỗi lần lưu có bỏ bớt dữ liệu lại mất thêm một chút. Hãy luôn làm từ ảnh gốc. Xem nén có mất dữ liệu và không mất dữ liệu.
• Tải trễ ảnh banner. Ảnh lớn đầu tiên cần được tải ngay. Hướng dẫn tải trễ ảnh giải thích lý do.
• Dùng PNG cho ảnh chụp. PNG dành cho đồ họa. Một ảnh chụp lưu dạng PNG có thể nặng gấp mười lần JPG.
• Bỏ qua văn bản alt và tên file có nghĩa. Đây là những việc nhỏ nhưng có lợi thật cho khả năng truy cập và tìm kiếm.

Hãy đo trước và sau để biết bạn thu được gì. Chạy cùng các trang đó qua PageSpeed Insights hoặc Lighthouse, rồi so sánh tổng dung lượng ảnh và thời gian LCP. Báo cáo Core Web Vitals trong Google Search Console cho thấy trải nghiệm của người dùng thật trong nhiều tuần, nên cần cho nó thời gian cập nhật. Muốn xem danh sách đầy đủ hơn, hãy đọc danh sách kiểm tra tối ưu ảnh cho website và bài về ảnh ảnh hưởng thế nào đến Core Web Vitals.