Hazırlık kontrolü · Hızlandır alanı · ağırlık 6
Modern görsel biçimleri kullanılıyor
En az üç görsel içeren bir ana sayfada bazı görseller WebP veya AVIF kullanır (dosya türüne, source öğesinin türüne veya görsel CDN'sinin biçim parametresine göre).
- Gözlemlenen siteler
- 40%
- İlk 1 bin site
- 42%
- İlk 1 milyon dilimi
- 40%
- Ölçülmedi
- 62,841
ölçülen 123,215 site içinde
219 site ölçüldü
68,845 site ölçüldü
engellendi, doğrulama sorgusuyla karşılaşıldı veya uygulanabilir değil
Neden önemli
WebP ve AVIF, benzer kalitede genellikle JPEG veya PNG'den çok daha küçüktür ve görseller çoğu zaman bir sayfanın en fazla yer kaplayan bölümüdür.
Nasıl düzeltilir
Bir görsel CDN'si aracılığıyla veya derleme sırasında her iki biçimi de üreterek, JPEG veya PNG yedeğiyle birlikte WebP veya AVIF sunun.
Nasıl kontrol ediyoruz
En az üç görsel içeren bir ana sayfada bazı görseller WebP veya AVIF kullanır (dosya türüne, source öğesinin türüne veya görsel CDN'sinin biçim parametresine göre).
Gözlemlendi: WebP veya AVIF görselleri tespit edildi.
Gözlemlenmedi: WebP veya AVIF görseli tespit edilmedi.
Sınırlama: Otomatik bir istemciye iletilen ana sayfa HTML'sine dayanır; daha sonra çalışan betikler yürütülmemiştir.
Teknoloji yığınına özgü adımlar
- WordPress: WordPress, 5.8 sürümünden beri WebP yüklemelerini ve 6.5 sürümünden beri AVIF yüklemelerini destekler; görsel eklentileri veya barındırma sağlayıcısı mevcut görselleri dönüştürebilir.
- Next.js: next/image bileşeni optimize edilmiş biçimleri otomatik olarak sunar.
- Nuxt: Nuxt Image, WebP ve AVIF biçimlerinde çıktı üretebilir.
- Cloudflare: Cloudflare Polish, görselleri WebP biçimine dönüştürebilir.
- Vercel: Vercel Image Optimization modern biçimler sunar.
- Shopify: Shopify görsel CDN'si modern biçimler sunabilir; temalar için Shopify tarafından sağlanan web performansı rehberini izleyin.
Popülerlik dilimine göre
| Chrome UX Report aralığı | Gözlemlendi | Ölçüldü |
|---|---|---|
| İlk 1 bin | 42% | 219 |
| İlk 5 bin | 38% | 1,042 |
| İlk 10 bin | 41% | 1,351 |
| İlk 50 bin | 39% | 10,382 |
| İlk 100 bin | 40% | 10,125 |
| İlk 500 bin | 39% | 31,251 |
| İlk 1 milyon | 40% | 68,845 |
Bunu yapma olasılığı en yüksek kategoriler
Olasılığı en düşük kategoriler
Teknoloji yığınına göre
- 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%
Sağlayıcıya göre
- Netlify52%
- Cloudflare47%
- Bunny CDN46%
- Amazon CloudFront46%
- Vercel46%
- Fastly44%
- Azure Front Door/CDN42%
- Alibaba Cloud CDN40%
- Google edge40%
- Imperva35%
- Sucuri33%
- Akamai27%
Bunu gözlemlediğimiz popüler siteler
Kaynaklar ve rehberler
- web.dev: WebP görsellerini kullanın
- WordPress 5.8, WebP desteği ekliyor
- WordPress 6.5, AVIF desteği ekliyor
- Next.js: Image bileşeni
- Nuxt Image
- Cloudflare Polish
Rehber: AVIF, WebP, JPEG ve PNG: Doğru Görüntü Formatını SeçinKendi sitenizi kontrol edin