Cách sử dụng tệp WebP trong WordPress & Giảm thời gian tải trang

tập tin webp wordpress

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


WebP là gì?

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

WebP hình ảnh lossless là Nhỏ hơn 26% về kích thước so với PNG và hình ảnh mất WebP là Nhỏ hơn 25-34% hơn JPEG.

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

sử dụng webp ebay

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

Hỗ trợ WebP

Bây giờ trong khi WebP rất thú vị, điều quan trọng là phải đề cập đến hỗ trợ trình duyệt. Hiện tại không phải tất cả các trình duyệt hiện đại đều hỗ trợ WebP. Dựa theo đồ hộp, WebP hiện được hỗ trợ trong Chrome 23+, Opera 39+, tất cả các phiên bản Opera mini, trình duyệt Android 4.3+ và Chrome cho Android.

hỗ trợ trình duyệt webp

Nhưng chờ đã! Donv quá thất vọng, vì trong hướng dẫn chúng tôi sẽ chỉ cho bạn dưới đây, có một phương pháp để phân phối các tệp WebP cho các trình duyệt được hỗ trợ và JPG / PNG dưới dạng dự phòng. Điều này có nghĩa là các trình duyệt không được hỗ trợ đã giành được một hình ảnh bị hỏng, họ sẽ chỉ nhìn thấy những gì họ đã thấy trước đó. Hãy nghĩ về WebP như một sự bổ sung cho trang web WordPress của bạn, thay vì di chuyển.

Dựa theo Trường W3, Chrome có độc quyền về thị phần trình duyệt với hơn 70% một chút. Nhưng donith chỉ lấy thị phần làm bằng chứng vững chắc, nhìn vào dữ liệu của khách truy cập của bạn và xem họ đang sử dụng trình duyệt nào, vì nó có thể khác nhau dựa trên thị trường ngách của bạn. Bạn có thể ngạc nhiên mặc dù số liệu thống kê bị lệch. Trong Google Analytics dưới mục Aud Audience, bạn có thể nhấp vào Trình duyệt & OS OS và xem những trình duyệt nào mọi người đang sử dụng khi họ truy cập trang web của bạn. Chúng tôi đã lấy một trang web ngẫu nhiên và như bạn có thể thấy bên dưới, 67% khách truy cập đến từ Chrome và 1% khác từ Opera. Vì thế 68% những người này có thể xem và hưởng lợi từ WebP định dạng tập tin hình ảnh!

trình duyệt chrome webp

Cách sử dụng tệp WebP trong WordPress

Trong ví dụ hôm nay, chúng tôi sẽ sử dụng kết hợp hai plugin WordPress khác nhau để khởi động và chạy WebP trong WordPress. Chúng được tạo và phát triển bởi nhóm tại KeyCDN, một mạng phân phối nội dung toàn cầu (CDN).

  1. [cao cấp] Tối ưu hóa hình ảnh Optimus: Plugin nén hình ảnh lossless cho WordPress, chuyển đổi hình ảnh sang WebP
  2. [miễn phí] Trình tạo bộ nhớ cache WordPress: Bộ nhớ đệm mà cho phép bạn phục vụ WebP để các trình duyệt được hỗ trợ

Tối ưu hóa hình ảnh Optimus

Bạn có thể tải xuống Optimus Image Tối ưu hóa từ Kho lưu trữ WordPress, từ Optimus.io, hoặc từ 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 cao cấp nếu bạn muốn chuyển đổi hình ảnh của mình sang WebP. Sau khi cài đặt, bạn có thể kích hoạt tính năng Tạo các tệp WebP trong các cài đặt plugin.

tạo tập tin webp

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

tập tin webp và png

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

tối ưu hóa hình ảnh số lượng lớn

Trình tạo bộ nhớ cache WordPress

Vì vậy, bây giờ bạn có hình ảnh WebP, bạn cần một cách để bảo WordPress cung cấp hình ảnh WebP cho các trình duyệt được hỗ trợ và PNG / JPG cho các trình duyệt khác. Điều này có thể được thực hiện với plugin WordPress Cache Enabler miễn phí. Bạn có thể tải xuống plugin từ Kho lưu trữ WordPress hoặc cài đặt nó từ 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 các ứng dụng trên mạng Tạo một phiên bản được lưu trong bộ nhớ cache WebP bổ sung trong cài đặt plugin.

cài đặt bộ đệm

Khi bạn bật tùy chọn đó, một phiên bản WebP được lưu trong bộ nhớ cache bổ sung của trang của bạn sẽ được tạo.phiên bản webp

Và đó là nó! Bây giờ bạn nên có các tệp WebP chạy trên trang web WordPress của bạn.

So sánh từ JPG đến WebP

Chúng tôi đã chạy một so sánh JPG sang WebP để cho thấy sự khác biệt bạn có thể đạt được.

TÊN TẬP TINNGUỒN GỐCJPGĐỊNH DẠNG WEBPKÍCH THƯỚC%
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 dẫn đến một Giảm 85,87% kích thước hình ảnh trung bình.

So sánh PNG với WebP

Một lần nữa, chúng tôi cũng chạy một so sánh PNG sang WebP để cho thấy sự khác biệt bạn có thể đạt được.

Tên tệpPNG gốcPNG nénĐịnh dạng WebPChênh lệch kích thước%
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 dẫn đến một Giảm 42,8% kích thước hình ảnh trung bình.

Tóm lược

Như bạn có thể thấy, WebP rất dễ thực hiện trên trang web WordPress của bạn và bạn có thể đạt được kích thước tệp hình ảnh nhỏ hơn đáng kể! Không có nén hình ảnh ngoài đó có thể so sánh với sự tiết kiệm của WebP. Ồ, và chúng tôi đã đề cập rằng WebP có khả năng sử dụng nén không mất dữ liệu? Điều đó có nghĩa là bạn đã thắng được khi thấy bất kỳ sự mất chất lượng đáng chú ý nào. 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.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map