Bantlar için en iyi uygulamalar

Bantları performans ve kullanılabilirlik için optimize edin.

Katie Hempenius

Bant, içeriği slayt gösterisine benzer şekilde gösteren bir kullanıcı deneyimi bileşenidir. Rulolar "otomatik oynatılabilir" veya kullanıcılar tarafından manuel olarak gezilebilir. Rulolar başka yerlerde de kullanılabilse de çoğunlukla görselleri, ve promosyonlar hakkında daha fazla bilgi sahibi olmanızı sağlar.

Bu makalede, bantların performans ve kullanıcı deneyimiyle ilgili en iyi uygulamaları anlatılmaktadır.

Performans

İyi tasarlanmış bir bant, tek başına çok minimum düzeyde olmalı veya hiç olmamalıdır. performans üzerindeki etkisidir. Ancak bantlar genellikle büyük medya öğeleri içerir. Büyük öğeler, gösterildiklerinden bağımsız olarak performansı etkileyebilir. bant veya başka bir yerde

• LCP (Largest Contentful Paint)

  Ekranın üst kısmındaki büyük bantlar genellikle sayfanın LCP öğesini içerir ve bu nedenle LCP üzerinde önemli bir etkisi olabilir. Bu senaryolarda bandın optimize edilmesi LCP'yi önemli ölçüde artırabilir. Derinlemesine bantlar içeren sayfalarda LCP ölçümünün nasıl işlediğine dair açıklama Bantlar için LCP ölçümü belgesine bakın bölümüne bakın.

• INP (Sonraki Boyamayla Etkileşim)

  Ruloların JavaScript gereksinimleri minimum düzeyde olduğundan, bantların ve sayfanın duyarlılığını etkiler. Sitenizin bandında komut dosyalarını uzun süredir kullanıyorsanız bant araçlarınızı değiştirmeyi düşünmelisiniz.

• CLS (Cumulative Layout Shift)

  Şaşırtıcı sayıda bant, reklamı yapılan öğelerin CLS'ye katkıda bulunabilir. Otomatik oynatılan bantların bulunduğu sayfalarda sonsuz CLS'ye neden olma potansiyeline sahiptir. Bu tür CLS genellikle bu nedenle sorunu kolayca gözden kaçırabilirler. Bunu önlemek için birleştirilmemiş animasyonlar kullanmaktan kaçının. bandında (örneğin, slayt geçişleri sırasında).

Performansla ilgili en iyi uygulamalar

Bant içeriğini HTML kullanarak yükleme

Bant içeriği, sayfanın HTML işaretlemesi aracılığıyla yüklenmelidir. sayfa yükleme sürecinin başlarında tarayıcı tarafından bulunabilir. JavaScript'i kullanarak Bant içeriğinin yüklenmesini başlatmak büyük olasılıkla en büyük kaçınılması gereken performans hatası. Bu durum, resmin yüklenmesini geciktirir ve LCP'yi olumsuz 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, ardından gezinme kontrolleri ve ek özellikler içerecek şekilde kademeli olarak içerik. Bu teknik en çok, bir veya daha fazla dikkati uzun süre boyunca korur. Bu sayede, ek içeriğin yüklenmesi için daha uzun süre tanınır. İçinde Kullanıcıların yalnızca bir süre veya bir süre sitede kalabildiği ana sayfalar gibi 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 denetimleri en yaygın iki kaynaktır: bantlardaki düzen kaymaları:

• Slayt geçişleri: Slayt geçişleri sırasında gerçekleşen düzen kaymaları genellikle DOM öğelerinin düzeni sağlayan özelliklerinin güncellenmesinden kaynaklanır. Bu özelliklerden bazılarına örnek olarak şunlar verilebilir: left, top, width ve marginTop. Düzen kaymalarını önlemek için bunun yerine CSS kullanın transform özelliğini kullanabilirsiniz. Bu demo, şu işlemler için transform hizmetinin nasıl kullanılacağını gösterir: atlı karınca oluşturmaktır.

• Gezinme denetimleri: Bant gezinme menüsünü taşıma veya ekleme/kaldırma denetimlerinin nasıl değişiklik gösterdiğine bağlı olarak düzen kaymalarına neden olabilir emin olabilirsiniz. Bu davranışı gösteren bantlar genellikle bunu kullanıcı fareyle üzerine gelindiğinde yanıt alın.

Aşağıda, Müşteri Kimlik Bilgileri için CLS ölçümüyle ilgili sık karşılaşılan kafa karışıklıklarının bir kısmı verilmiştir: bantlar:

• Otomatik oynatma bantları: Slayt geçişleri, atlı karıncayla ilgili düzen kaymaları. Otomatik oynatılmayan bir bantta bu düzen kaymaları genellikle kullanıcı etkileşiminden sonraki 500 ms. içinde gerçekleşir ve bu nedenle Cumulative Layout Shift'e doğru (CLS) ile iletişime geçin. Ancak, otomatik oynatma ruloları için bu düzen kaymalarının CLS'ye ayarlanır, ancak süresiz olarak tekrarlanabilir. Dolayısıyla, özellikle Otomatik oynatma bandının bir düzen kaynağı olmadığının doğrulanması önemlidir. olur.

