Bantlar için en iyi uygulamalar

Bantları performans ve kullanılabilirlik açısından optimize edin.

Katie Hempenius

Bant, içeriği slayt gösterisine benzer şekilde gösteren bir kullanıcı deneyimi bileşenidir. Bantlar "otomatik oynatılabilir" veya kullanıcılar tarafından manuel olarak gezinilebilir. Bantlar başka bir yerde kullanılabilse de en sık ana sayfalarda resim, ürün ve tanıtımları göstermek için kullanılır.

Bu makalede, bantlar için performans ve kullanıcı deneyimi en iyi uygulamaları ele alınmaktadır.

Performans

İyi uygulanmış bir rulonun performans üzerinde çok az veya hiç etkisi olmamalıdır. Ancak bantlar genellikle büyük medya öğeleri içerir. Büyük öğeler, bantta veya başka bir yerde gösterilmeleri fark etmeksizin performansı etkileyebilir.

• LCP (Largest Contentful Paint)

  Sayfanın LCP öğesini genellikle içeren büyük, sayfanın üst kısmındaki bantlar LCP üzerinde önemli bir etkiye sahip olabilir. Bu senaryolarda bant optimizasyonu, LCP'yi önemli ölçüde iyileştirebilir. Bant içeren sayfalarda LCP ölçümünün işleyiş şekliyle ilgili ayrıntılı açıklama için Bantlar için LCP ölçümü bölümünü inceleyin.

• INP (Sonraki Boyamayla Etkileşim)

  Bantlar, minimum JavaScript gereksinimine sahiptir ve bu nedenle sayfa duyarlılığını etkilememelidir. Sitenizin bantında uzun süre çalışan komut dosyaları olduğunu fark ederseniz bant araçlarınızı değiştirmeyi düşünmeniz gerekir.

• CLS (Cumulative Layout Shift)

  Şaşırtıcı sayıda bant, CLS'ye katkıda bulunabilecek sarsıntılı, birleştirilmemiş animasyonlar kullanıyor. Bu durum, otomatik oynatılan bantların bulunduğu sayfalarda sonsuz CLS'ye neden olabilir. Bu CLS türü genellikle insan gözü tarafından görülmez ve sorunun gözden kaçması kolaydır. Bu sorunu önlemek için bantınızda (ör. slayt geçişleri sırasında) birleştirilmemiş animasyonlar kullanmaktan kaçının.

Performansla ilgili en iyi uygulamalar

HTML kullanarak bant içeriği yükleme

Bant içeriği, sayfa yükleme işleminin başlarında tarayıcı tarafından bulunabilmesi için sayfanın HTML işaretlemesi aracılığıyla yüklenmelidir. Bant içeriğinin yüklenmesini başlatmak için JavaScript kullanmak, bantlar kullanılırken kaçınılması gereken en büyük performans hatalarından biridir. Bu durum, resim yüklemeyi geciktirir ve LCP'yi olumsuz yönde etkileyebilir.

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

Gelişmiş bant optimizasyonu için ilk slaytı statik olarak yükleyip ardından gezinme kontrolleri ve ek içerik içerecek şekilde aşamalı olarak geliştirmeyi düşünebilirsiniz. Bu teknik, kullanıcıların dikkatini uzun süre boyunca çektiğiniz ortamlarda en iyi şekilde kullanılabilir. Bu sayede ek içeriğin yüklenmesi için zaman tanımış olursunuz. Kullanıcıların yalnızca bir veya iki saniyeliğine uğrayabileceği ana sayfalar gibi ortamlarda yalnızca tek bir resim yüklemek de benzer şekilde etkili olabilir.

Düzen kaymalarından kaçının

Slayt geçişleri ve gezinme kontrolleri, bantlardaki düzen kaymalarının en yaygın iki kaynağıdır:

• Slayt geçişleri: Slayt geçişleri sırasında meydana gelen düzen kaymalarına genellikle DOM öğelerinin düzene neden olan özelliklerinin güncellenmesi neden olur. Bu özelliklere örnek olarak şunlar verilebilir: left, top, width ve marginTop. Düzen kaymalarını önlemek için bu öğelerin geçişini gerçekleştirmek üzere CSS transform özelliğini kullanın. Bu demo, temel bir bant oluşturmak için transform öğesinin nasıl kullanılacağını gösterir.

