Làm thế nào để sử dụng file WebP trong WordPress để giảm thời gian tải trang

Hầu hết chúng ta đều biết hiện nay, việc tối ưu hóa hình ảnh là rất quan trọng vì nó đóng một vai trò rất lớn trong tổng thời gian tải của trang web của bạn. Hôm nay chúng tôi muốn chia sẻ với các bạn một sự thay thế dễ dàng về cách tích hợp các File WebP của Google vào website. Một số người dùng và đã thấy kích thước file hình ảnh giảm hơn 70%!

File WebP là gì?

Nếu bạn không biết nhiều về File WebP, nó là một định dạng tập tin hình ảnh được tạo ra bởi nhóm hiệu suất web tại Google với mục đích tạo ra hình ảnh nhỏ hơn và tải nhanh hơn. Nó được công bố lần đầu tiên trong năm 2010 và các tính năng phương pháp nén lossy và lossless. Các hình ảnh được gửi đến trình duyệt web từ một máy chủ web dựa trên kiểu MIME nó sử dụng, đó là hình ảnh / webp.

Hình ảnh WebP lossless là hình ảnh có kích thước nhỏ hơn 26% so với PNG và hình ảnh WebP lossy thì có kích thước nhỏ hơn ảnh JPEG 25-34%.

Các công ty như YouTube và eBay đã sử dụng WebP để âm thầm cung cấp năng lượng cho các trang web của họ. Dưới đây là một ví dụ từ eBay, trong đó trên trang web của họ, trung bình khoảng 30 file WebP.

Tại sao là WebP quan trọng như vậy? Theo httparchive, tính đến tháng 8 năm 2016, hình ảnh chiếm khoảng 64% trọng lượng của một trang web của trung bình. Thông thường thì nó nhiều hơn cả kết hợp CSS, JS, và HTML. Vì vậy, việc lựa chọn một phương pháp tối ưu hóa hình ảnh mạnh mẽ và định dạng hình ảnh như WebP là rất quan trọng để giảm trọng lượng trang của mình càng nhiều càng tốt. Nói chung, trang web càng nhỏ thì tốc độ tải càng nhanh. Và điều đó sẽ làm hài lòng không chỉ các khách truy cập của bạn, mà còn Google, vì tốc độ trang là một yếu tố để xếp hạng.

Các trình duyệt hỗ trợ WebP

Bây giờ WebP rất thú vị và nó cũng rất quan trọng khi đề cập đến hỗ trợ trình duyệt. Không phải tất cả các trình duyệt hiện đại hỗ trợ file WebP tại thời điểm này. Theo caniuse, WebP hiện đang hỗ trợ trong Chrome 23+, Opera 39+, tất cả các phiên bản của Opera mini, Android 4.3 trở lên, và Chrome cho Android.

Tuy nhiên, đừng quá thất vọng, bởi vì trong hướng dẫn này chúng tôi sẽ cho bạn thấy một phương pháp để cung cấp các file WebP với các trình duyệt được hỗ trợ và dự phòng với JPG / PNG.

Điều này có nghĩa là các trình duyệt sẽ không nhìn thấy một hình ảnh bị hỏng, chúng sẽ chỉ nhìn thấy những gì chúng đã được nhìn thấy trước. Hãy suy nghĩ về WebP như là một sự bổ sung cho trang WordPress của bạn, chứ không phải là một sự thay thế.

Theo nghiên cứu, Chrome có sự độc quyền về thị phần trình duyệt hơn 70%. Nhưng không chỉ có thị phần là bằng chứng vững chắc, nhìn vào các dữ liệu của khách truy cập của bạn và xem những gì trình duyệt mà họ đang sử dụng, vì nó có thể khác nhau dựa trên sự thích hợp của bạn. Bạn có thể ngạc nhiên ở cách sai lệch số liệu thống kê được. Trong Google Analytics trong “Audience” và bạn có thể nhấp vào “Browser & OS” và xem người sử dụng trình duyệt web làm gì khi họ nhấn trang web của bạn. Chúng tôi kéo một trang web ngẫu nhiên và nhìn thấy dưới đây, 67% là khách từ Chrome và thêm 1% từ Opera. Vì vậy, 68% những người có thể xem và hưởng lợi từ các định dạng File WebP!

Làm thế nào để sử dụng file WebP trong WordPress