• Kaydırma: Bazı bantlar, kullanıcıların gezinmek için kaydırma çubuğunu kullanmasına olanak tanır. bant slaytları vardır. Bir öğenin başlangıç konumu değişir ancak kaydırma ofseti (yani, scrollLeft veya scrollTop) aynı oranda (ancak zıt yönde) değişirse, aynı çerçevede olmaları koşuluyla bir düzen kayması olarak kabul edilir.

Düzen kaymaları hakkında daha fazla bilgi için bkz. Düzen hatalarını ayıklama vardiyalar.

Modern teknolojiyi kullanın

Birçok site aşağıdaki işlemler için üçüncü taraf JavaScript kitaplıklarını kullanır: bantları uygulayabilirsiniz. Şu anda eski bant araçlarını kullanıyorsanız performansı iyileştirebilecek yeni bir araç var. Yeni araçlar genellikle Daha verimli API'ler kullanır ve ek bağımlılık gerektirme olasılığı daha düşüktür kullanabilirsiniz.

Ancak, oluşturduğunuz bant türüne bağlı olarak JavaScript'ten yararlanmamalısınız. Yeni Kaydırma Snap API'si yalnızca HTML ve etiketler kullanarak bant benzeri geçişlerin uygulanmasını mümkün kılar CSS'ye dokunun.

scroll-snap kullanımıyla ilgili yararlı bulabileceğiniz bazı kaynaklar aşağıda verilmiştir:

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

Bant içeriğini optimize edin

Rulolar genellikle bir sitenin en büyük resimlerinin bir kısmını içerir. Bu nedenle, bu resimlerin tamamen optimize edildiğinden emin olun. Doğru kitleyi resim CDN kullanarak resim biçimi ve sıkıştırma düzeyi ve birden fazla resim sunmak için srcset'i kullanma sürümleri ve görsellerin aktarım boyutunu azaltabilecek tüm tekniklere dahildir.

Performans ölçümü

Bu bölümde, bantlarla ilgili olarak LCP ölçümü anlatılmaktadır. Her ne kadar bantlar, LCP sırasında diğer kullanıcı deneyimi öğelerinden farklı şekilde ele alınmaz otomatik oynatılan bantlar için LCP hesaplama mekanizması, en yaygın karışıklık noktası.

Bantlar için LCP ölçümü

LCP hesaplamasının bantlarda nasıl işlediğini anlamanızı sağlayacak önemli noktalar şunlardır:

• LCP, çerçeveye boyanırken sayfa öğelerini dikkate alır. Yeni adaylar kullanıcı etkileşim kurduğunda (dokunarak, veya tuşlara basar). Bu nedenle, otomatik oynatmadaki herhangi bir slayt bandında ise son LCP öğesi olma potansiyeline sahiptir. yalnızca ilk slayt potansiyel LCP adayı olabilir.
• Eşit boyutta iki resim oluşturulursa ilk resim kabul edilir LCP öğesine dokunun. LCP öğesi yalnızca LCP adayı şu koşullarda güncellenir: daha büyüktür. Bu nedenle, tüm bant öğeleri LCP öğesi, gösterilen ilk resim olmalıdır.
• LCP, LCP adaylarını değerlendirirken "görünür boyutu veya içsel boyut; hangisi daha küçükse." Dolayısıyla, bir otomatik oynatma bandı, resimleri tutarlı bir boyutta görüntüler ancak doğal unsurlardan farklı boyutlar LCP öğesi, yeni ekran boyutundan daha küçükse slaytlar gösteriliyor. Bu durumda, tüm resimler aynı en büyük içsel boyuta sahip resim LCP olarak kabul edilir öğesine dokunun. LCP'yi düşük tutmak için otomatik oynatmadaki tüm öğelerin bant aynı içsel boyuttadır.

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

Chrome itibariyle 88, daha sonra DOM'den kaldırılan resimler , potansiyel olarak en büyük resim olarak kabul edilir pek çok farklı araç bulunur. Chrome 88'den önce bu resimler şuralardan hariç tutuluyor: üzerinde düşünülmesini sağlar. Otomatik oynatılan bantlar kullanan siteler için bu tanım değişikliği LCP puanları üzerinde nötr veya olumlu bir etkisi olur.

Bu değişiklik, gözlem birçok sitenin bant geçişlerini uyguladığından emin olun. gösterilen resmi kullanabilirsiniz. Chrome 88'den önce, yeni bir sürüm bir önceki öğenin kaldırılması bir LCP'yi tetikleyecektir. güncelleyin. Bu değişiklik yalnızca tanımına göre otomatik oynatılan bantları etkiler. en büyük zengin içerikli boyamalar yalnızca bir kullanıcı sayfasını ziyaret edin.

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

Chrome 121, rulolar gibi yatay kaydırma resimlerin davranışını değiştirdi. Bunlarda artık dikey kaydırma ile aynı eşikler kullanılmaktadır. Bu, bant kullanım alanında resimlerin görüntü 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 ile Safari ve Firefox'taki davranışları karşılaştırmak için Yatay Geç Yükleme demosunu kullanın.