• Gezinme kontrolleri: Bant gezinme kontrollerini DOM'dan taşımak veya eklemek/kaldırmak, bu değişikliklerin nasıl uygulandığına bağlı olarak düzen kaymalarına neden olabilir. Bu davranışı sergileyen bantlar genellikle kullanıcının fareyle üzerine geldiğinde bunu yapar.

Bantlar için CLS ölçümüyle ilgili sık karşılaşılan bazı kafa karışıklığı noktaları şunlardır:

• Otomatik oynatma bandı: Slayt geçişleri, bantla ilgili düzen kaymalarının en yaygın kaynağıdır. Otomatik oynatılmayan bantlarda bu yerleşim kaymaları genellikle kullanıcı etkileşiminin üzerinden 500 ms geçtikten sonra gerçekleşir ve bu nedenle kümülatif yerleşim kayması (CLS) için sayılmaz. Ancak otomatik oynatma bantlarında bu düzen kaymaları yalnızca CLS'ye dahil edilmekle kalmaz, aynı zamanda süresiz olarak tekrarlanabilir. Bu nedenle, otomatik oynatma bandının sayfa düzeni değişikliklerine neden olmadığından emin olmak özellikle önemlidir.

• Kaydırma: Bazı bantlar, kullanıcıların bant slaytları arasında gezinmek için kaydırma özelliğini kullanmasına olanak tanır. Bir öğenin başlangıç konumu değişir ancak kaydırma ofseti (yani scrollLeft veya scrollTop) aynı miktarda (ancak ters yönde) değişirse bu, aynı karede gerçekleşmesi koşuluyla bir düzen kayması olarak kabul edilmez.

Düzen kaymaları hakkında daha fazla bilgi için Düzen kaymalarında hata ayıklama bölümüne bakın.

Modern teknolojiyi kullanma

Birçok site, bantları uygulamak için üçüncü taraf JavaScript kitaplıklarını kullanır. Şu anda eski bant araçlarını kullanıyorsanız daha yeni araçlara geçerek performansı artırabilirsiniz. Yeni araçlar daha verimli API'ler kullanma eğilimindedir ve jQuery gibi ek bağımlılıklara ihtiyaç duyma olasılıkları daha düşüktür.

Ancak, oluşturduğunuz bant türüne bağlı olarak JavaScript'e hiç ihtiyacınız olmayabilir. Yeni Kaydırma Snap API'si, yalnızca HTML ve CSS kullanarak bant benzeri geçişler uygulamayı mümkün kılar.

scroll-snap'ü kullanmayla ilgili faydalı bulabileceğiniz bazı kaynaklar:

• Hikayeler bileşeni oluşturma (web.dev)
• Yeni nesil web stili: kaydırma hızlılığı (web.dev)
• Yalnızca CSS'den oluşan bant (CSS Tricks)
• CSS'ye Özel Bant Oluşturma (CSS İpuçları)

Bant içeriğini optimize etme

Bantlar genellikle sitenin en büyük resimlerinden bazılarını içerir. Bu nedenle, bu resimlerin tamamen optimize edildiğinden emin olmak için zaman ayırmanız faydalı olabilir. Doğru resim biçimini ve sıkıştırma düzeyini seçmek, görüntü CDN'si kullanma ve birden fazla görüntü sürümü sunmak için srcset'i kullanmak resimlerin aktarım boyutunu azaltabilecek tekniklerdir.

Performans ölçümü

Bu bölümde, bantlarla ilgili LCP ölçümü ele alınmaktadır. Bantlar, LCP hesaplaması sırasında diğer herhangi bir kullanıcı deneyimi öğesinden farklı şekilde işlenmese de otomatik oynatılan bantlar için LCP'nin hesaplanma mekanizması sık karşılaşılan bir karışıklık noktasıdır.

Bantlar için LCP ölçümü

Bantlar için LCP hesaplamasının nasıl çalıştığını anlamanıza yardımcı olacak önemli noktalar şunlardır:

