Thứ Bảy, Tháng Mười 1, 2022
Trang chủ WORDPRESS CÁCH KÍCH HOẠT WEBP TRÊN WORDPRESS ĐỂ TĂNG TỐC WEBSITE

CÁCH KÍCH HOẠT WEBP TRÊN WORDPRESS ĐỂ TĂNG TỐC WEBSITE

Tốc độ của website được quyết định do dung lượng tổng của website khi tải ra ngoài trình duyệt. Sau mình sẽ hướng dẫn cách kích hoạt webp trên wordpress để tăng tốc website.

LÊN WEBSITE WORDPRESS

Giới thiệu Imagify

CÁCH KÍCH HOẠT WEBP TRÊN WORDPRESS ĐỂ TĂNG TỐC WEBSITE

Có rất nhiều plugin hỗ trợ chuyển đổi các định dạng ảnh thông thường qua WebP, nhưng có một plugin trong số đó mình đã dùng khá lâu và rất ổn định đó là Imagify. Ư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ả, sẽ 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 ưu điểm của Imagify cũng là nhược điểm, đó là do sẽ cần gửi anh 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ì cần phải trả phí. Hiện tại Imagify có áp dụng thu phí là 1GB/tháng với $4.99, hoặc nếu bạn không có nhiều hình ảnh upload thường xuyên thì có thể mua gói dùng một lần với mức giá $6/500MB. Một mức giá có thể gọi là chấp nhận được nếu bạn có quá nhiều hình ảnh upload lên website mỗi tháng.

Hiện tại Imagify cho phép bạn dùng 25MB/ngày miễn phí.

Theo như mình đang sử dụng Imagify cho thachpham.com thì plugin này sẽ giúp mình giảm khoảng 70% dung lượng hình ảnh, thật đáng kinh ngạc phải không nào.

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

Sau khi cài đặt kích hoạt webp trên wordpress 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.

Nhập email vào để đăng ký Imagify

Bây giờ bạn kiểm tra email, 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. Hãy nhấp vào kích hoạt và copy lại API Key.

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

Cuối cùng là ấn nút Go to Settings để chuyển tới trang cài đặt, hoặc bạn có thể truy cập trực tiếp tại 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 vào khung bên dưới, không thì bỏ trống.

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 bình thường, hệ thống sẽ 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 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én 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.

Bạn vào Media => Bulk Optimization.

Và ấn nút Imagif’em all ở dưới.

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

Trong một số trường hợp nào đó, 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à ấn nút Restore to Original ở hình ảnh bạn muốn khôi phục.

Lưu ý là 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ên bạn cứ yên tâm nhé.

Kiểm tra WebP trên website

Để kiểm tra website bạn đã sử dụng WebP chưa? Thì cần phải 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.

Ví dụ như các ảnh trong bài viết này đều là dạng WebP.

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

Nguồn copy: Thachpham

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -

Most Popular

6 WEBSITES HAY ĐỂ HỌC JAVASCRIPT

Mặc dù blog mình đã có bài Học Javascript căn bản khá chi tiết và vui nhộn, nhưng nhiêu đó thật sự chưa đủ để...

4 CÔNG CỤ HỖ TRỢ DỊCH FILE PO NHANH HƠN

Việc sửa file .po mình đã có nói sơ qua bằng minh họa video hướng dẫn tự dịch Woocommerce, đồng thời mình cũng có nói...

TÀI NGUYÊN TRA CỨU HÀM VÀ HOOK

Ở đây mình sẽ giới thiệu bạn qua các tài nguyên tra cứu hàm và hook mà có thể giúp bạn tra cứu tất...

PHP CHO WORDPRESS VÀ CÁC TÀI NGUYÊN CẦN THIẾT

Hôm nay mình quyết định sẽ viết một bài guide là bài này để hướng dẫn bạn từng bước tìm hiểu PHP và các...

Recent Comments