Dikkat edilmesi gereken diğer noktalar

Bu bölümde, kullanıcı deneyimi ve ürünle ilgili olarak dikkat etmeniz gereken en iyi uygulamalar ele alınmaktadır aklınızdan çıkarmayın. Bantlar, işletme hedeflerinizi ilerletmelidir ve içeriği gezinmesi ve okunması kolay bir şekilde sunmalısınız.

Navigasyonla ilgili en iyi uygulamalar

Göze çarpan gezinme kontrolleri sağlayın

Atlı karınca gezinme denetimleri, kolayca tıklanabilir ve kolayca görülebilir olmalıdır. Bu nadiren yapılan bir şeydir; çoğu ruloda, otomatik olarak hem küçük hem de fark edilebilir öğelerdir. Tek bir rengin veya tarzın gezinme denetimi her durumda nadiren çalışır. Örneğin bir ok arka planda açıkça görülebilen bir resim görüntüsü görmek zor olabilir. arka planda oynatın.

Navigasyonun ilerleme durumunu göster

Bant gezinme denetimleri, her bir öğenin toplam sayısı hakkında kullanıcının ilerleme durumunu özetler. Bu bilgiler, kullanıcının belirli bir slayta gitmesini ve hangi içeriğin zaten görüntülendi. Bazı durumlarda, üst düzey bir sonraki slayttan alıntı veya küçük resimler listesi olabilir. yardımcı olabilir ve etkileşimi artırabilirsiniz.

Mobil hareketleri destekleme

Mobil cihazlarda, hızlıca kaydırma hareketlerinin yanı sıra (ekrandaki düğmeler gibi).

Alternatif gezinme yolları sağlama

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

Okunabilirlikle ilgili en iyi uygulamalar

Otomatik oynatmayı kullanma

Otomatik oynatma, neredeyse paradoksal iki soruna neden oluyor: ekranda animasyonlar kullanıcıların dikkatini dağıtarak dikkatlerini daha önemli sayfalardan uzaklaştırır içerik; Çünkü kullanıcılar genellikle animasyonları reklamlarla ilişkilendirdikleri için, otomatik oynatılan bantları yoksayar.

Bu nedenle, otomatik oynatmanın iyi bir seçim olması nadir görülen bir durumdur. İçerik önemliyse otomatik oynatmanın kullanılması, reklamın karşılaşma oranını en üst düzeye çıkarır; bant içeriği önemli değilse otomatik oynatmanın kullanımı, daha önemli içeriklerin etkisini azaltır. Ayrıca, Otomatik oynatılan bantların okunması zor (ve ayrıca can sıkıcı) olabiliyor. Kişiler okudu hızlarda değişiklik olduğundan, bir atlı karıncanın tutarlı bir şekilde "sağ" kullanıcılara zaman ayırabilir.

İdeal olarak, slaytta gezinme, gezinme denetimleri aracılığıyla kullanıcılara yönelik olmalıdır. Eğer otomatik oynatma, 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 hesaba katmalıdır (ne kadar fazla metin olursa) slaytın ekranda gösterileceği süre o kadar uzun olur.

Metin ve resimleri ayrı tutun

Bant metin içeriği genellikle "hazırlanır" karşılık gelen resim dosyası . Bu yaklaşım erişilebilirlik, yerelleştirme ve sıkıştırma oranları. Aynı zamanda herkese uygun tek bir yaklaşım benimsiyor. Ancak aynı resim ve metin Biçimlendirme, masaüstü ve mobil biçimlerde nadiren eşit şekilde okunabilir.

Kısa ve öz olun

Yalnızca birkaç saniye içinde kullanıcıların dikkatini çekebilirsiniz. Kısa, kısa ve öz metinler, mesajınızın ulaşma olasılığını artırır.

Ürünlerle ilgili en iyi uygulamalar

Rulolar, yayın için ek dikey alan kullanıldığı durumlarda ek içerik göstermeye uygun değil. Ürün sayfalarındaki bantlar bu kullanım alanına iyi bir örnek.

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

• Bantlar, özellikle promosyon içeren veya otomatik olarak ilerliyorsa kolayca yanlış en iyi uygulamaları paylaşacağız. Kullanıcılar reklamları görmezden gelme eğilimindedir. banner olarak bilinir görme.
• Bantlar genellikle birden fazla departmanı yerleştirmek ve karar vermenize yardımcı olacaktır. Sonuç olarak, bantlar kolayca bir döküm zeminine atarız.

Varsayımlarınızı test etme

Bantların, özellikle de ana sayfalarda bulunanların ticari etkisi, test edilir. Bant tıklama oranları, bant içeriği etkilidir.

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

Bantlar, en iyi performansı gösteren alakalı ve alakalı içerik barındıran, bir bağlamda sunulur. İçerik, bandın içine yerleştirilmesi, daha iyi performans göstermesini sağlamaz. Gerekirse bant kullanın, içeriğin önceliğini belirleyin ve her slaytın yeterli miktarda olduğundan emin olun. yalnızca, kullanıcının tıklayarak sonraki slayta geçmesini