• LCP, sayfa öğelerini çerçeveye boyandıkları şekilde dikkate alır. Kullanıcı sayfayla etkileşime geçtiğinde (dokunduğunda, kaydırdığında veya tuş basıldığında) LCP öğesi için yeni adaylar artık dikkate alınmaz. Bu nedenle, otomatik oynatılan bir banttaki herhangi bir slayt, nihai LCP öğesi olma potansiyeline sahiptir. Statik bir bantta ise yalnızca ilk slayt potansiyel bir LCP adayı olur.
• Eşit boyutta iki resim oluşturulursa ilk resim LCP öğesi olarak kabul edilir. LCP öğesi yalnızca LCP adayı mevcut LCP öğesinden daha büyük olduğunda güncellenir. Bu nedenle, tüm bant öğeleri eşit boyuttaysa LCP öğesi gösterilen ilk resim olmalıdır.
• LCP, LCP adaylarını değerlendirirken "hangisi daha küçükse görünür boyut veya doğal boyut"u dikkate alır. Bu nedenle, otomatik oynatılan bir bant resimleri tutarlı bir boyutta görüntülüyor ancak görüntüleme boyutundan küçük, değişen gerçek boyutlara ait resimler içeriyorsa LCP öğesi yeni slaytlar gösterilirken değişebilir. Bu durumda, tüm resimler aynı boyutta gösteriliyorsa en büyük doğal boyuta sahip resim LCP öğesi olarak kabul edilir. LCP'yi düşük tutmak için otomatik oynatılan banttaki tüm öğelerin aynı gerçek boyutta olduğundan emin olmanız gerekir.

Chrome 88'de bantlar için LCP hesaplamasında yapılan değişiklikler

Chrome 88'den itibaren, daha sonra DOM'den kaldırılan resimler potansiyel en büyük içerikli boyamalar olarak kabul edilir. Chrome 88'den önce bu resimler dikkate alınmazdı. Otomatik oynatılan bantlar kullanan siteler için bu tanım değişikliği, LCP puanlarını nötr veya olumlu yönde etkileyecektir.

Bu değişiklik, birçok sitenin rulo geçişlerini, önceden gösterilen resmi DOM ağacından kaldırarak uyguladığına dair gözlem üzerine yapılmıştır. Chrome 88'den önce, yeni bir slayt sunulduğunda önceki öğenin kaldırılması bir LCP güncellemesini tetiklerdi. Bu değişiklik yalnızca otomatik oynatılan bantları etkiler. Tanım gereği, potansiyel en büyük içerikli boyalar yalnızca kullanıcı sayfayla ilk kez etkileşime geçmeden önce gerçekleşebilir.

Chrome 121'de eşiklerde yapılan değişiklikler

Chrome 121, bantlar gibi yatay kaydırmalı resimlerin davranışını değiştirdi. Bu eşikler artık dikey kaydırmayla aynı eşikleri kullanır. Bu, bant kullanım alanında resimlerin görüntüleme alanında görünmeden önce yükleneceği anlamına gelir. Bu da resmin kullanıcı tarafından fark edilme olasılığının düşük olduğu, ancak bunun pahasına daha fazla indirme anlamına geldiği anlamına gelir. Chrome'daki davranışı Safari ve Firefox ile karşılaştırmak için yatay yavaş yükleme demosunu kullanın.

Dikkat edilmesi gereken diğer noktalar

Bu bölümde, bantları uygularken aklınızda bulundurmanız gereken kullanıcı deneyimi ve ürün en iyi uygulamaları anlatılmaktadır. Bantlar, işletme hedeflerinize ulaşmanıza yardımcı olmalı ve içeriği gezinmesi ve okunması kolay bir şekilde sunmalıdır.

Navigasyonla ilgili en iyi uygulamalar

Belirgin gezinme kontrolleri sağlayın

Atlı karınca gezinme denetimleri, kolayca tıklanabilir ve kolayca görülebilir olmalıdır. Bu, nadiren iyi şekilde yapılan bir şeydir. Çoğu bantta hem küçük hem de belirsiz gezinme kontrolleri bulunur. Tek bir renk veya gezinme kontrolü stilinin tüm durumlarda nadiren işe yarayacağını unutmayın. Örneğin, koyu renkli bir arka planda açıkça görülebilen bir okun açık renkli bir arka planda görülmesi zor olabilir.

Gezinme ilerleme durumunu belirtme

Bant gezinme kontrolleri, toplam slayt sayısı ve kullanıcının bu slaytlardaki ilerleme durumu hakkında bilgi sağlamalıdır. Bu bilgiler, kullanıcının belirli bir slayta gitmesini ve hangi içeriğin görüntülendiğini anlamasını kolaylaştırır. Bazı durumlarda, sonraki içeriğin bir önizlemesini (sonraki slayttan bir alıntı veya küçük resim listesi) sunmak da yararlı olabilir ve etkileşimi artırabilir.

Mobil hareketleri destekleme

Mobil cihazlarda, geleneksel gezinme kontrollerine (ör. ekran düğmeleri) ek olarak kaydırma hareketleri desteklenmelidir.

