Core Web Vitals için görselleri optimize edin

Görseller Core Web Vitals'ı Nasıl Etkileyebilir?

Görseller bir web sitesinin görsel çekiciliğini artırmada önemli bir rol oynar, ancak aynı zamanda yükleme hızı üzerinde de önemli bir etkiye sahip olabilirler. Core Web Vitals, Google'ın bir web sitesinin user experience'ını ölçmek için kullandığı bir dizi metriktir ve görsel optimizasyonu iyi puanlar elde etmede kritik bir faktördür. Bu makalede, Core Web Vitals için görselleri nasıl optimize edeceğinizi ve web sitenizin yükleme hızını nasıl artıracağınızı tartışacağız.

Görseller hangi Core Web Vitals'ı etkileyebilir?

Görsellerin tüm Core Web Vitals'ı etkileyebildiğini öğrenmek sizi şaşırtabilir. Görseller, render sırasında geç bir zamanda indirme kuyruğuna alınırsa veya basitçe çok büyüklerse genellikle yüksek bir LCP puanına neden olur. Görsel boyutları ayarlanmamışsa veya yükleme aşamasında değişirse görseller CLS puanını da etkileyebilir. Ve son olarak, görsel çözümleme ana iş parçacığında çok fazla iş yükü oluşturuyorsa, INP'yi bile etkileyebilirler. Daha yakından bakalım:

Largest Contentful Paint

Core Web Vitals'dan biri olan Largest Contentful Paint (LCP), sayfadaki en büyük öğenin (görsel veya video gibi) kullanıcıya görünür hale gelmesinin ne kadar sürdüğünü ölçer. Bir görsel çok geç kuyruğa alınırsa veya yüklenmesi çok uzun sürerse, sayfanın LCP puanını önemli ölçüde yavaşlatabilir.

Cumulative Layout Shift

Bir diğer Core Web Vital olan Cumulative Layout Shift (CLS), bir sayfadaki içeriğin yüklenirken ne kadar hareket ettiğini ölçer. Görseller, doğru boyutlandırılmadıysa veya sayfa zaten yüklendikten sonra eklendiğinde diğer öğelerin hareket etmesine neden olarak düzen kaymalarına yol açabilir.

First Input Delay ve INP

Son olarak, görseller üçüncü Core Web Vital olan INP'yi de etkileyebilir. INP, bir kullanıcı sayfayla etkileşime geçtikten sonra sayfanın görsel olarak yanıt vermesi için geçen süreyi ölçer. Çözümlenmesi gereken çok fazla büyük görsel varsa, sayfa kullanıcı etkileşimlerine yanıt vermekte gecikerek düşük bir INP puanına yol açabilir.

Adım 1: HTML görsel öğesini hız için optimize edin

Src özniteliği

Görselin URL'sini belirtir. Bu özellik, tarayıcıya görseli nerede bulacağını söylediği için çok önemlidir.

Width ve height özniteliği

Görselin piksel cinsinden genişliğini ve yüksekliğini belirtir. Bu özellikler, görselin sayfada doğru şekilde render edilmesi için önemlidir, çünkü görsel kapsayıcısının boyutunu ve görselin içine nasıl sığacağını tanımlarlar.

Alt özniteliği

Görsel görüntülenemezse alternatif metni belirtir. Bu, erişilebilirlik açısından önemlidir, çünkü görme engelli kullanıcıların görselin ne hakkında olduğunu anlamalarına yardımcı olur. Ayrıca arama motoru optimizasyonu (SEO) için de önemlidir, çünkü arama motorları görselin içeriğini anlamak için alt metnini kullanır.

Loading özniteliği (lazy loading)

Tarayıcının görseli nasıl yüklemesi gerektiğini belirtir (lazy, eager veya auto). Bu özellik, sayfa performansını artırmak için önemlidir, çünkü görsellerin asenkron olarak ve yalnızca ihtiyaç duyulduğunda yüklenmesine olanak tanır.

Srcset özniteliği

Sizes özniteliği

Decoding özniteliği

Fetchpriority özniteliği

