[Cloudinary] Plugin đồng bộ ảnh WordPress lên mây. Tiết kiệm băng thông và tăng tốc độ tải ảnh lên đến 60%

Ảnh là một nỗi ám ảnh với những người “đam mê tốc độ” của website, một bức ảnh chiếm trung bình 150KB, trong một website thương mại điện tử, 1 sản phẩm thường có 4 – 5 ảnh, tính sơ sơ 1 sản phẩm đã chiếm gần 1mb dung lượng ảnh tải về, điều này ảnh hưởng không nhỏ đến tốc độ tải trang của bạn, bên cạnh đó, ảnh cũng ngốn không ít băng thông của bạn cho dù thời buổi hiện nay hầu hết các nhà cung cấp hosting, vps … đều unlimited băng thông nhưng hàng có sẵn đi kèm, tội gì không dùng.

Cloudinary là gì ?

Cloudinary là một cloud-based service, nó cung cấp một giải pháp quản lý hình ảnh bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery. Với Cloudinary bạn có thể dễ dàng upload ảnh lên cloud, tự động thực thi các thao tác với ảnh một cách thông minh mà không cần phải cài đặt bất kì một phần mềm phức tạp nào khác.

Cloudinary cung cấp các APIs toàn diện và màn hình quản lý giúp chúng ta dễ dàng tích hợp vào các trang web và ứng dụng di động.

Cloudinary làm được gì ?

Ba hoa chém gió lý thuyết là vậy, để trả lời câu hỏi Cloudinary làm được gì hãy thử xem ví dụ sau:

Đây là bài viết được đem ra so sánh: https://hoangquoclong.com/2018/08/15/shipping-viet-nam-woocommerce-plugin-tinh-phi-van-chuyen-tao-van-don-truc-tiep-len-ghn-ghtk-cho-woocommerce/

Đây là tốc độ khi chưa sử dụng Cloudinary

Đây là tốc độ tải ảnh sau khi sử dụng Cloudinary

WOW… Hãy xem ảnh screenshot-3 khi chưa sử dụng Cloudinary nó nặng 55.5KB mất 90ms để tải. Sau khi sử dụng Cloudinary nó chỉ còn 25.3KB và mất 12ms để tải, tương tự với các ảnh khác screenshot-2, screenshote-1 cũng có sự thay đổi rõ rệt, một con số ấn tượng phải không ? Ngoài ra ảnh cũng từ PNG đã được chuyển sang webp, định dạng ảnh mà thằng Google thích.

Cài đặt Cloudinary như thế nào ?

Đến đây thì “phê” rồi đúng không những người anh em thiện lành. Bắt tay vào setup cho nó thôi.

Đầu tiên các bạn cần đăng ký tài khoản Cloudinary : https://cloudinary.com/users/register/free

Dĩ nhiên dịch vụ này có nhiều mức giá: Free ( 25 credits ), Plus ( $89  – 225 credits ), Advanced ( $224 – 600 credits ) cho mỗi tháng.

1 credit = 1000 transformations or 1GB managed storage or 1GB net viewing bandwidth or 500 video processing seconds

Và chúng ta với nhu cầu cá nhân tầm 25G lưu trữ ảnh của gói Free cũng khá là ngon đấy chứ…nhể.

Tiếp theo là tải plugin chính chủ của Cloudinary ở đây : Tải Plugin Cloudinary

Sau khi cài đặt thành công, ta tiến hành đồng bộ với Cloudinary như theo hướng dẫn.

Kết nối WordPress của bạn với Cloudinary

Phần Media của WordPress đã có thêm tab Cloudinary để các bạn chọn ảnh

Vậy là từ giờ các ảnh của bạn up lên website sẽ được tự động up lên Cloudinary, trong trường hợp bạn tắt Cloudinary website sẽ lại sử dụng ảnh trên host như bình thường, không ảnh hưởng tới website.

Quá đã đúng không nào.

Cloudinary khác gì với các dịch vụ CDN ?

CDN lưu trữ file của tại nhiều máy chủ phân tán, tuỳ thuộc vào vị trí của người dùng mà lấy file ở máy chủ gần nhất để giảm thời gian tải. CDN không can thiệp vào việc optimize ảnh.

Cloudinary là dịch vụ cung cấp giải pháp chuyên về media ( ảnh và video ), vì vậy ngoài việc ảnh được lưu tại các máy chủ khác, thì ảnh và video của các bạn cũng sẽ được optimize khi sử dụng Cloudinary, như các bạn có thể thấy trên ví dụ, ảnh gốc là PNG nhưng đã được chuyển sang dạng webp khi hiển thị trên site và dĩ nhiên ảnh sau khi optimize không thua kém gì so với ảnh gốc. Bạn có thể xem thêm thông tin Cloudinary làm gì với ảnh của bạn tại đây : https://cloudinary.com/solutions/image_management

Kết Luận

Có thể thấy Cloudinary là một giải pháp không thể thiếu và tuyệt vời nhất trong việc tăng tốc độ tải của website. Khi mà chúng ta mải mê với việc cấu hình server, nén các tập js, css mà thường bó tay trước việc tối ưu hình ảnh. Mình cũng từng sử dụng các plugin như EWWW Image OptimizerWP Smush nhưng cá nhân mình thấy Cloudinary là nổi trội hơn cả, cùng với việc đồng bộ với WordPress không thể simple hơn.

Bản quyền bài viết thuộc về hoangquoclong.com vui lòng dẫn nguồn bài viết khi bạn trích dẫn bài viết này.