Cumulative Layout Shift (CLS), üç Önemli Web Verileri metriğinden biridir. Bu model, görüntü alanında ne kadar görünür içeriğin kaydığını, etkilenen öğelerin hareket ettiği mesafeyle birleştirerek içeriğin kararsızlığını ölçer.
Düzen kaymaları, kullanıcıların dikkatini dağıtabilir. Bir makaleyi okumaya başladığınızda, aniden bir şeyler sayfada yer değiştirdiğinde sizi yanıltıp yerinizi yeniden bulmak zorunda kaldığınızı hayal edin. Bu işlem, haberleri okurken veya "Ara" ya da "Alışveriş Sepetine Ekle" düğmelerini tıklamaya çalışmak dahil olmak üzere web'de çok sık karşılaşılan bir durumdur. Bu tür deneyimler görsel açıdan sarsıcı ve sinir bozucudur. Bunlar genellikle sayfaya aniden başka bir öğe eklendiğinde veya yeniden boyutlandırıldığında görünür öğeler taşınmaya zorlandığında ortaya çıkar.
İyi bir kullanıcı deneyimi sağlamak için sayfa ziyaretlerinin en az% 75'inde CLS'nin 0, 1 veya daha düşük olması gerekir.
Saniye veya milisaniye cinsinden ölçülen zamana dayalı değerler olan diğer Core Web Vitals'ın aksine CLS puanı, içeriğin ne kadar ve ne kadar değiştiğine dair hesaplamaya dayanan birimsiz bir değerdir.
Bu kılavuzda, düzen kaymalarının yaygın nedenlerini optimize etmeyi ele alacağız.
CLS'nin düşük olmasının en yaygın nedenleri şunlardır:
- Boyutu olmayan resimler.
- Boyutları olmayan reklamlar, yerleştirmeler ve iframe'ler.
- Reklamlar, yerleştirmeler ve iframe'ler gibi boyut olmadan dinamik olarak yerleştirilmiş içerikler.
- Web yazı tipleri.
Düzen kaymalarının nedenlerini anlama
Yaygın CLS sorunlarının çözümlerini incelemeye başlamadan önce CLS puanınızı ve bu değişikliklerin nereden geldiğini anlamanız önemlidir.
Laboratuvar araçlarında ve sahada CLS
Geliştiriciler genellikle Chrome Kullanıcı Deneyimi Raporu'nda (CrUX) ölçülen CLS'nin, Chrome Geliştirici Araçları veya diğer laboratuvar araçlarını kullanarak ölçtükleri CLS ile eşleşmediği için yanlış olduğunu düşünürler. Lighthouse gibi web performansı laboratuvarı araçları, bazı web performansı metriklerini ölçmek ve yol göstermek amacıyla genellikle sayfanın sadece basit bir kısmını yüklediklerinden sayfanın tam CLS'sini göstermeyebilir. Ancak Lighthouse kullanıcı akışları, varsayılan sayfa yükleme denetiminin ötesinde ölçüm yapmanıza olanak tanır).
CrUX, Web Verileri programının resmi veri kümesidir. CLS'yi yalnızca laboratuvar araçlarının genellikle ölçtüğü ilk sayfa yükleme sırasında değil, sayfanın tüm ömrü boyunca ölçer.
Düzen kaymaları, sayfa yükleme sırasında çok yaygındır. Bunun nedeni, sistemin sayfayı oluşturmak için gereken tüm kaynakları getirmesidir. Ancak düzen kaymaları, ilk yüklemeden sonra da gerçekleşebilir. Çoğu yükleme sonrası kayma, kullanıcı etkileşiminin sonucu olarak meydana gelir ve bu nedenle CLS puanına dahil edilmez. Söz konusu etkileşimden sonraki 500 milisaniye içinde gerçekleşenler, beklenen değişimler olarak sayılır.
Bununla birlikte, uygun etkileşimin olmadığı durumlarda (örneğin, kullanıcı sayfayı kaydırırken geç yüklenen içerik tam olarak yüklenirse) beklenmedik yükleme sonrası kaymalar dahil edilebilir. Yükleme sonrası CLS'nin diğer yaygın nedenleri, örneğin 500 milisaniyelik ek süreden daha uzun süren Tek Sayfalık Uygulamalar gibi geçişler arasındaki etkileşimlerden kaynaklanır.
PageSpeed Insights, hem "Gerçek kullanıcılarınızın nelerle karşılaştığını keşfedin" bölümünde bir URL'deki kullanıcı tarafından algılanan CLS'yi, "Performans sorunlarını teşhis edin" bölümünde ise laboratuvar tabanlı yük CLS'sini gösterir. Bu değerler arasındaki farklar muhtemelen yükleme sonrası CLS'den kaynaklanır.
Yük CLS sorunlarını tanımlama
PageSpeed Insights'ta CrUX ve Lighthouse CLS puanlarının benzer olması genellikle Lighthouse'un bir yükleme CLS sorunu algıladığı anlamına gelir. Bu durumda Lighthouse, daha fazla bilgi için iki denetim sağlayabilir: Genişlik ve yükseklik eksikliği nedeniyle CLS'ye neden olan resimler için, ikincisi ise CLS katkılarıyla birlikte sayfa yüklemesi sırasında değişen tüm öğeler için yapılır. Bu denetimleri görmek için aşağıdaki resimde gösterildiği gibi filtreleyin:
Geliştirici Araçları'ndaki Performans paneli, Deneyim bölümündeki düzen kaymalarını da vurgular. Layout Shift kaydının Özet görünümü, CLS puanını ve etkilenen bölgeleri gösteren dikdörtgen yer paylaşımı içerir. Yeniden yükleme performans profiliyle kullanıcı deneyimini tekrarlamanıza olanak tanıdığından, bunlar özellikle yük CLS sorunlarının tanımlanmasında yararlıdır.
Layout Shift kaydını gösteren kırmızı renkli bir çubukla doldurulur. Kaydı tıkladığınızda, bu resimdeki "taşındı" ve "taşındı" girişleri gibi ayrıntıları göstererek etkilenen öğeleri ayrıntılı olarak inceleyebilirsiniz.Yükleme sonrası CLS sorunlarını tanımlama
CrUX ve Lighthouse CLS puanları arasındaki uyuşmazlık genellikle yükleme sonrası CLS'yi gösterir. Bu kaymaları alan verileri olmadan takip etmek zor olabilir. Alan verilerinin toplanması hakkında daha fazla bilgi için Alandaki CLS öğelerini ölçme bölümüne bakın.
Web Verileri Chrome uzantısı, bir sayfayla etkileşimde bulunduğunuz sırada CLS'yi izlemek için uyarı ekranında veya konsolda kayan öğeler hakkındaki ayrıntılarla birlikte kullanılabilir.
Uzantıyı kullanmaya alternatif olarak, konsola yapıştırılan bir Performance Observer kullanarak düzen kaymalarını kaydederken web sayfanıza göz atabilirsiniz.
Vardiya izlemeyi ayarladıktan sonra, yükleme sonrası CLS sorunlarını yeniden oluşturmayı deneyebilirsiniz. CLS genellikle kullanıcı sayfayı kaydırırken, geç yüklenen içerik için ayrılmış alan olmadan tam olarak yüklendiğinde gerçekleşir. Kullanıcı işaretçiyi üzerinde tuttuğunda içeriğin kayması da yükleme sonrası CLS'nin sık karşılaşılan bir başka nedenidir. Bu etkileşimlerin herhangi biri sırasında herhangi bir içerik değişimi, 500 milisaniye içinde olsa bile beklenmedik olarak sayılır.
Daha fazla bilgi için Düzen kaymalarında hata ayıklama bölümüne bakın.
CLS'nin yaygın nedenlerini belirledikten sonra, düzen kaymalarının tipik kullanıcı akışlarını bozmaması için Lighthouse'un zaman aralıkları kullanıcı akış modunu da kullanabilirsiniz.
Sahadaki CLS öğelerini ölçün
Sahada CLS'yi takip etmek, CLS'nin hangi koşullarda gerçekleştiğini belirlemek ve olası nedenleri azaltmak açısından çok önemli olabilir. Çoğu laboratuvar aracında olduğu gibi, saha araçları da yalnızca yer değiştiren öğeleri ölçer ancak bu ölçümler genellikle sorunun nedenini belirlemek için yeterli bilgi sağlar. Düzeltilmesi gereken en öncelikli sorunları belirlemek için CLS alanı ölçümlerini de kullanabilirsiniz.
web-vitals kitaplığında bu ek bilgileri toplamanızı sağlayan ilişkilendirme işlevleri bulunur. Daha fazla bilgi için Sahadaki performansta hata ayıklama bölümüne bakın.
Diğer RUM sağlayıcıları da bu verileri benzer şekilde toplayıp sunmaya başladı.
CLS'nin yaygın nedenleri
Bu bölümde CLS'nin daha yaygın nedenlerinden bazıları ve bunları önleme stratejileri açıklanmaktadır.
Boyutu olmayan resimler
Resimlerinize ve video öğelerinize her zaman width ve height boyut özelliklerini ekleyin veya CSS aspect-ratio kullanarak gerekli alanı ayırın.
Bu, resim yüklenirken tarayıcının dokümanda doğru miktarda alanı ayırmasına olanak tanır.
width, height ve aspect-ratio
Web'in ilk günlerinde geliştiriciler, tarayıcı görselleri getirmeye başlamadan önce sayfada yeterli alan ayrıldığından emin olmak için <img> etiketlerine width ve height özelliklerini eklemiştir. Bu, yeniden düzenlemeyi ve yeniden düzenlemeyi en aza indirecektir.
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
Bu örnekteki width ve height birimleri birim içermez. Bu "piksel" boyutları, tarayıcının 640x360 boyutunda bir alan ayırmasını sağlar. Resim, gerçek boyutların eşleşip eşleşmediğinden bağımsız olarak bu alana sığacak şekilde uzatılır.
Duyarlı Web Tasarımı kullanıma sunulduğunda geliştiriciler, resimleri yeniden boyutlandırmak için width ve height yerine CSS kullanmaya başladılar:
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
Bununla birlikte, resim boyutu belirtilmediğinden, tarayıcı resmi indirmeye başlayıncaya ve resmin boyutlarını belirleyene kadar resim için alan ayrılamaz. Resimler yüklenirken metin, resimlere yer açmak için sayfadan aşağı kayar ve bu da kafa karıştırıcı ve can sıkıcı bir kullanıcı deneyimi oluşturur.
Resim boyutlarını ayarlamayla ilgili en iyi uygulama
Modern tarayıcılar resimlerin varsayılan en boy oranını resmin width ve height özelliklerine göre ayarladığından, bu özellikleri resimde ayarlayıp önceki CSS'yi stil sayfanıza ekleyerek düzen kaymalarını önleyebilirsiniz.
<!-- set a 16:9 aspect ratio as 640x360 pixels -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
Tarayıcı, daha sonra öğenin mevcut width ve height özelliklerine göre bir varsayılan en boy oranı ekler. Böylece, düzen hesaplamalarının başında resim için ne kadar alan ayrılacağını belirleyebilir.
Başlıca tarayıcılar, HTML işlenirken varsayılan en boy oranlarını hesapladığından, her tarayıcı, değeri biraz farklı görüntüler. (Bunun nedenleriyle ilgili ayrıntılar için Genişlik ve yükseklikle ilgili sunum ipuçları bölümüne bakın.)
Örneğin, Chrome Öğe panelinin Stiller bölümünde en boy oranlarını şu şekilde görüntüler:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
Safari de benzer şekilde, bir HTML Özellikleri stil kaynağı kullanarak davranır. Firefox, bu hesaplanan aspect-ratio öğesini İnceleyici panelinde hiç görüntülemez ancak düzen için kullanır.
Önceki kodun auto bölümü, resim indirildikten sonra resim boyutlarının varsayılan en boy oranını geçersiz kılmasına neden olduğu için önemlidir. Resim boyutları farklıysa bu durum resim yüklendikten sonra da bir miktar düzen kaymasına neden olur. Ancak bu, HTML'nin yanlış olması ihtimaline karşı resim en boy oranının daha rahat kullanılabilmesini sağlar. Gerçek en boy oranı varsayılandan farklı olsa bile boyut sağlanmamış bir resmin 0x0 varsayılan boyutundan daha az düzen kaymasına neden olur.
En boy oranları ve duyarlı resimlerin felsefesi konusunda ayrıntılı bilgi için Medya en boy oranlarıyla Jank içermeyen sayfa yükleme bölümüne bakın.
Resminiz bir kapsayıcıdaysa CSS'yi kullanarak resmi kapsayıcının genişliğine göre yeniden boyutlandırabilirsiniz. Resim yüksekliği için sabit bir değer kullanmaktan kaçınmak amacıyla height: auto; değerini ayarladık.
img {
height: auto;
width: 100%;
}
Peki ya duyarlı resimler?
Duyarlı resimlerle çalışırken,
srcset tarayıcının seçim yapmasına izin verdiğiniz resimleri ve her bir resim boyutunu
tanımlar. <img> genişlik ve yükseklik özelliklerinin ayarlanabildiğinden emin olmak
için her bir resimde aynı en boy oranını kullanın.
<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons"
/>
Resimlerinizin en boy oranları da sanat yönünüze bağlı olarak değişebilir. Örneğin, dar görüntü alanları için bir resmin kırpılmış çekimini eklemek ve resmin tamamını masaüstünde görüntülemek isteyebilirsiniz:
<picture>
<source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
<source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
<img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>
Chrome, Firefox ve Safari artık picture öğesinin source alt öğelerinde width ve height ayarlarını destekliyor:
<picture>
<source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width=480 height=400/>
<source media="(min-width: 800px)" srcset="puppy-800w.jpg" width=800 height=400/>
<img src="puppy-800w.jpg" alt="Puppy with balloons" width=800 height=400/>
</picture>
Reklamlar, yerleştirmeler ve geç yüklenen diğer içerikler
Resimler, düzen kaymasına neden olabilecek tek içerik türü değildir. Reklamlar, yerleştirmeler, iframe'ler ve dinamik olarak yerleştirilen diğer içeriklerin tümü, içeriğin onlarca aşağı kaydırılmasına ve dolayısıyla CLS'nizin artmasına yol açabilir.
Reklamlar, web'de düzen değişikliklerine en çok katkıda bulunan unsurlardan biridir. Reklam ağları ve yayıncılar genellikle dinamik reklam boyutlarını destekler ve büyük reklamlar genellikle küçük olanlardan daha fazla gelir sağlar. Ancak reklamların aniden yüklenmesi ve görünür içeriği sayfanın aşağısına itmesi kullanıcı deneyimi için kötüdür.
Yerleştirilebilir widget'lar, sayfanıza taşınabilir web içerikleri (ör. YouTube'daki videolar, Google Haritalar'dan haritalar ve sosyal medya yayınları) eklemenize olanak tanır. Ancak bu widget'lar genellikle yüklenmeden önce içeriklerinin ne kadar büyük olduğunun farkında değildir. Sonuç olarak, yerleştirmeler sunan platformlar widget'ları için her zaman alan ayırmaz ve bu da son olarak yüklendiklerinde düzen kaymalarına neden olur.
Bunlarla başa çıkma teknikleri benzerdir. En önemli farklar, eklenen içerik üzerinde ne kadar kontrolünüzün olduğudur. Reklam iş ortakları gibi üçüncü taraflar genellikle eklenen içerik hakkında yararlı bilgi veya bu yerleştirmelerin neden olduğu düzen kaymaları üzerinde herhangi bir kontrol sağlamaz.
Geç yüklenen içerikler için alan ayırın
Geç yüklenen içeriği içerik akışına yerleştirirken, ilk düzende bunlar için alan ayırarak düzen kaymalarını önleyebilirsiniz.
Bu, yer ayırmak için bir min-height stili eklemek veya reklamlar gibi duyarlı içerikler için yeni aspect-ratio CSS özelliğini, tarayıcılar için resimler için otomatik olarak kullanan tarayıcılara benzer bir şekilde kullanmak kadar basit olabilir.
Medya sorguları kullanarak form faktörlerindeki reklam veya yer tutucu boyutlarındaki küçük farkları hesaba katmanız gerekebilir.
Reklamlar gibi sabit bir yüksekliğe sahip olmayabilecek içeriklerde, düzen kaymasını tamamen ortadan kaldırmak için gereken tam alanı ayıramayabilirsiniz. Daha küçük bir reklam yayınlanırsa yayıncı, düzen kaymalarını önlemek için daha büyük bir kapsayıcının stilini belirleyebilir veya geçmiş verilere dayanarak reklam alanı için en olası boyutu seçebilir. Bu yaklaşımın olumsuz tarafı, sayfadaki boş alan miktarını artırmasıdır.
Bunun yerine, başlangıç boyutunu kullanılacak en küçük boyuta ayarlayabilir ve daha büyük içerikler için bir miktar kayma kabul edebilirsiniz. Daha önce önerildiği gibi min-height kullanılması, boş bir öğenin 0 piksel olan varsayılan boyutuna kıyasla üst öğenin gerektiği kadar büyümesine ve düzen kaymalarının etkisinin azaltılmasına olanak tanır.
Örneğin, hiçbir reklam döndürülmezse yer tutucu göstererek ayrılan alanı daraltmamaya çalışın. Öğeler için ayrılan alanın kaldırılması, CLS için içerik eklemeyle aynı etkiyi yaratabilir.
Geç yüklenen içerikleri görüntü alanının daha alt kısmına yerleştirin
Görüntü alanının üst kısmına daha yakın bir yere dinamik olarak yerleştirilen içerik, genellikle görüntü alanının daha alt kısmına yerleştirilen içeriğe göre daha fazla düzen kaymasına neden olur. Bununla birlikte, görüntü alanının herhangi bir yerine içerik eklenmesi yine de bir miktar kaymaya neden olur. Yerleştirilen içerik için alan ayıramıyorsanız etkisini azaltmak amacıyla bu içeriği sayfanın daha ileriki kısımlarına yerleştirmenizi öneririz.
Yer paylaşımlı banner içeriği
Bir sayfada beklenmedik bir şekilde görünen banner'lar ve formlar, beklenmedik düzen kaymalarının diğer bir yaygın nedenidir.
Bu tür içerikler için yer ayıramıyorsanız, belge akışının bir parçası olmaması için içeriği mevcut içeriğin üzerine yerleştirebilirsiniz. Bu yaklaşımın ne zaman kullanılacağına dair tavsiye için Çerez bildirimleri için en iyi uygulamalar bölümüne bakın.
Kullanıcı etkileşiminin beklenen düzen kaymalarını tetiklemesine izin ver
Bazı durumlarda içeriği dinamik olarak eklemek, kullanıcı deneyiminin önemli bir parçasıdır. Örneğin, bir öğe listesine daha fazla ürün yüklerken veya canlı feed içeriğini güncellerken bu durum değişmez. Böyle durumlarda, beklenmedik düzen kaymalarını önlemenin birkaç yolu vardır:
- Eski içeriği sabit boyutlu bir kapsayıcıda yeni içerikle değiştirin veya bir bant kullanın ve geçişten sonra eski içeriği kaldırın. Yeni içerik yüklenirken yanlışlıkla yapılan tıklamaları veya dokunmaları önlemek için geçiş tamamlanana kadar tüm bağlantı ve kontrolleri devre dışı bırakmayı unutmayın.
- Kullanıcının yeni içerik yüklemeyi başlatmasına izin verin. Örneğin, Daha fazla yükle veya Yenile Düğmesi ile, geçişin sürpriz olmasını önleyebilirsiniz. Hemen gösterilmesi için yeni içeriğin kullanıcı etkileşiminden önce önceden getirilmesini öneririz. Kullanıcı girişinden itibaren 500 milisaniye içindeki düzen kaymalarının CLS'de sayılmadığını hatırlatmak isteriz.
- İçeriği ekran dışında sorunsuz bir şekilde yükleyin ve kullanıcıya içeriğin kullanılabilir olduğuna dair bir bildirim yerleştirin (örneğin, En başa git düğmesiyle).
Animasyonlar
CSS özellik değerlerinde yapılan değişiklikler, tarayıcının bu değişikliklere tepki vermesini gerektirebilir. box-shadow ve box-sizing gibi bazı değerler yeniden düzenlemeyi, boyama ve kompozit düzenini tetikler. top ve left özelliklerinin değiştirilmesi, taşınmakta olan öğe kendi katmanında olsa bile düzen kaymasına da neden olur. Bu özellikleri kullanarak animasyon yapmaktan kaçının.
Diğer CSS özellikleri, yeniden düzenleri tetiklemeden değiştirilebilir. Örneğin, öğeleri çevirmek, ölçeklendirmek, döndürmek veya eğmek için transform animasyonlarının kullanılması.
translate kullanan birleştirilmiş animasyonlar diğer öğeleri etkileyemez, bu nedenle CLS'ye dahil edilmez. Birleştirilmemiş animasyonlar da yeniden düzene neden olmaz. Hangi CSS özelliklerinin düzen kaymalarını tetiklediği hakkında daha fazla bilgi edinmek için Yüksek performanslı animasyonlar bölümüne bakın.
Web yazı tipleri
Web yazı tiplerinin indirilmesi ve oluşturulması genellikle web yazı tipi indirilmeden önce iki şekilde gerçekleştirilir:
- Yedek yazı tipi, Stilsiz Metin Flash'ı (FOUT) kullanılarak web yazı tipiyle değiştirilir.
- "Görünmez" metin, bir web yazı tipi kullanılabilir olana ve metin, Görünmez Metin Flash'ı (FOIT) kullanılarak görünür hale gelinceye kadar yedek yazı tipi kullanılarak görüntülenir.
Her iki yaklaşım da düzen kaymalarına neden olabilir. Metin görünmez olsa bile, yedek yazı tipi kullanılarak yerleştirilir. Böylece, web yazı tipi yüklendiğinde, metin bloğu ve etrafındaki içerik, görünür yazı tipiyle aynı şekilde yer değiştirir.
Aşağıdaki araçlar, bu metin kaymasını en aza indirmenize yardımcı olabilir:
font-display: optional, web yazı tipinin yalnızca ilk düzen sırasında kullanılabiliyorsa kullanılmasına neden olur.- Web yazı tipine benzer yedek yazı tipleri kullanın. Örneğin,
font-family: "Google Sans", sans-serif;kullanıldığında tarayıcı"Google Sans"yüklenirkensans-serifyedek yazı tipini kullanır. Yedek yazı tipi belirtilmemesi (yalnızcafont-family: "Google Sans"kullanılarak), Chrome'un varsayılan serif yazı tipini kullanmasına neden olur. Bu, daha kötü bir eşleşmedir. - Yeni
size-adjust,ascent-override,descent-overrideveline-gap-overrideAPI'lerini kullanarak yedek yazı tipi ve web yazı tipi arasındaki boyut farklılıklarını en aza indirin. Ayrıntılar için İyileştirilmiş yedek yazı tipleri bölümüne bakın. - Font Upload API, yazı tipi yükleme süresini kısaltabilir.
<link rel=preload>kullanarak önemli web yazı tiplerini mümkün olan en kısa sürede yükleyin. Önceden yüklenmiş bir yazı tipinin ilk boyamaya hazır olma ve düzen kaymasına neden olma olasılığı daha yüksektir.
Daha fazla bilgi için Yazı tipleriyle ilgili en iyi uygulamalar konusuna bakın.
Sayfalarınızı bfcache için uygun hale getirin
CLS puanlarını düşük tutmak için çok etkili bir teknik, web sayfalarınızın geri-ileri önbelleğe (bfcache) uygun olmasını sağlamaktır.
Bfcache, siz çıktıktan sonra sayfaları kısa bir süre tarayıcının belleğinde tutar. Böylece, bu sayfalara geri döndüğünüzde tam olarak bıraktığınız gibi geri yüklenirler. Bu, tam olarak yüklenen sayfanın, sayfa yüklenirken meydana gelebilecek herhangi bir değişiklik olmadan anında kullanılabileceği anlamına gelir.
Bu durum, ilk sayfa yüklemesinde düzen kaymaları olduğu anlamına gelse de, kullanıcıların aynı düzen kaymalarını tekrar tekrar görmelerini önler. Bu, başka yollarla çözmekte sorun yaşamış olabileceğiniz düzen kaymalarının etkisini azaltır.
Geri ve ileri gezinme, içerik sayfasına, kategori sayfasına veya arama sonuçlarına dönme gibi birçok sitede yaygın olarak kullanılır.
Bfcache tüm tarayıcılar tarafından varsayılan olarak kullanılır ancak bazı siteler çeşitli nedenlerle bunun için uygun değildir. Bfcache kullanımını engelleyen sorunları nasıl test edeceğiniz ve tanımlayacağınız hakkında daha fazla ayrıntı için bfcache makalesine bakın.