Büyük boyutlu görseller
Görseller yüklendiğinde, indirilen dosyanın doğal boyutu sayfadaki görselin gerçek boyutuyla karşılaştırılır. Gerçek boyut, CSS uygulanmış görselin oluşturulan boyutu piksel cihaz oranı ile çarpılarak hesaplanır. İndirilen görsel çok daha büyükse (her iki boyutta da 1200px'den fazla büyükse), bu uyarı tetiklenir. Büyük boyutlu görsellerin indirilmesi sayfa yüklemeyi yavaşlatabilir ve Core Web Vitals üzerinde olumsuz bir etkiye sahip olabilir.
Tembel yüklenen LCP öğesi
Yükleme sırasında sayfadaki en büyük içerikli element "LCP Elementi" olarak kabul edilir ve bu, Core Web Vitals'tan biri olan Largest Contentful Paint ile ilgilidir. Bir LCP elementini tembel yüklemek sayfa performansı üzerinde güçlü bir olumsuz etkiye sahip olacaktır. Bu stratejiyle, tarayıcının görsel indirmeye başlamadan önce elementin görünüm alanında olup olmadığını belirlemek için yerleşim hesaplamalarını tamamlaması gerekir. Sonuç olarak, Angular LCP elementine loading="lazy" özniteliğinin verildiğini algıladığında bir uyarı tetiklenir.
Hatayı ayıklama
Söz konusu <img> elementini bulmak için konsol uyarısında sağlanan görsel URL'sini kullanın.
Büyük boyutlu görselleri düzeltme yolları
- Daha küçük bir kaynak görsel kullanın
- Farklı düzenler için birden fazla boyut gerekiyorsa bir
srcsetekleyin. - srcset'leri otomatik olarak oluşturan Angular'ın yerleşik görsel direktifini (
NgOptimizedImage) kullanmaya geçin.
Tembel yüklenen LCP öğesini düzeltme yolları
loadingözniteliğini"eager"gibi farklı bir değere değiştirin.- LCP görsellerini kolayca önceliklendirmeye olanak tanıyan Angular'ın yerleşik görsel direktifini (
NgOptimizedImage) kullanmaya geçin.
Görsel Performans Uyarılarını Devre Dışı Bırakma
Her iki uyarı da uygulamanızın kök düzeyinde bir sağlayıcı kullanılarak site genelinde ayrı ayrı devre dışı bırakılabilir:
providers: [
{
provide: IMAGE_CONFIG,
useValue: {
disableImageSizeWarning: true,
disableImageLazyLoadWarning: true
}
},
],