Görselleri Yeni Nesil Biçimlerde Sunun

Lighthouse uyarısı, JPEG ve PNG dosyalarınızı WebP veya AVIF formatına dönüştürmeniz ve ardından bunları orijinali yedek olacak şekilde bir picture öğesi aracılığıyla sunmanız gerektiği anlamına gelir. Bu denetimi geçmek en kolay olanlardan biridir, çünkü çözüm mimari olmaktan ziyade mekaniktir.

Lighthouse, modern bir biçimde sunulduğunda önemli ölçüde daha küçük olacağına inandığı görselleri bulduğunda bu uyarıyı verir. Tahmin, indirilen dosyaya dayandığından, rapor ettiği tasarruf genellikle elde edilebilir ve bazen ihtiyatlıdır.

Lighthouse neyi ölçüyor?

Lighthouse, her bir görseli dahili olarak WebP olarak yeniden kodlar ve tasarruf bir eşiği aştığında aradaki farkı rapor eder. Rapordaki sayı, genel bir öneriden ziyade gerçek bir tahmindir.

Eşiğin altındaki görseller göz ardı edilir, bu nedenle 30 görsel içeren bir sayfa denetimde yalnızca 4 görsel gösterebilir. Listelenen dosyalar, ilk önce düzeltilmeye değer olanlardır. Bunları temizlemek, sayfadaki diğer görseller eski biçimlerde kalsa bile genellikle uyarıyı tamamen kaldırır.

Denetimi karşılayan işaretleme

İlk sırada AVIF, ikinci sırada WebP ve img etiketinde orijinal JPEG olacak şekilde bir picture öğesi kullanın. Tarayıcı anladığı ilk kaynağı seçer, böylece daha yeni tarayıcılar küçük dosyayı alırken eski tarayıcılar yine de bir görsel alır.

img etiketi kalmalıdır, çünkü alt metni, boyutları ve yedeği taşır. Genişlik ve yükseklik niteliklerinin atlanması, görseller yüklenirken düzen kaymasına neden olur ve bu da bu denetimi düzeltirken farklı bir Core Web Vitals ölçümüne zarar verir. Her iki niteliği de yedek görselin gerçek piksel boyutuna ayarlayın.

Denetim nasıl geçilir?

Uyarıyı düzgün bir şekilde çözmek için bu 6 adımı izleyin.

1. Lighthouse raporunu açın ve ölçülebilir tasarruf sağlayan, adını belirttiği görselleri listeleyin.
2. Birçoğu yanlış biçimde olmasının yanı sıra aşırı büyük olduğundan, her görselin görüntüleme boyutunu kontrol edin.
3. Her görseli, yüksek yoğunluklu ekranlar için iki katına çıkararak gerçek görüntüleme genişliğine göre yeniden boyutlandırın.
4. Sayfadaki en büyük görseller için WebP formatına 80 kalitesinde, AVIF formatına ise 65 kalitesinde dönüştürün.
5. Sonuçları, orijinali img yedeği olacak şekilde bir picture öğesi aracılığıyla sunun.
6. Uyarının temizlendiğini ve hiçbir düzen kaymasının görünmediğini doğrulamak için Lighthouse'u tekrar çalıştırın.

3. adım, 4. adımdan daha önemlidir. Boyutlar, dosya boyutunun çoğunluğunu kontrol eder ve aşırı büyük bir WebP hala aşırı büyük bir görseldir. Toplu olarak dönüştürme birkaç dakika sürer, işaretlemeyi yazmak ise genellikle daha uzun sürer.

Hangi görsel için hangi biçim?

Platformunuz bunu zaten yapıyor mu?

Birçok içerik sistemi ve barındırma sağlayıcısı görselleri otomatik olarak dönüştürür, bu nedenle elle bir şey oluşturmadan önce kontrol edin. İşi iki kez yapmak yaygındır ve israftır.

2 dakikada test edin. Yayınlanan sayfayı açın, bir görsele sağ tıklayıp yeni sekmede açın, ardından adres çubuğundaki dosya uzantısını okuyun. JPEG olarak yüklediğiniz bir dosyada .webp uzantısı olması, platformun zaten dönüştürme yaptığı anlamına gelir. Shopify, çoğu yönetilen WordPress barındırıcısı ve birkaç site oluşturucu bunu varsayılan olarak yapar.

Uyarı neden bazen geri döner?

Dönüştürme adımı otomatik yerine manuel olduğunda, yeni yüklemeler sorunu yeniden ortaya çıkarır. Ocak ayında temizlenen bir site, editörler doğrudan kameradan yükleme yaparsa Haziran ayına kadar uyarıyı tekrar gösterecektir.

Yalnızca dosyaları değil, süreci düzeltin. Platform düzeyinde otomatik dönüştürmeyi etkinleştirin veya görsellerin yüklenmeden önce yeniden boyutlandırılması ve dönüştürülmesi konusunda basit bir kural üzerinde anlaşın. Kuralı yazılı hale getirmek, birden fazla kişinin yayın yaptığı her sitede önemlidir, çünkü denetim ortalama görseli değil, en kötü görseli ölçer.

AVIF mi, WebP mi yoksa her ikisini de mi kullanmalısınız?