Fetchpriority özniteliği, bir kaynağın sayfadaki diğer kaynaklara göre indirme önceliğini belirtir. Priority özniteliği üç değerden birini alabilir: "high", "medium" veya "low". Yüksek öncelikli bir kaynak, orta veya düşük öncelikli kaynaklardan önce yüklenir. Orta öncelikli bir kaynak, düşük öncelikli kaynaklardan önce yüklenir. Aynı önceliğe sahip kaynaklar, HTML'de göründükleri sırayla yüklenir.

Adım 2: Görselin mümkün olduğunca erken indirme kuyruğuna alındığından emin olun

HTML'yi optimize ettikten sonra yapılacak ikinci şey, görsel planlamasına bakmaktır. Birçok durumda, görsellerin LCP metriğini etkilemesi söz konusu olduğunda en büyük darboğaz geç planlamadır. Bir tarayıcı, render sürecinin erken aşamasında LCP öğesini indirme şansına sahip olursa, görsel tarayıcıya mümkün olan en erken zamanda hazır olacak ve tarayıcı bu öğeyi render sürecinin erken aşamasında boyamaya başlayabilecektir.

Kulağa basit geliyor değil mi? Peki, görselin mümkün olduğunca erken indirme kuyruğuna alındığından nasıl emin oluruz.

LCP öğesini önceden yükleyin

Erken indirmeyi sağlamanın en etkili yolu görseli önceden yüklemektir. Görseli önceden yüklemek, <head> öğesinin başında basit bir etiketle yapılır. Örneğin:

<link rel="preload" as="image" href="image.jpg">

Bu basit etiket tarayıcıya "image.jpg" dosyasına yakında ihtiyacımız olacağını söyleyecek ve tarayıcı bu dosyayı hemen indirmeye başlayacaktır.

LCP öğesini eager olarak yükleyin

Yüksek fetchpriority kullanın

Herhangi bir nedenle LCP öğesini önceden yükleyemiyorsanız, en azından öğenin fetchpriority özniteliğinin high olarak ayarlandığından emin olun. Bu, tarayıcıya görselin sayfa için önemli olduğunu ima edecek ve tarayıcı onu yüksek öncelikle indirecektir. Lütfen fetchpriority="high" kullanmanın genellikle bir görseli önceden yüklemek kadar verimli olmadığını unutmayın!

JavaScript tabanlı lazy loading'den kaçının

Adım 3: Görselin mümkün olduğunca hızlı indirildiğinden emin olun

Yapılacak üçüncü şey, olması gerekenden daha büyük görsellere değerli ağ kaynaklarını harcamadığınızdan emin olmaktır. Bunu duyarlı görseller kullanarak, sıkıştırma kullanarak ve yeni ve daha hızlı görsel formatları kullanarak yapabilirsiniz

Duyarlı görseller

Görsel Sıkıştırma

Yeni ve daha hızlı görsel formatları

Görseller genellikle bir web sayfasındaki en büyük kaynaklardan biridir ve optimize edilmediklerinde sayfanın yükleme hızını önemli ölçüde yavaşlatabilirler. WebP ve AVIF formatları gibi daha yeni ve daha hızlı görsel formatları, kalitelerinden ödün vermeden görsellerin dosya boyutunu küçültmeye yardımcı olabilir. Bu, daha hızlı yüklenebilecekleri anlamına gelir ve bu da sayfanın yükleme hızını artırabilir.

Adım 4: Düzen kaymasını ortadan kaldırın!

