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 ngoài tốc độ xử lý mã nguồn bên trong của máy chủ, thì một yếu tố khác quan trọng không kém đó là dung lượng tổng của website khi tải ra ngoài trình duyệt. Và dung lượng của website khi tải ra trình duyệt thì phần lớn là do hình ảnh vì các tập tin hình ảnh là những tập tin nặng nhất, điều này đồng nghĩa website bạn càng có nhiều hình ảnh thì thời gian tải hoàn tất một website càng lâu.

Để dễ so sánh, bạn cứ thử tải một tập tin nào đó dung lượng khoảng 8 – 10MB về máy xem mất bao nhiêu giây, và hãy tưởng tượng khi tải một website cũng 8 – 10MB như thế nào.

Khi sử dụng hình ảnh trong WordPress, ngoài việc tối ưu dung lượng hình ảnh thì bạn có có thể áp dụng một công nghệ khác tiên tiến hơn đó là WebP của Google – một định dạng hình ảnh mới thay thế cho PNG, JPEG và GIF giúp tối ưu cho website hơn mà không làm giảm đi chất lượng hình ảnh.

Tham khảo: Tăng tốc website WordPress từ A đến Z

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

Giới thiệu Imagify

Cách kích hoạt WebP trên WordPress để tăng tốc website 218

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 nguoivietweb.net 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.

Tham khảo: Mức giá của Imagify

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.

Cách kích hoạt WebP trên WordPress để tăng tốc website 219

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

Cách kích hoạt WebP trên WordPress để tăng tốc website 220

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ách kích hoạt WebP trên WordPress để tăng tốc website 221

Đã 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.

Cách kích hoạt WebP trên WordPress để tăng tốc website 222

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.

 

Cách kích hoạt WebP trên WordPress để tăng tốc website 223

Bây giờ nếu bạn dùng shared hosting bình thường 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 vì lý do nào đó mà 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. Nhưng với các hình ảnh đã có sẵn 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.

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

Cách kích hoạt WebP trên WordPress để tăng tốc website 224

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

Cách kích hoạt WebP trên WordPress để tăng tốc website 225

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.

Cách kích hoạt WebP trên WordPress để tăng tốc website 226

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é. Về lâu dài 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 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.

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

Cách kích hoạt WebP trên WordPress để tăng tốc website 227

Cách kích hoạt WebP trên WordPress để tăng tốc website 228

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

 

Nguồn: Cách kích hoạt WebP trên WordPress để tăng tốc website | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Cấu trúc Template trong theme và Template Tag
Hàm (function) là gì? – Học PHP cho WordPress
Tác giả

Bình luận

seroquel generic

I’m also commenting to let you be aware of of the cool discovery my child encountered checking your blog. She came to understand a lot of details, including how it is like to have a marvelous coaching heart to get folks easily fully grasp a variety of complicated issues. You actually did more than my desires. I appreciate you for delivering such good, dependable, edifying and also cool guidance on that topic to Ethel.

Leave a Message

Registration isn't required.

NguyenLp LarTheme