Alternatif gezinme yolları sağlama

Çoğu kullanıcının tüm bant içerikleriyle etkileşim kurması olası olmadığından, bant slaytlarının bağlantı verdiği içeriğe diğer gezinme yollarından erişilebilmelidir.

Okunabilirlikle ilgili en iyi uygulamalar

Otomatik oynatma özelliğini kullanmayın

Otomatik oynatma kullanımı neredeyse paradoksal iki soruna yol açar: Ekrandaki animasyonlar kullanıcıların dikkatini dağıtma ve gözleri daha önemli içeriklerden uzaklaştırma eğilimindedir. Aynı zamanda, kullanıcılar animasyonlarla reklamları ilişkilendirdiği için otomatik oynatılan bantları görmezden gelir.

Bu nedenle, otomatik oynatmanın iyi bir seçenek olması nadirdir. İçerik önemliyse otomatik oynatma özelliğini kullanmamak, içeriğin görünürlüğünü en üst düzeye çıkarır. Bant içeriği önemli değilse otomatik oynatma özelliğini kullanmak daha önemli içeriğin önüne geçer. Ayrıca, otomatik oynatılan bantların okunması zor olabilir (ve can sıkıcı da olabilir). Kullanıcılar farklı hızlarda okuduğundan, bantların farklı kullanıcılar için her zaman "doğru" zamanda geçiş yapması nadirdir.

İdeal olarak, slaytta gezinme, gezinme denetimleri aracılığıyla kullanıcıya yönelik olmalıdır. Otomatik oynatmayı kullanmanız gerekiyorsa kullanıcı fareyle üzerine geldiğinde otomatik oynatma devre dışı bırakılmalıdır. Ayrıca, slayt geçiş hızı slayt içeriğini dikkate almalıdır. Bir slayt ne kadar fazla metin içeriyorsa ekranda o kadar uzun süre gösterilmelidir.

Metinleri ve resimleri birbirinden ayırın

Bant metin içeriği, HTML işaretlemesi kullanılarak ayrı olarak görüntülenmek yerine, genellikle karşılık gelen resim dosyasının içinde "kaynaştırılır". Bu yaklaşım, erişilebilirlik, yerelleştirme ve sıkıştırma oranları açısından kötüdür. Ayrıca, öğe oluşturma konusunda tek tip bir yaklaşımı teşvik eder. Ancak aynı resim ve metin biçimlendirmesi, masaüstü ve mobil biçimlerde nadiren eşit derecede okunabilir.

Kısa ve öz istemler oluşturun

Yalnızca birkaç saniye içinde kullanıcıların dikkatini çekebilirsiniz. Kısa ve net bir metin, mesajınızın anlaşılma olasılığını artırır.

Ürünlerle ilgili en iyi uygulamalar

Bantlar, ek içerik göstermek için ek dikey alan kullanmanın mümkün olmadığı durumlarda iyi çalışır. Ürün sayfalarındaki bantlar genellikle bu kullanım alanına iyi bir örnektir.

Ancak bantlar her zaman etkili bir şekilde kullanılmaz.

• Özellikle promosyonlar içeriyorsa veya otomatik olarak ilerliyorsa bantlar, kullanıcılar tarafından reklamlarla kolayca karıştırılabilir. Kullanıcılar reklamları görmezden gelir. Bu duruma banner körlüğü denir.
• Bantlar genellikle birden fazla departmanı memnun etmek ve işletme öncelikleri hakkında karar vermekten kaçınmak için kullanılır. Sonuç olarak bantlar, etkisiz içerik açısından kolayca bir döküm alanına dönüşebilir.

Varsayımları test edin

Özellikle ana sayfalarda bulunan bantların işletme üzerindeki etkisi değerlendirilmeli ve test edilmelidir. Bant tıklama oranları, bir bandın ve içeriğinin etkili olup olmadığını belirlemenize yardımcı olabilir.

Reklamınız alakalı olmalıdır

Bantlar, net bir bağlamda sunulan ilgi çekici ve alakalı içerikler içerdiğinde en iyi sonucu verir. Bir içerik, kullanıcıyı bant dışında etkilemiyorsa banta yerleştirilmesi performansını artırmaz. Bant kullanmanız gerekiyorsa içeriğe öncelik verin ve her bir slaytın, kullanıcının sonraki slaytı tıklamak isteyeceği kadar alakalı olduğundan emin olun.