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örüntüleyen bir kullanıcı deneyimi bileşenidir. Rulolar "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 promosyon göstermek için kullanılır.

Bu makalede, bantlar için performans ve kullanıcı deneyimiyle ilgili en iyi uygulamalar açıklanmaktadır.

Performans

İyi uygulanan bir bant, tek başına performans üzerindeki etkisi çok az olmalı veya hiç olmamalıdır. Bununla birlikte, bantlar genellikle büyük medya öğeleri içerir. Büyük öğeler, bir bantta veya başka bir yerde gösterilmelerinden bağımsız olarak performansı etkileyebilir.

• LCP (Largest Contentful Paint)

  Ekranın üst kısmındaki büyük bantlar genellikle sayfanın LCP öğesini içerir ve dolayısıyla LCP üzerinde önemli bir etkisi olabilir. Bu senaryolarda bandın optimize edilmesi LCP'yi önemli ölçüde iyileştirebilir. LCP ölçümünün bant içeren sayfalarda nasıl çalıştığına dair ayrıntılı açıklama için bantlar için LCP ölçümü bölümüne bakın.

• INP (Sonraki boyamayla etkileşim)

  Bantlar minimum JavaScript gereksinimine sahiptir ve bu nedenle sayfa duyarlılığını etkilememelidir. Site bandında uzun süreli komut dosyaları olduğunu fark ederseniz bant araçlarınızı değiştirmeyi düşünmelisiniz.