Trong ví dụ hiện nay, chúng ta sẽ được sử dụng một sự kết hợp của hai plugin WordPress khác nhau để có được WebP và chạy trong WordPress. Chúng được tạo ra và phát triển bởi nhóm tại KeyCDN, đó là một mạng lưới phân phối nội dung toàn cầu (CDN). Đọc bài này để biết lý do Tại Sao Bạn Cần Một CDN Cho Blog WordPress Của Bạn

1. [Cao cấp]Optimus Image Optimizer: plugin nén hình ảnh lossless cho WordPress, chuyển đổi hình ảnh thành WebP
2. [Miễn phí]WordPress cache Enabler: Caching plugin cho phép bạn phục vụ WebP với các trình duyệt hỗ trợ

Optimus Image Optimizer

Bạn có thể tải Optimus Image Optimizer từ kho WordPress, từ optimus.io, hoặc từ bên trong bảng điều khiển plugin của bạn. Lưu ý: Nó đòi hỏi phải có giấy phép bảo hiểm nếu bạn muốn chuyển đổi hình ảnh của bạn về WebP. Sau khi cài đặt bạn có thể kích hoạt “Creation of WebP files” trong cài đặt plugin.

Sau khi kích hoạt WebP, điều này sẽ tạo ra một hình ảnh bổ sung cho tất cả mọi thứ được chuyển đổi. Vì vậy, nếu bạn tải lên một tập tin PNG hoặc JPG, thì bây giờ sẽ có một phiên bản .webp của hình ảnh. Hãy nhớ rằng, PNG / JPG vẫn là cần thiết bởi vì chúng vẫn còn được sử dụng để phục vụ cho các trình duyệt hỗ trợ. Optimus nén lossless, vì vậy PNG và JPG của bạn cũng được nén.

Ngoài ra còn có một lựa chọn tối ưu hóa số lượng lớn trong trường hợp bạn đã nén hình ảnh của bạn trước và vẫn cần phải chuyển đổi chúng sang WebP.
WordPress cache Enabler

bây giờ, bạn có hình ảnh WebP, bạn cần phục vụ hình ảnh WebP với các trình duyệt hỗ trợ và PNG / JPG các trình duyệt khác. Điều này có thể được thực hiện với các plugin WordPress cache Enabler miễn phí. Bạn có thể tải các plugin từ kho WordPress hoặc cài đặt nó từ bên trong bảng điều khiển plugin của bạn. Sau khi cài đặt bạn có thể kích hoạt “Create an additional WebP cached version” trong cài đặt plugin.

Sau khi bạn đã kích hoạt tùy chọn trên, một phiên bản cached WebP thêm vào của trang web sẽ được tạo

Còn bây giờ, bạn nên chạy file WebP trên trang WordPress của bạn

So sánh JPG và WebP

Chúng ta hãy so sánh JPG và WebP để xem những sự khác biệt mà bạn có được.

Tên FileOriginal JPGCompressed JPGWebP FormatSize Difference %
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71.7 KB93%

WebP giảm 85.87% về kích thước trung bình

So sánh PNG và WebP

Và bây giờ chúng ta sẽ so sánh giữa PNG và WebP để thấy sự khác biệt mà bạn có được

Tên FileOriginal PNGCompressed PNGWebP FormatSize Difference %
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

WebP làm giảm 42,8% của kích thước hỉnh ảnh trung bình

Kết luận

Như bạn thấy, WebP rất dễ thực hiện trên trang WordPress của bạn và bạn dễ dàng đạt được kích thước file hình ảnh nhỏ hơn! Không có hình ảnh nén nào có thể so sánh với File WebP. Và đã làm chúng tôi đề cập đến là WebP có khả năng sử dụng nén lossless. Điều đó có nghĩa là bạn sẽ không thấy bất kỳ khác biết nào của bức ảnh được nén lại. Nếu bạn đang tìm kiếm một cách tốt hơn để tăng tốc độ WordPress, WebP có thể là một giải pháp tuyệt vời.

Về tác giả

Duy Anh

Chào các bạn,

Mình là coder, đang sống và làm việc ở Mỹ. Mình thích viết lách nên muốn dành khoảng thời gian trống để chia sẻ các thủ thuật giúp các bạn xây dựng được trang web riêng của mình. Bạn nào cần xây dựng blog, web thì cứ ới, rảnh là mình giúp, tất cả FREE nhé!

2 Bình luận

Ý kiến cá nhân của bạn

bộ công cụ Wordpress hữu ích dành cho mọi website

Bộ công cụ hữu ích dành cho mọi website Wordpress

Bao gồm theme & plugin tốt nhất và được sử dụng nhiều nhất!

Xin vui lòng kiểm tra email để xác thực tài khoản!