Cách kích hoạt WEBP trên WordPress để tăng tốc Website

(Ngày: 18/12/2019)
Kích hoạt Webp trên WordPress để tăng tốc Website. Đây là một định dạng hình ảnh mới thay thế cho PNG, GIF và JPEG để giúp tối ưu cho website hơn mà không làm giảm chất lượng hình ảnh.

Cách cài đặt WebP lên Website WordPress

Giới thiệu Imagify

Có rất nhiều plugin hỗ trợ chuyển đổi các định dạng ảnh thông thường thông qua WebP, nhưng trong số đó Imagify có thể được xem là một plugin hoạt động ổn định.

Ưu điểm của Imagify là nó sẽ gửi ảnh trên website bạn về máy chủ Imagify để nén và sau đó trả ngược về lại kết quả. Từ đó giảm thiểu gánh nặng cho máy chủ website cũng như không bị phụ thuộc nhiều.

Tuy nhiên đó cũng là nhược điểm của Imagify. Do sẽ cần gửi ảnh về máy chủ Imagify để xử lý nên thời gian xử lý sẽ lâu hơn và sẽ bị giới hạn dung lượng hình ảnh nén. Nếu bạn muốn nhiều hơn thì phải trả phí.

Cài đặt WebP vào WordPress và cách sử dụng

Sau khi cài đặt WebP hoàn tất, bạn tiến hành đăng ký tài khoản bằng cách nhấp vào nút Sign-up hiển thị ra.

Sau đó nhập email của bạn vào.

Bây giờ hãy kiểm tra email, bạn sẽ thấy hệ thống Imagify gửi cho bạn một mã API Key và đường dẫn kích hoạt tài khoản. Nhấp vào kích hoạt và coppy lại API Key.

Đã có API Key và kích hoạt tài khoản rồi, tiếp theo hãy copy API Key vào nút I Have My API Key.

Cuối cùng là ấn nút Go to Settings để chuyển tới trang cài đặt, hoặc truy cập trực tiếp Settings => Imagify.

Tại trang thiết lập, bạn đánh dấu vào nút Display images in webp format on the site, nếu bạn có dùng CDN ở dạng sub-domain thì điền thêm vào khung bên dưới.

Chúng ta sẽ sử dụng theo phương thức dùng thẻ <picture> để có thể hiển thị ảnh webp trên các trình duyệt có hỗ trợ và vẫn có thể hiển thị ảnh bình thường trên các trình duyệt không hỗ trợ webp.

Nếu bạn dùng shared hosting thì hệ thống sẽ tự động chèn một đoạn mã rewrite đường dẫn vào tập tin .htaccess. Nếu tập tin .htaccess không thể sửa được thì bạn có thể tự chèn với nội dung sau:

# BEGIN Imagify: webp file type

<IfModule mod_mime.c>

       AddType image/webp .webp

</IfModule>

# END Imagify: webp file type

Đối với NGINX, bạn chèn đoạn sau vào tập tin cấu hình vhost:

location ~* ^(/.+)\.(jpg|jpeg|jpe|png|gif)$ {
    add_header Vary Accept;

 
    if ($http_accept ~* "webp"){
        set $imwebp A;
    }
    if (-f $request_filename.webp) {
        set $imwebp  "${imwebp}B";
    }
    if ($imwebp = AB) {
        rewrite ^(.*) $1.webp;
    }
}

Ấn lưu lại để lưu thiết lập.

Nét toàn bộ ảnh có sẵn trên website

Sau khi thiết lập hoàn tất, plugin Imagify sẽ tự động nén các ảnh khi bạn upload lên bài viết. Nhưng với các hình ảnh đã có sẽ trên website thì chúng ta cần phải chạy công cụ Bulk Optimization một lần để nén toàn bộ ảnh có sẵn.

Vào Media => Bulk Optimization.

Nhấn nút Imagif’em all.

Bây giờ bạn giữ nguyên trang hiện tại để nó tiến hành nén, thời gian nén có thể lâu tùy theo số lượng ảnh có trên website bạn.

Khôi phục lại ảnh gốc

Nếu bạn muốn đưa ảnh đã nén và convert qua WebP về lại định dạng gốc thì có thể truy cập vào Media => Library và nhấn nút Restore to Original ở hình ảnh bạn muốn khôi phục.

Lưu ý:

Khi Imagify nén ảnh thì nó vẫn lưu lại tập tin ảnh gốc trong thư mục wp-content/uploads/backup. Nếu bạn muốn giải phóng dung lượng của host thì chỉ cần tải thư mục này về máy để lưu lại rồi xóa trên host đi là được.

Kiểm tra WebP trên website

Để kiểm tra website của bạn đã sử dụng WebP chưa thì cần phải chắc chắn rằng bạn đã chạy xong công cụ Bulk Optimization để tất cả hình ảnh đều đã được chuyển sang WebP.

Sau đó bạn nhấp vào hình ảnh trong bài viết và chọn mở ảnh trong tab mới. Nếu ảnh hiển thị ra là đuôi dạng .webp thì đã thành công.

Chúc bạn thành công!

thachpham.com