Tối ưu hóa hình ảnh WordPress

Đây là bản tổng hợp lại toàn bộ các bước cấu hình và quản lý ảnh trên WordPress, đảm bảo sự đơn giản và hiệu quả hết sức có thể

1. Ảnh upload trực tiếp lên WordPress, lưu trữ trên VPS
2. Ảnh gốc sẽ được nén lại sau khi upload lên (chuẩn Jetpack WebP)
3. Xử lý thumbnail, responsive images qua Jetpack Photon

Cấu hình này chỉ giữ lại duy nhất 1 tấm ảnh gốc (đã nén) cho tất cả các vị trí trên trang, giảm được rất nhiều dung lượng cho server, đảm bảo vấn đề chất lượng hình ảnh, màu sắc khi nhìn qua nhiều thiết bị, tốc độ truy cập ổn định, gần như chỉ khi Việt Nam đứt cáp quốc tế siêu nặng như đợt trước mới thấy chậm 😀

Cài đặt cơ bản

• Cài đặt plugin Clean Image Filenames

Xử lý file ảnh có kí tự đặc biệt, các dấu, .,/”:{}=\| … sẽ được bỏ đi, khoảng trắng thì sẽ được sửa thành kí tự gạch ngang (-), chữ HOA sẽ được thành chữ thường, hạn chế tối đa vấn đề lỗi do đặt tên file

• Cài đặt plugin Disable Generate Thumbnails hoặc Disable Media Sizes

Bật chọn tất cả để Wordpress không tự tạo các ảnh thu nhỏ, giữ nguyên kích thước ảnh gốc sau khi upload

• Cài đặt plugin Disable Responsive Images Complete

Tắt tính năng responsive images mặc định trên Wordpress

• Cài đặt plugin Disable Lazy Load

Tắt tính năng lazy load mặc định trên Wordpress

• Cài đặt Jetpack WebP CDN Replacer

Tự nén ảnh khi upload lên WordPress, giúp giảm dung lượng file trên VPS

• Cài đặt Jetpack

Bật tính năng Image CDN

Với nhu cầu thông thường, cài đặt cơ bản như trên là đủ

Cài đặt nâng cao

• Đổi link Jetpack (i0.wp.com) sang dạng sub.domain.com

Cấu hình cụ thể theo bài này, hoặc bài này

• Jetpack Optimization

Tinh chỉnh lại 1 chút cho Jetpack, tắt các modules không dùng, tắt các request thừa, tắt Autoload, giảm thời gian chạy các cron

• Chạy lại Regenerates thumbnails (tùy chọn ở các trang cũ)

Lý do phải làm bước này, vì các ảnh cũ, nếu trước đây đang dùng theo cấu trúc cũ, vẫn lưu lại khá nhiều link tới các các ảnh thumbnails , chạy lại regenerates thumbnails sau khi tắt hết các thứ, để WordPress tự sửa lại các link ảnh thành kích thước duy nhất là FULL

Trên SSH, cài đặt WP-CLI sau đó chạy lệnh bên dưới

wp media regenerate

Lúc này thì 99% các ảnh có trên trang, đều đã được chuyển link về ảnh FULL

• Xóa các thumbnails không dùng (tùy chọn ở các trang cũ)

Việc xóa các thumbnails tạo ra trước đây không quá cần thiết, nếu trang có quá nhiều ảnh cũ, tạo ra quá nhiều thumbnails có thể dùng Media Cleaner hoặc reGenerate Thumbnails Advanced để xóa đi cho nhẹ bớt cũng được (nhớ giữ backup lại 1 thời gian, tránh xóa nhầm 1 số link ảnh vẫn còn dùng theo định dạng cũ)

Tổng kết

Sau khi cấu hình cơ bản như trên, ảnh upload lên Wordpress sẽ rất nhanh, do chỉ upload duy nhất tấm ảnh gốc, bước nén lại ảnh gốc sẽ chạy ngầm để không ảnh hưởng tới trải nghiệm sử dụng

Khi bạn preview hoặc public bài viết, ảnh sẽ được Jetpack Photon nén lại, tạo các thumbnail, cache lên server của Jetpack (i0.wp.com)

Ảnh khi được Jetpack cache sẽ tồn tại ~1 năm trên server của họ, hiếm khi Jetpack cần truy cập lại các ảnh cũ trên VPS, thường sau khi ảnh load lần đầu tiên, VPS sẽ rất nhẹ, vì tất cả request liên quan tới ảnh đều đã được Jetpack giải quyết

Mặc dù Jetpack chạy rất nhẹ nhưng chỉ dùng mỗi ảnh mà phải cài cả bộ plugin của họ vào, mình vẫn thấy không cần thiết (bước Jetpack Optimization cơ bản cũng giải quyết phần nào vấn đề này), Jetpack mà tách bản Photon ra 1 plugin nhỏ thì tuyệt vời quá 🪑

Để tạm giải quyết chuyện này trên thèng bibica.net mình dùng plugin Jetpack Photon Addon để tự quản lý các query cho ảnh, nó chỉ phù hợp cho theme thèng bibica.net đang dùng, bạn nào thích có thể dùng thử, còn để đảm bảo an toàn thì cứ dùng plugin chính thức từ hãng là lành nhất

Phần cấu hình nâng cao, bạn nào rỗi rãi có thể dùng, domain sau khi đổi sang dùng theo sub domain của chính bạn nhìn sẽ đẹp và chuyên nghiệp hơn, có thể để load thẳng ảnh từ Jetpack, cũng có thể dùng Cloudflare cache thêm 1 lần nữa tùy thích

Cloudflare và Jetpack là 2 dịch vụ mình thấy TTFB trên toàn thế giới tốt nhất, thấp nhất có thể đạt mức~ 5x, trung bình thì ~ 200ms, một con số khủng khiếp, gần như không thể bị đánh bại, thực tế sử dụng trong gần 6 năm nay, kể cả lúc Việt Nam đứt cáp siêu nặng, mình vẫn rất hài lòng với dịch vụ của Cloudflare và Jetpack, vài dịch vụ khác, họ quảng cáo có POP tại Việt Nam, ping có khi chỉ 5-10ms, nhưng cơ sở hạ tầng không ổn định, thi thoảng ảnh load ra rất chậm ….

Trong trường hợp vì lý do nào đó, bạn không dùng thích dùng Jetpack có thể thay thế bằng Cloudinary, cấu hình đơn giản hơn, thậm chí về tính năng và hiệu quả nó còn hơn cả combo mình nói ở bài này 😀 có điều họ là 1 dịch vụ trả phí, trang to dùng không đủ, phần Cloudinary họ chuyên về ảnh trên mọi nền tảng, chứ không hỗ trợ riêng cho WordPress như Jetpack