Kiểm tra mức độ sẵn sàng · Nhóm Tăng tốc · Trọng số 6
Đang sử dụng định dạng hình ảnh hiện đại
Trên trang chủ có ít nhất ba hình ảnh, một số ảnh sử dụng WebP hoặc AVIF (dựa trên loại tệp, loại của phần tử source hoặc tham số định dạng của CDN hình ảnh).
- Được ghi nhận trên
- 40%
- Các trang web top 1K
- 42%
- Nhóm top 1M
- 40%
- Không đo được
- 62,841
trong số 123,215 trang web đã đo
219 đã đo
68,845 đã đo
bị chặn, gặp yêu cầu xác minh hoặc không áp dụng
Vì sao điều này quan trọng
WebP và AVIF thường có kích thước nhỏ hơn nhiều so với JPEG hoặc PNG ở chất lượng tương đương, và hình ảnh thường là phần nặng nhất của một trang.
Cách khắc phục
Phục vụ WebP hoặc AVIF kèm phương án dự phòng JPEG hoặc PNG, thông qua CDN hình ảnh hoặc bằng cách tạo cả hai định dạng khi dựng website.
Cách chúng tôi kiểm tra
Trên trang chủ có ít nhất ba hình ảnh, một số ảnh sử dụng WebP hoặc AVIF (dựa trên loại tệp, loại của phần tử source hoặc tham số định dạng của CDN hình ảnh).
Đã ghi nhận: Phát hiện ảnh WebP hoặc AVIF.
Chưa ghi nhận: Không phát hiện ảnh WebP hoặc AVIF.
Giới hạn: Dựa trên HTML của trang chủ được phân phối đến một máy khách tự động; các tập lệnh chạy sau đó không được thực thi.
Các bước theo từng nền tảng công nghệ
- WordPress: WordPress đã hỗ trợ tải lên WebP từ 5.8 và AVIF từ 6.5; các plugin hình ảnh hoặc nhà cung cấp dịch vụ lưu trữ có thể chuyển đổi các ảnh hiện có.
- Next.js: Thành phần next/image tự động phục vụ các định dạng được tối ưu hóa.
- Nuxt: Nuxt Image có thể xuất WebP và AVIF.
- Cloudflare: Cloudflare Polish có thể chuyển đổi hình ảnh sang WebP.
- Vercel: Vercel Image Optimization phục vụ các định dạng hiện đại.
- Shopify: CDN hình ảnh của Shopify có thể phục vụ các định dạng hiện đại; hãy làm theo hướng dẫn về hiệu suất web của Shopify dành cho giao diện.
Theo nhóm mức độ phổ biến
| Nhóm Chrome UX Report | Đã ghi nhận | Đã đo lường |
|---|---|---|
| Top 1K | 42% | 219 |
| Top 5K | 38% | 1,042 |
| Top 10K | 41% | 1,351 |
| Top 50K | 39% | 10,382 |
| Top 100K | 40% | 10,125 |
| Top 500K | 39% | 31,251 |
| Top 1M | 40% | 68,845 |
Các danh mục có khả năng thực hiện điều này cao nhất
Các danh mục có khả năng thấp nhất
Theo bộ công nghệ
- Astro on Amazon CloudFront83%
- Webflow81%
- Astro on Cloudflare78%
- Astro75%
- Gatsby72%
- Gatsby on Amazon CloudFront71%
- Nuxt on Amazon CloudFront62%
- Nuxt on Cloudflare58%
- Nuxt56%
- Nuxt on Google edge55%
- Angular on Cloudflare55%
- HubSpot CMS55%
- Shopify53%
- Angular53%
- Next.js on Amazon CloudFront50%
- Next.js on Azure Front Door/CDN49%
- Next.js on Google edge49%
- Next.js on Cloudflare48%
- WordPress on Cloudflare47%
- WordPress on Amazon CloudFront47%
- Drupal on Amazon CloudFront45%
- Drupal on Cloudflare45%
- Drupal on Fastly44%
- Next.js44%
- PrestaShop on Cloudflare44%
- Angular on Amazon CloudFront44%
- WordPress on Google edge44%
- Next.js on Netlify43%
- WordPress on Vercel43%
- WordPress43%
- Next.js on Vercel43%
- Bitrix42%
- Drupal40%
- Magento / Adobe Commerce on Cloudflare40%
- Wix39%
- Next.js on Akamai39%
- Drupal on Akamai38%
- WordPress on Fastly38%
- PrestaShop36%
- WordPress on Sucuri35%
- Magento / Adobe Commerce34%
- Next.js on Fastly32%
- WordPress on Imperva31%
- GoDaddy Website Builder31%
- Blogger30%
- Adobe Experience Manager on Amazon CloudFront29%
- Sitecore on Azure Front Door/CDN26%
- Joomla26%
- Adobe Experience Manager25%
- Adobe Experience Manager on Cloudflare25%
- BigCommerce25%
- Tilda22%
- Squarespace21%
- Sitecore16%
- Sitecore on Cloudflare16%
- Adobe Experience Manager on Akamai14%
Theo nhà cung cấp
- Netlify52%
- Cloudflare47%
- Bunny CDN46%
- Amazon CloudFront46%
- Vercel46%
- Fastly44%
- Azure Front Door/CDN42%
- Alibaba Cloud CDN40%
- Google edge40%
- Imperva35%
- Sucuri33%
- Akamai27%
Các trang web phổ biến nơi chúng tôi ghi nhận điều này
Nguồn và hướng dẫn
- web.dev: sử dụng ảnh WebP
- WordPress 5.8 bổ sung hỗ trợ WebP
- WordPress 6.5 bổ sung hỗ trợ AVIF
- Next.js: thành phần Image
- Nuxt Image
- Cloudflare Polish
Hướng dẫn: AVIF, WebP, JPEG và PNG: Chọn định dạng hình ảnh phù hợpKiểm tra trang web của bạn