• CLS (Cumulative Layout Shift)

  Çok sayıda bant, CLS'ye katkı sağlayabilecek kötü ve birleştirilmemiş animasyonlar kullanır. Bu durum, otomatik oynatılan bantlara sahip sayfalarda sonsuz CLS'ye neden olabilir. Bu CLS türü genellikle insan gözünden fark edilmez, bu da sorunun gözden kaçmasını kolaylaştırır. Bu sorunu önlemek için bantınızda (örneğin, 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ğinin, tarayıcı tarafından sayfa yükleme işleminin başlarında bulunabilmesi için sayfanın HTML işaretlemesi aracılığıyla yüklenmesi gerekir. Bant içeriğinin yüklenmesini başlatmak için JavaScript kullanmak, muhtemelen bantları kullanırken kaçınılması gereken en büyük performans hatasıdır. Bu durum, görüntülerin yüklenmesini geciktirir ve LCP'yi olumsuz yönde etkileyebilir.

Yapılması gerekenler

<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>

Yapılmaması gerekenler

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 slaydı statik olarak yüklemeyi, ardından gezinme denetimlerini ve ek içerikleri içerecek şekilde kademeli olarak iyileştirmeyi değerlendirin. Bu teknik en çok kullanıcının uzun süre dikkatinin çektiği ortamlar için geçerlidir. Bu, içeriğin yüklenmesi için daha fazla zaman yaratır. Kullanıcıların yalnızca bir iki saniye tutabildikleri ana sayfalar gibi ortamlarda yalnızca tek bir resmin yüklenmesi de benzer şekilde etkili olabilir.

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

Not: Chrome 88-90 sürümü, düzen kaymalarının hesaplanma şekliyle ilgili çeşitli hata düzeltmeleri sağlamıştır. Bu hata düzeltmelerinin çoğu bantlarla ilgilidir. Bu düzeltmelerin bir sonucu olarak siteler, Chrome'un sonraki sürümlerinde bantla ilgili daha düşük düzen değişikliği puanları görmeyi beklemelidir.

Bantlardaki düzen değişikliklerinin en yaygın iki kaynağı, slayt geçişleri ve gezinme kontrolleridir:

• Slayt geçişleri: Slayt geçişleri sırasında oluşan düzen kaymaları, genellikle DOM öğelerinin düzene neden olan özelliklerinin güncellenmesinden kaynaklanır. Bu özelliklerden bazılarına örnek olarak şunlar verilebilir: left, top, width ve marginTop. Düzen kaymalarını önlemek amacıyla, bu öğelerin geçişini yapmak için CSS transform özelliğini kullanın. Bu demoda, temel bir bant oluşturmak için transform öğesinin nasıl kullanılacağı gösterilmektedir.

• Gezinme denetimleri: Bant gezinme denetimlerinin DOM'ye taşınması veya eklenmesi/kaldırılması, bu değişikliklerin uygulanma şekline bağlı olarak düzen kaymalarına neden olabilir. Bu davranışı gösteren bantlar, genellikle bunu kullanıcının üzerine geldiğinde yaptığında yapar.

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

• Otomatik oynatılan bantlar: Slayt geçişleri, bantla ilgili düzen kaymalarının en yaygın kaynağıdır. Otomatik oynatılmayan bir bantta bu düzen kaymaları genellikle kullanıcı etkileşiminden sonra 500 ms içinde meydana gelir ve bu nedenle Cumulative Layout Shift (CLS) değerine doğru sayılmaz. Bununla birlikte, otomatik oynatma bantlarında, bu düzen kaymaları potansiyel olarak CLS'ye doğru sayılmasıyla kalmaz, aynı zamanda süresiz olarak tekrarlanabilir. Dolayısıyla, bir otomatik oynatma bandının düzen değişikliklerinin kaynağı olmadığını doğrulamak özellikle önemlidir.

• Kaydırma: Bazı bantlar, kullanıcıların bant slaytlar arasında gezinmek için kaydırma işlevini kullanmalarına olanak tanır. Bir öğenin başlangıç konumu değişirse ancak kaydırma ofseti (yani scrollLeft veya scrollTop) aynı miktarda (ancak ters yönde) değişirse bu, aynı çerçeve içinde gerçekleştiği sürece 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 kullanın

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 genellikle daha verimli API'ler kullanır ve jQuery gibi ek bağımlılıklar gerektirme olasılıkları daha düşüktür.

Ancak, oluşturduğunuz bandın 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 atlı karınca benzeri geçişler uygulanmasını mümkün kılar.

scroll-snap kullanımıyla ilgili yararlı bulabileceğiniz bazı kaynaklar:

• Hikayeler bileşeni oluşturma (web.dev)
• Yeni nesil web stili: ekran kaydırma hareketi (web.dev)
• Yalnızca CSS Bant (CSS İpuçları)
• Yalnızca CSS'ye Özel Bant Oluşturma (CSS İpuçları)

Bant içeriğini optimize edin

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

Performans ölçümü

Bu bölümde, bantlarla ilgili olarak LCP ölçümü açıklanmaktadır. Bantlar, LCP hesaplaması sırasında diğer UX öğelerinden farklı şekilde ele alınmasa da, otomatik oynatılan bantlar için LCP'yi hesaplama mekanizması yaygın olarak görülen bir karışıklık noktasıdır.

Atlı karıncalar için LCP ölçümü

Bantlar için LCP hesaplamasının nasıl çalıştığını anlamaya yönelik temel noktalar şunlardır:

• LCP, sayfa öğelerini çerçeveye boyadıklarında dikkate alır. Kullanıcı sayfayla etkileşimde bulunduğunda (dokunma, kaydırma veya tuşa basma) artık LCP öğesi için yeni adaylar dikkate alınmaz. Bu nedenle, otomatik oynatılan banttaki herhangi bir slaytın son LCP öğesi olma potansiyeli vardır. Statik bantta ise yalnızca ilk slayt potansiyel bir LCP adayı olabilir.
• Eşit boyutta iki resim oluşturulursa ilk resim, LCP öğesi olarak kabul edilir. LCP öğesi yalnızca LCP adayı mevcut LCP öğesinden büyük olduğunda güncellenir. Bu nedenle, tüm bant öğeleri eşit boyuttaysa LCP öğesi, görüntülenen ilk resim olmalıdır.
• LCP adaylarını değerlendirirken LCP, "görünür boyutu veya içsel boyutu (hangisi daha küçükse) dikkate alır. Bu nedenle, otomatik oynatılan bir bant, resimleri tutarlı bir boyutta gösterir ancak görüntü boyutundan daha küçük olan, değişen gerçek içi boyutlara sahip resimler içeriyorsa yeni slaytlar gösterilirken LCP öğesi 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ı içsel 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, DOM'den daha sonra kaldırılan resimler potansiyel en büyük zengin içerikli boyamalar olarak kabul edilmektedir. Chrome 88'den önce bu resimler dikkate alınmamıştır. Otomatik oynatılan bantları kullanan siteler için bu tanım değişikliği, LCP puanları üzerinde nötr veya olumlu bir etkiye sahip olacaktır.

Bu değişiklik, birçok sitenin daha önce gösterilen resmi DOM ağacından kaldırarak bant geçişleri uyguladığı gözlemlenmesine yanıt olarak yapılmıştır. Chrome 88'den önce, her yeni slayt sunulduğunda önceki öğenin kaldırılması bir LCP güncellemesini tetikliyordu. Bu değişiklik yalnızca otomatik oynatılan bantları, tanım gereği etkiler. Olası en büyük zengin içerikli boyamalar yalnızca kullanıcı sayfayla ilk kez etkileşimde bulunmadan önce gerçekleşebilir.

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

Chrome 121, bant gibi yatay kaydırma yapan resimlerin davranışını değiştirdi. Bunlar artık dikey kaydırma ile aynı eşikleri kullanmaktadır. Bu, bant kullanım alanında resimlerin görüntü alanında görünmeden önce yükleneceği anlamına gelir. Bu durum, yüklenen resmin kullanıcı tarafından fark edilme olasılığının daha düşük olduğu, ancak daha fazla indirme pahasına olacağı anlamına gelir. Chrome ile Safari ve Firefox'un davranışını karşılaştırmak için Yatay Geç 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ünle ilgili en iyi uygulamalar ele alınmaktadır. Bantlar işletme hedeflerinizi geliştirmeli, içeriği gezinmesi ve okuması kolay bir şekilde sunmalıdır.

Gezinmeyle ilgili en iyi uygulamalar

Belirgin gezinme kontrolleri sağlayın

Bant gezinme denetimleri kolayca tıklanabilir ve kolayca görülebilir olmalıdır. Bu, nadiren yapılan bir şeydir. Çoğu bantta hem küçük hem de kolay anlaşılır gezinme kontrolleri bulunur. Tek bir renk veya gezinme denetimi tarzının tüm koşullarda nadiren çalışacağı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.

Gezinmenin ilerleme durumunu belirtir

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 önceden görüntülendiğini anlamasını kolaylaştırır. Bazı durumlarda, sonraki slayttan bir alıntı veya küçük resim listesi gibi, yakında çıkacak içeriklerin önizlemesini sunmak da yararlı olabilir ve etkileşimi artırabilir.

Mobil hareketleri destekle

Mobil cihazlarda, kaydırma hareketlerinin geleneksel gezinme denetimlerine (ekrandaki düğmeler gibi) ek olarak desteklenmesi gerekir.

Alternatif gezinme yolları sağlama

Çoğu kullanıcının tüm bant içeriğiyle etkileşime girme olasılığı düşük olduğundan, bant slaytların bağlantı verdiği içeriğe diğer gezinme yollarından erişilebilmelidir.

Okunabilirlikle ilgili en iyi uygulamalar

Otomatik oynatmayı kullanma

Otomatik oynatmanın kullanılması neredeyse paradoksal iki soruna neden olur: Ekrandaki animasyonlar kullanıcıların dikkatini dağıtıp gözleri daha önemli içeriklerden uzaklaştırma eğilimindedir. Aynı zamanda, kullanıcılar animasyonları sıklıkla reklamlarla ilişkilendirdikleri için otomatik oynatılan bantları yok sayarlar.

Bu nedenle, otomatik oynatma nadiren iyi bir seçimdir. İçerik önemliyse otomatik oynatmanın kullanılmaması görünürlüğünü en üst düzeye çıkarır; bant içeriği önemli değilse otomatik oynatmanın kullanılması daha önemli içerikleri azaltır. Ayrıca, otomatik oynatılan bantların okunması zor (ve aynı zamanda da rahatsız edici) olabilir. Kullanıcılar okumayı farklı hızlarda okur. Bu nedenle, bantların farklı kullanıcılar için tutarlı şekilde "doğru" zamanda geçiş yapması nadir görülen bir durumdur.

İdeal olarak, slaytlı gezinmenin gezinme kontrolleri aracılığıyla kullanıcılara yönlendirilmesi gerekir. Otomatik oynatmayı kullanmanız gerekiyorsa kullanıcı fareyle üzerine gelindiğinde otomatik oynatma devre dışı bırakılmalıdır. Buna ek olarak, slayt geçiş hızında slayt içeriğini dikkate almalısınız. Slayt ne kadar metin içerirse ekranda o kadar uzun süre görüntülenmelidir.

Metin ve resimleri ayrı tutun

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 yer alır". Bu yaklaşım erişilebilirlik, yerelleştirme ve sıkıştırma hızları açısından kötüdür. Ayrıca, öğe oluşturma konusunda herkese uyan tek bir yaklaşımı teşvik eder. Ancak, aynı resim ve metin biçimlendirmesi, masaüstü ve mobil biçimler arasında nadiren eşit derecede okunabiliyor.

Başlığı kısa ve öz tutun

Kullanıcıların dikkatini çekmek için yalnızca bir saniyeden kısa bir süreniz vardır. Kısa ve öz metinler, mesajınızın ulaşma olasılığını artırır.

Ürün en iyi uygulamaları

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

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

• Bantlar, özellikle tanıtım veya otomatik olarak ilerleme içeriyorsa kullanıcıların reklamları için kolayca hatalı olur. Kullanıcılar reklamları göz ardı etme eğilimindedir. Bu, banner körlüğü olarak bilinen bir olgudur.
• Bantlar genellikle birden fazla departmanı yerleştirmek ve iş öncelikleri hakkında karar vermekten kaçınmak için kullanılır. Sonuç olarak bantlar, etkisiz içerik için kolayca bir döküm alanına dönüşebilir.

Varsayımlarınızı test etme

Bantların, özellikle de ana sayfalardaki reklamların işletme üzerindeki etkisi değerlendirilmeli ve test edilmelidir. Bant tıklama oranları, bir bantın ve içeriğinin etkili olup olmadığını belirlemenize yardımcı olabilir.

Alakalı olun

Bantlar, net bir bağlamla sunulan ilginç ve alakalı içerikler barındırdığında en iyi sonucu verir. İçerik, kullanıcıyla bant dışında etkileşimde bulunmuyorsa bant içine yerleştirmek içeriğin daha iyi performans göstermesini sağlamaz. Bant kullanmanız gerekiyorsa, içeriğe öncelik verin ve her slaytın, kullanıcının tıklayarak bir sonraki slayta geçmek isteyebilecek kadar alakalı olduğundan emin olun.