Çoğu sitede yalnızca WebP kullanın ve AVIF'i yalnızca sayfadaki en büyük görseller için ekleyin. Her ikisini de desteklemek, sıradan görsellerde küçük bir tasarruf için oluşturulacak, depolanacak ve senkronize tutulacak dosya sayısını iki katına çıkarır.

AVIF'in halihazırda yüzlerce kilobayt olarak ölçülen dosyalarda yüzde 20 ila 30 oranında daha fazla tasarruf sağladığı, fotoğraf ağırlıklı sitelerde hesaplama değişir. 600 KB'lık bir hero görseli taşıyan bir sayfada bu, gerçek bir azalmadır. 40 KB'lık küçük resimlerden oluşan bir sayfada ise ekstra iş hattı, getirdiğinden daha fazla çaba gerektirir ve denetimi tek başına WebP temizler.

Sonucu düzgün bir şekilde kontrol etme

Lighthouse'u uzantıların devre dışı bırakıldığı gizli bir pencerede yeniden çalıştırın, çünkü tarayıcı uzantıları ölçümü bozar. Puanlar ayrıca çalıştırmalar arasında değişiklik gösterir, bu nedenle tek bir sayıya güvenmek yerine 3 çalıştırmayı karşılaştırın.

Tarayıcının yeni biçimi aldığını varsaymak yerine doğrulayın. Geliştirici araçlarını açın, Ağ sekmesine geçin, görsellere göre filtreleyin ve sayfayı yeniden yükleyin. Tür sütunu gerçekte neyin sunulduğunu gösterir. Dönüşümden sonra hala JPEG sunan bir sayfa genellikle picture öğesi işaretlemesinin yanlış olduğu veya bir önbellek katmanının önceki sürümü tuttuğu anlamına gelir.

Bununla birlikte görünen ilgili denetimler

• Görselleri doğru boyutlandırın. Görsel, görüntülendiği alandan daha büyüktür. Sıkıştırmak yerine yeniden boyutlandırın.
• Görselleri verimli bir şekilde kodlayın. Sıkıştırma çok hafif. Kalite ayarını düşürün.
• Ekran dışı görselleri erteleyin. Ekranın altındaki görsellere geç yükleme (lazy loading) ekleyin.
• Largest Contentful Paint öğesi. Genellikle ilk önce ilgilenilmeyi hak eden hero görselinizdir.
• Görsel öğelerinin açık genişlik ve yükseklikleri yok. Düzen kaymasını önlemek için her iki niteliği de ekleyin.

Bu 5 denetim genellikle birlikte görünür ve raporda adı geçen görselleri yeniden boyutlandırmak ve dönüştürmek, tek bir geçişte çoğunu temizler.

Bu, bir sayfayı gerçekte ne kadar iyileştirir?

Modern biçimlere dönüştürmek genellikle görsel ağırlığının yüzde 25 ila 35'ini kaldırır ve önce yeniden boyutlandırmak sıklıkla çok daha fazlasını kaldırır. Görsel ağırlıklı bir sayfada birleşik etki genellikle yüzde 70 ila 80'dir.

İyileşme, ana içeriğin ne kadar hızlı göründüğünü ölçen Largest Contentful Paint'te kendini gösterir. Bu ölçüm genellikle tek bir görsele göre belirlenir, bu nedenle hero dosyasını küçültmek, sayfadaki payıyla orantısız bir etkiye sahiptir. 20 küçük görseli küçültmek, 1 büyük görseli küçültmekten daha az önem taşır.

Ne yapılmamalı?

JPEG yedeğini kaldırmayın ve ziyaretçilerin indireceği görselleri dönüştürmeyin. Her iki hata da küçük bir puan artışı için gerçek bir yeteneği feda eder.

Basın kitleri, yazdırılabilir kılavuzlar, indirilebilir şablonlar ve tedarikçi dosyaları JPEG veya PNG olarak kalmalıdır, çünkü WebP tarayıcılar dışında zor işlenir. Bunları modern biçimlerde sunmak, bunları açamayan kişilerden destek talepleri gelmesine neden olur ve bu da tasarruf edilen bant genişliğinden daha pahalıya mal olur.

Raporda adı geçen görselleri dönüştürme

Halihazırda yayınlanmış sürümler yerine orijinal dosyalardan dönüştürün, çünkü sıkıştırılmış bir JPEG hasarı yeni dosyaya taşır. Kodlayıcı, mevcut bozulmaları gerçek detaylardan ayırt edemez ve bunları korumak için bit harcar.

Tek seferde 500'e kadar dosya bırakın veya doğrudan bir ZIP arşivini sürükleyin; tüm set tek bir geçişte dönüştürülür. Her şey kendi işlemcinizde tarayıcınızın içinde çalışır, bu nedenle müşteri siteleri, hazırlık varlıkları ve yayınlanmamış sayfalar asla bir sunucuya ulaşmaz. Tam bir site dönüşümü, ağ üzerinden tek bir dosya geçmeden birkaç dakika içinde tamamlanır.

Dönüştürülen dosyaları eşleşen adlar kullanarak orijinallerinin yanında tutun, böylece picture öğesi işaretlemesi her görsel için elle düzenlenmek yerine öngörülebilir bir şablonla oluşturulabilir. hero.jpg, hero.webp ve hero.avif içeren bir klasörü şablonlamak kolaydır ve bir sonraki biçim geçişini her sayfayı yeniden yazmak yerine toplu bir dönüştürme haline getirir.