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

Đầu 2023, mình có viết 1 bài về xử lý ảnh trên bibica.net cho 2023, thi thoảng vẫn cảm giác nó vẫn chưa hoàn toàn đúng ý lắm, sau khi thử qua khá nhiều các hình thức khác, cân đong đo đếm giữa tính năng, hiệu năng, sự đơn giản, ổn định, chạy thử nghiệm khoảng 1 tháng, thì dưới đây là toàn bộ các cấu hình mình áp dụng về ảnh cho thèng bibica.net

1. Ảnh được chứa trên Cloudflare R2 (miễn phí 10GB space)
2. Xử lý thumbnail, responsive images qua Jetpack Photon
3. CDN ảnh bằng Cloudflare

Cấu hình này chỉ dùng duy nhất 1 tấm ảnh gốc cho tất cả các vị trí trên trang, giảm được rất nhiều dung lượng cho server gốc, lại đả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 😀 chưa kể nó lại hoàn toàn miễn phí

Cài đặt plugin Clean Image Filenames (khuyên dùng)

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 (khuyên dùng)

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 (khuyên dùng)

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

Cài đặt plugin Disable Lazy Load (khuyên dùng)

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

Chạy lại Regenerates thumbnails (tùy chọn)

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

wp media regenerate

Lý do phải làm bước này, là 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

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

Chứa ảnh trên Cloudflare R2 (tùy chọn)

Cấu hình các thứ thì đã viết chi tiết ở bài cũ tại đây

Bước này bạn có thể bỏ qua nếu muốn chứa ảnh trực tiếp trên server, phần vì các bước cấu hình khá là dài

CDN cache Jetpack bằng Cloudflare (khuyên dùng mạnh)

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

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

Dùng qua Cloudflare R2 chứa file rồi thì việc xóa các thumbnails cũ không hẳn là quá cần thiết, nếu trang có quá nhiều ảnh cũ, có thể dùng Media Cleaner hoặc reGenerate Thumbnails Advanced để xóa đi cho nhẹ bớt cũng được

Jetpack Optimization (khuyên dùng)

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

Lazy Loading (tùy chọn)

Nếu bạn thích các hình thức Lazy Loading khi load ảnh thì có thể dùng các script như Perfmatters để bật tính năng này, phần lớn họ xử lý trực tiếp từ trình duyệt, sẽ có tác dụng tốt hơn so với lazy load mặc định trên Wordpress, mình có thử nghiệm thì với cấu hình như trên, khi chạy không thấy ảnh bị chậm luôn, lý thuyết lazy load rất hay vì đọc bài tới đâu load ảnh tới đó, không tốn tài nguyên thừa thãi 😀 trên bibica.net ở điều kiện mạng Việt Nam bình thường, không đứt cáp, bài viết nhiều hình ảnh nhất, cũng chỉ mất 2-3s là load xong, nên mình thấy cũng không cần thiết dùng lazy load làm gì, ảnh load qua Cloudflare và Jetpack nên server gốc cũng không tiết kiệm hay giảm tải thêm được gì

Về mặt kĩ thuật Jetpack Photon tích hợp rất tốt trên nhiều theme, tính tương thích rất mạnh, gần như chỉ cần cài vào, cấu hình 1 chút tại theme của bạn là các ảnh luôn cho ra kích thước phù hợp ở tất cả các vị trí, sử dụng thực tế thì thường mình hay set tăng kích thước ảnh lên 1 chút để nhìn cho rõ nội dung trong ảnh

Ví dụ kích thước tối đa của ảnh trong bài viết khoảng 768px, mình set tăng lên khoảng 840 px, phần lớn khá ổn ở các màn hình có độ phân giải ~2k 😀 trên 4k 150% cũng ổn

Tăng chất lượng nén ảnh (tùy chọn)

Về chất lượng ảnh và dung lượng mặc định Jetpack cân bằng khá tốt, duy trì ở tỷ lệ nén khoảng 80%, cá nhân thì mình vẫn ưu tiên vấn đề ảnh chất lượng tốt hơn, nên tăng thêm 1 chút, duy trì chất lượng 90%

Sử dụng Code Snippets tạo 1 file php với nội dung:

function sa_custom_params( $args ) {
  $args['quality'] = 90;

  return $args;
}
add_filter( 'jetpack_photon_pre_args', 'sa_custom_params' );

Thay con số 90 ở dòng 2 bằng con số bạn muốn, có thể hạ về 70% để giảm thêm dung lượng file, hoặc tăng thành 100 nếu muốn chất lượng ảnh tốt nhất

Hoạt động

Sau khi cấu hình như trên, ảnh khi upload lên Wordpress sẽ được chuyển sang Cloudflare R2 (sau đó xóa ảnh cũ trên server đi), tốc độ sẽ rất nhanh do gần như chỉ upload ảnh trực tiếp lên server

Sau 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 sau đó cache lên server của Jetpack (i0.wp.com), tiếp theo ảnh sẽ được chuyển sang Cloudflare, cache 1 lần nữa trên cơ sở hạ tầng của Cloudflare (theo domain api.bibica.net)

Mặc định thì ảnh sau khi được Jetpack cache sẽ tồn tại 1 năm trên server của họ, thời gian cache trên Cloudflare thì khá lung tung, tùy bạn có clear cache hay tình trạng khách xem tấm ảnh đó nhiều không, ở tài khoản FREE thì thường sau 24h không có ai view ảnh, đa phần Cloudflare sẽ tự clear cache ảnh này, vấn đề này cũng không quan trọng lắm, vì lúc này Cloudflare sẽ lấy lại ảnh gốc từ server của Jetpack nên thời gian cũng rất nhanh

Khuyết điểm duy nhất mình có thể nghĩ ra, có lẽ là thời gian khi load ảnh lần đầu tiên (do phải nén ảnh, tạo thumbnail) sẽ hơi chậm một chút (trung bình khoảng 1-4s) còn lại thì gần như không có khuyết điểm gì đáng phàn nàn

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 bạn không dùng Jetpack thì có thể dù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 😀