Arka plan görselleri kötüdür
Web sitenizde arka plan görsellerinden neden kaçınmanız gerektiğini, arka plan görsellerini nasıl hızlıca bulacağınızı ve bu sorunu nasıl çözeceğinizi öğrenin
Arka plan görselleri kötüdür
Beni tanıyanlarınız veya konuşmalarımı dinleyenleriniz, arka plan görsellerinden bahsettiğimi duymuş olabilirsiniz. Dinlememiş olanlarınız için söyleyeyim: arka plan görsellerini gerçekten hiç sevmiyorum. Bu makalede arka plan görsellerini neden sevmediğimi, arka plan görseli içeren sayfaları nasıl hızlıca bulacağınızı ve bunları nasıl düzelteceğinizi kısaca açıklayacağım!
Arka plan görselleri neden Core Web Vitals için kötüdür
Bir web sayfası yüklenirken her öğenin kendi zamanı ve yeri vardır. Erteleme, önceden yükleme, asenkron yükleme, zamanlama, fetchpriority tanımlama gibi modern tekniklerle tüm kritik kaynakları hemen hemen kontrol altına alabiliriz. Arka plan görselleri hariç!
Şu gerçek dünya örneğini düşünün:
Her gün, çoğunlukla WordPress sitelerinde bu kalıbı görüyorum. Tüm normal görseller lazy load ile yükleniyor ve bazı görseller (bu durumda alt bilgideki sosyal simgeler) arka plan görseli olarak tanımlanmış. Ne olduğunu tahmin edebilir misiniz?
<html>
<head>
<style>
footer {
/* a margin of 100 vh wil make the footer off-screen !*/
margin-top: 100vh;
>.social {
>.facebook {background-image: url('img/facebook.jpg');}
>.instagram {background-image: url('img/instagram.jpg');}
>.linkedin {background-image: url('img/linkedin.jpg');}
>.email {background-image: url('img/email.jpg');}
}
}
</style>
</head>
<body>
<!-- yes this image is lazy loaded, because tiny mistakes happen! -->
<img loading="lazy" src="img/hero.jpg"></img>
<footer>
<div class="social">
<span class="facebook"></span> <span class="instagram"></span> <span class="linkedin"></span> <span class="email"></divspan </div>
</footer>
</body>
</html>Tahmin etmiş olabilirsiniz: ekran dışındaki arka plan görselleri sayfadaki Largest Contentful Paint öğesi olacak çok daha önemli 'hero.jpg' görselinden önce indirme kuyruğuna alınır.
Ama hepsi bu kadar değil!
Dediğim gibi arka plan görselleri kötüdür! Bunun nedeni, bazen aldıkları garip önceliklendirmenin yanı sıra, arka plan görsellerinin normal görsellerin sahip olduğu harika özelliklerden yoksun olmasıdır!
- Lazy loading yok: arka plan görselleri için loading özelliği yoktur
- Asenkron çözümleme yok: arka plan görselleri için decoding özelliği yoktur
- fetchpriority yok: arka plan görselleri için fetchpriority özelliği yoktur
- Duyarlı görsel kaynakları: Arka plan görselleri için image-set() özelliği, iyi bir responsive tasarımla elde ettiğiniz özelliklerin aynı gücüne sahip değildir.
- Width ve height özelliği yok. Basit width ve height özelliklerini ayarlayamamak, kod gerektiren geçici çözümler kullanmanıza neden olur (aynı karmaşıklıkta daha fazla kod her zaman daha az koddan yavaştır!)
- Alt text yok: bu doğrudan n
Bir sayfadaki tüm arka plan görsellerini hızlıca bulun
let bgimg = performance.getEntriesByType('resource')
.filter(rs => rs.initiatorType == 'css')
.map(rs => {
return {
name: rs.name,
initiator: rs.initiatorType
}
}) || [];
(bgimg.length > 0)?
console.table(bgimg):
console.log('No background images on this page!'); Bu, tüm arka plan görseli adlarını ve başlatıcılarını içeren düzgün biçimlendirilmiş bir tablo gösterecektir
Arka plan görsellerinden nasıl kaçınılır
Arka plan görsellerinden kolayca kaçınılabilir. Bunu nasıl yapacağınız görselin kendisine bağlıdır. Kabaca 2 yöntem vardır.
'Normal görseller' söz konusu olduğunda
Söylesem inanmazsınız ama arka plan görseli bulduğum vakaların çoğunda görselin arka plan kısmının bir amacı bile yoktur. Görsellerin sadece 'sayfada bir yerde olması gerekir' ve background-image:url() bu amaçla yanlış kullanılmaktadır.
Durum buysa, basitçe normal bir görsel etiketi ekleyin ve arka plan görselini stil dosyasından kaldırın.
Kaplama görselleri söz konusu olduğunda:
Kaplama görselleri, bir üst kapsayıcıyı tamamen kaplayan görsellerdir. Arka plan görsellerini kaplama görseli olarak kullanmak bir bakıma mantıklıdır çünkü uzun zaman önce kaplama görselleri elde etmenin tek yolu buydu ve sanırım insanlar bildiklerine bağlı kalıyorlar. Neyse ki artık daha iyi seçeneklerimiz var. Hadi düzeltelim!
Kaplama görselleri söz konusu olduğunda, background-image: url(hero.jpg); background-size: cover; stilini kaldırın ve aynı kapsayıcıya normal bir görsel yerleştirin ve CSS'i şöyle düzenleyin:
<style>
.img-container {
position: relative;
> img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: 1;
}
}
<style>
<div class="img-container">
<img
height="500"
width="300"
decoding="async"
loading="lazy"
src="hero.jpg"
srcset="hero-320w.jpg, hero-480w.jpg 1.5x"
alt="alt text"
fetchpriority="low"
>
</div>Make decisions with Data.
You cannot optimize what you do not measure. Install the CoreDash pixel and capture 100% of user experiences.
- 100% Capture
- Data Driven
- Easy Install
