Bu sayfa, Cloud Translation API ile çevrilmiştir.

Bantlar için en iyi uygulamalar

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

Katie Hempenius

Bant, içeriği slayt gösterisi gibi gösteren bir kullanıcı deneyimi bileşenidir. Bantlar "otomatik oynatılabilir" veya kullanıcılar tarafından manuel olarak gezinilebilir. Bantlar başka yerlerde de kullanılabilir ancak 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ı 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österilmelerinden bağımsız olarak 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 koşullarına sahiptir ve bu nedenle sayfanın duyarlılığını etkilemez. Sitenizin bantında uzun süre çalışan komut dosyaları olduğunu fark ederseniz bant araçlarınızı değiştirmeyi düşünmelisiniz.
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 tür CLS genellikle insan gözüne görünmez. Bu da sorunun göz ardı edilmesini kolaylaştırı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.

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 slaytı statik olarak yükleyip ardından gezinme kontrolleri ve ek içerik içerecek şekilde kademeli 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 özelliklerden bazılarına örnek olarak left, top, width ve marginTop verilebilir. Düzen kaymalarını önlemek için bu öğelerin geçişini yapmak ü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 ruloları: Slayt geçişleri, ruloyla 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 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 başlıklı makaleyi inceleyin.

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 ScrollSnap API'si, yalnızca HTML ve CSS kullanarak bant benzeri geçişler uygulamanızı sağlar.

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

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çme, resim CDN'si kullanma ve birden fazla resim sürümü yayınlamak için srcset kullanma, resimlerin aktarım boyutunu azaltabilecek tekniklerden bazılarıdır.

Performans ölçümü

Bu bölümde, bantlarla ilgili LCP ölçümü ele alınmaktadır. Bantlar, LCP hesaplaması sırasında diğer kullanıcı deneyimi öğelerinden farklı şekilde ele alınmasa da otomatik oynatılan bantlar için LCP'yi hesaplama mekanizması, kafa karışıklığına yol açan yaygın bir konudur.

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österiyorsa ancak ekran boyutundan daha küçük olan farklı öz boyutlara sahip resimler içeriyorsa yeni slaytlar görüntülenirken 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 bir banttaki tüm öğelerin aynı doğal 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 her gösterildiğinde önceki öğenin kaldırılması LCP güncellemesini tetikliyordu. 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, resim yüklemenin kullanıcı tarafından fark edilme olasılığının daha düşük olduğu ancak daha fazla indirme işleminin yapıldığı 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 göz önünde bulundurmanız gereken kullanıcı deneyimi ve ürünle ilgili en iyi uygulamalar ele alınmaktadır. Bantlar, işletme hedeflerinize ulaşmanıza yardımcı olmalı ve içeriği gezinmesi ve okunması kolay bir şekilde sunmalıdır.

Gezinmeyle ilgili en iyi uygulamalar

Belirgin gezinme kontrolleri sağlayın

Bant gezinme kontrolleri kolayca tıklanabilir ve çok görünür olmalıdır. Bu, nadiren iyi şekilde yapılan bir şeydir. Çoğu bantta hem küçük hem de belirsiz gezinme kontrolleri bulunur. Gezinme kontrolü için tek bir renk veya stilin tüm durumlarda 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 slaytlar arasındaki ilerleme durumu hakkında bilgi vermelidir. 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. Banttaki içerik ö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, slayt gezinmesi, gezinme kontrolleri aracılığıyla kullanıcı tarafından yönlendirilmelidir. 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

Atlı karınca metin içeriği, genellikle HTML işaretleme kullanılarak ayrı olarak görüntülenmek yerine ilgili resim dosyasına "yerleştirilir". 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

Kullanıcıların dikkatini çekmek için yalnızca bir saniyeniz vardır. 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üğü adı verilir.
Bantlar genellikle birden fazla departmanı memnun etmek ve işletme öncelikleri hakkında karar vermekten kaçınmak için kullanılır. Bu nedenle bantlar, etkisiz içeriklerin kolayca biriktiği bir yer haline gelebilir.

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.