Yüklenirken boyut değiştiren görseller düzen kaymasına neden olacaktır. Bu kadar basit. Görsellerin düzen kaymasına neden olmasının 3 ana nedeni vardır (aslında çok daha fazlası var ama bu 3'ü en yaygın olanlarıdır)

1. Eksik görsel boyutları

2. Stil sorunları

Genellikle görsellerin görüntü alanından daha büyük olması basit bir CSS hilesiyle önlenir

img{
   max-width:100%;   height:auto;
}

Bu harika bir hiledir ve kullanmalısınız. Ne yazık ki, düzen kaymasına neden olan bu hilenin varyantlarını düzenli olarak görüyorum. Örneğin width:auto ekleyerek:

img{
   max-width:100%;   height:auto;
   width:auto;
}

Bu, herhangi bir görselin auto genişlik ve yükseklikle render edilmesini sağlayacaktır. Bu genellikle tarayıcının görsel indirilmeden önce görseli 0x0px olarak render edeceği anlamına gelir

3. Yer tutucular

Bazı JavaScript tabanlı lazy loading betikleri yer tutucular kullanır. Yukarıda bahsedilen max-width:100% ve height:auto gibi bir CSS hilesi kullanıyorsanız, kare yer tutucunun otomatik yüksekliği görselin height özniteliğiyle eşleşmeyecektir. Temelde görsel önce kare yer tutucu ile 720x720'de render edilecek ve son görsel indirildikten sonra 720*180'de render edilecektir

<img 
  src="1x1placeholder.png" 
  data-src="hero.png" 
  width="720" 
  height="180"
  style="height:auto;max-width:100%"
>

Adım 5: Ana iş parçacığını koruyun

Bir sonraki dikkat edilmesi gereken şey, aynı anda çok fazla görselin ana iş parçacığında çözümlenmemesini sağlamaktır. Genellikle bu bir sorun olmayacaktır, ancak ürün listeleme sayfalarında (bazen 500 kadar görselin kaynaklar için yarıştığı!) bunu birçok kez gördüm.

Hile, tüm görsellere decoding="async" ekleyerek bu görsellerin ayrı bir iş parçacığında çözümlenebilmesini sağlamaktır. Ayrıca, ekranın altındaki ve gizli tüm görsellere loading="lazy" ekleyerek bu kadar çok görselin aynı anda çözümlenmesinden kaçınmaya çalışın.

Adım 6: Her görsel için doğru stratejiyi seçin!

LCP öğesi için görsel stratejileri

LCP öğesi genellikle en önemli görsel öğedir. Bu yüzden bunu gerçekten önceliklendirmemiz gerekiyor."

1. Görseli sayfanın head bölümünün başında şu kodla önceden yükleyin: <link rel="preload" as="image" href="path-to-img.png">
2. Tarayıcıya bu görselin lazy loading ile yüklenmemesi gerektiğini loading="eager" ayarlayarak veya loading özniteliğini atlayarak belirtin
3. Tarayıcıya bu görselin yüksek öncelikle indirilmesi gerektiğini fetchpriority="high" kullanarak ima edin (görseli önceden yüklüyorsanız bu kısmı atlayabilirsiniz)
4. Bu öğe o kadar önemli olduğu için ana iş parçacığında çözmek istediğimizden decoding="sync" ayarlayın

Logolar ve diğer görünür (LCP olmayan) görseller için görsel stratejisi

Görünür görseller sayfa yükleme sırasında oldukça erken yüklenmelidir, ancak tercihen LCP öğesinden sonra. Bunu LCP öğesini önceden yükleyerek başarabiliriz. Bu, görünür görsellere doğal, doğru indirme sıralarını verecektir.

1. Tarayıcıya bu görselin lazy loading ile yüklenmemesi gerektiğini loading="eager" ayarlayarak veya loading özniteliğini atlayarak belirtin
   
2. Bu öğe güvenle ana iş parçacığı dışında çözümlenebileceğinden decoding="async" ayarlayın!

Ekranın altındaki görseller için görsel stratejisi

Ekranın altındaki tüm görseller lazy loading ile yüklenmelidir. Bu kadar basit! İstisna yoktur!

1. Tarayıcıya bu görselin lazy loading ile yüklenmesi gerektiğini loading="lazy" ayarlayarak belirtin
   
2. Bu öğe güvenle ana iş parçacığı dışında çözümlenebileceğinden decoding="async" ayarlayın!

Arka plan görsellerinden kaçının

Arka plan görselleri kullanıyorsanız yeniden düşünmeniz gerekiyor. Arka plan görselleri lazy loading ile yüklenemez ve decoding özelliğini kontrol edemezsiniz ve fetchpriority ayarlayamazsınız. Arka plan görselleri genellikle duyarlı değildir ve bu muhtemelen size çok fazla bant genişliğine mal olacaktır. Ancak en önemlisi, arka plan görselleri genellikle tarayıcı CSS dosyalarını indirdikten sonra keşfedilir. Bu, bir görsel indirmesini tetiklemek için neredeyse hiçbir zaman doğru zaman değildir!

Normal görsellerin arka plan görselleri gibi davranmasını sağlamak için CSS object-fit:cover ile birlikte normal görsel etiketlerini kullanabilirsiniz!