Kullanıcı deneyimini iyileştirmek için ani düzen kaymalarından nasıl kaçınacağınızı öğrenin
Yayınlanma tarihi: 5 Mayıs 2020, Son güncelleme tarihi: 7 Şubat 2025
Cumulative Layout Shift (CLS), üç Core Web Vitals metriğinden biridir. Görünür içeriğin görüntü alanında ne kadar değiştiği ile etkilenen öğelerin ne kadar hareket ettiği birleştirilerek içeriğin kararsızlığı ölçülür.
Düzen kaymaları, kullanıcıların dikkatini dağıtabilir. Bir makaleyi okumaya başladığınızı düşünün. Ancak aniden öğeler sayfada yer değiştiriyor ve bu durum, okumanızı kesintiye uğratarak yerinizi tekrar bulmanızı gerektiriyor. Bu durum, haber okuma veya "Ara" ya da "Sepete Ekle" düğmelerini tıklamaya çalışma gibi web'de çok sık görülür. Bu tür deneyimler görsel olarak rahatsız edici ve sinir bozucudur. Bu sorunlar genellikle, sayfaya başka bir öğe aniden eklendiğinde veya bir öğenin boyutu değiştirildiğinde görünür öğelerin hareket etmeye zorlanmasından kaynaklanır.
İyi bir kullanıcı deneyimi sağlamak için siteler, sayfa ziyaretlerinin en az% 75'inde CLS değerinin 0,1 veya daha az olmasını sağlamalıdır.
Saniye veya milisaniye cinsinden ölçülen zamana dayalı değerler olan diğer Önemli Web Verilerinin aksine CLS puanı, içeriğin ne kadar ve ne kadar kaydığının hesaplanmasına dayalı birimsiz bir değerdir.
Bu kılavuzda, düzen kaymalarının yaygın nedenlerini optimize etme konusunu ele alacağız.
Kötü CLS'nin en yaygın nedenleri şunlardır:
- Boyut bilgisi olmayan resimler.
- Boyutsuz reklamlar, yerleştirmeler ve iframe'ler.
- Reklamlar, yerleştirmeler ve boyut içermeyen iFrame'ler gibi dinamik olarak yerleştirilen içerikler.
- Web yazı tipleri.
Düzen kaymalarının nedenlerini anlama
CLS ile ilgili yaygın sorunların çözümlerini incelemeye başlamadan önce CLS puanınızı ve kaymaların nereden kaynaklandığını anlamanız önemlidir.
Laboratuvar araçlarında ve sahada CLS
Geliştiricilerin, Chrome Kullanıcı Deneyimi Raporu (CrUX) tarafından ölçülen CLS'nin yanlış olduğunu düşünmesi yaygın bir durumdur. Bunun nedeni, bu değerin Chrome Geliştirici Araçları veya diğer laboratuvar araçlarıyla ölçtükleri CLS ile eşleşmemesidir. Lighthouse gibi web performansı laboratuvarı araçları, bazı web performansı metriklerini ölçmek ve bazı rehberlikler sağlamak için genellikle sayfanın temel yüklemesini yaptığından 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 Vitals programının Google veri kümesidir. Bu nedenle CLS, yalnızca laboratuvar araçlarının genellikle ölçtüğü ilk sayfa yükleme sırasında değil, sayfanın tüm kullanım ömrü boyunca ölçülür.
Sayfayı ilk kez oluşturmak için gerekli tüm kaynaklar getirildiğinden, sayfa yükleme sırasında düzen kaymaları çok yaygındır. Ancak düzen kaymaları, ilk yüklemeden sonra da gerçekleşebilir. Yükleme sonrası birçok kayma kullanıcı etkileşiminin sonucu olarak gerçekleşebilir. Bu nedenle, bu kaymalar etkileşimden sonraki 500 milisaniye içinde gerçekleştiği sürece beklenen kaymalar olarak CLS puanına dahil edilmez.
Ancak, kullanıcının beklemediği diğer yükleme sonrası kaymalar, uygun etkileşim olmamasına rağmen dahil edilebilir. Örneğin, sayfada daha fazla kaydırdığınızda geç yüklenen içerik yüklenir ve bu da kaymalara neden olur. Yükleme sonrası CLS'nin diğer yaygın nedenleri arasında, geçiş etkileşimleri (ör. tek sayfa uygulamalarında) yer alır. Bu etkileşimler, 500 milisaniyelik ek yayınlanma süresinden daha uzun sürer.
PageSpeed Insights, "Gerçek kullanıcılarınızın deneyimlerini keşfedin" bölümünde bir URL'den gelen kullanıcı tarafından algılanan CLS'yi, "Performans sorunlarını teşhis edin" bölümünde ise laboratuvar tabanlı yükleme CLS'sini gösterir. Bu değerler arasındaki farklar, yükleme sonrası CLS'den kaynaklanıyor olabilir.
Yükleme CLS sorunlarını belirleme
PageSpeed Insights'ın CrUX ve Lighthouse CLS puanları genel olarak uyumlu olduğunda bu durum genellikle Lighthouse tarafından tespit edilen bir yükleme CLS sorunu olduğunu gösterir. Bu durumda Lighthouse, genişlik ve yükseklik eksikliği nedeniyle CLS'ye neden olan resimler hakkında daha fazla bilgi sağlamak için iki denetimle yardımcı olur. Ayrıca, sayfa yüklenirken kayan tüm öğeleri CLS katkılarıyla birlikte listeler. CLS denetimlerini filtreleyerek bu denetimleri görebilirsiniz:
Geliştirici Araçları'ndaki Performans paneli, düzen kaymalarıyla ilgili zengin bilgiler sunar:
Layout Shift kümelerini gösteren mor çubuklarla doldurulur. Elmasları tıkladığınızda kaymanın animasyonu ve Özet panelinde ayrıntılar gösterilir.
Düzen kaymaları, Düzen kaymaları izinde vurgulanır. Mor çizgi, kaymaları kayma kümeleri halinde gruplandırır. Elmaslar ise bu kümedeki tek tek kaymaları gösterir. Elmasın boyutu, değişikliğin boyutuyla orantılıdır. Bu sayede en büyük değişikliklere odaklanabilirsiniz.
Bir vardiya tıklandığında, vardiyanın animasyonunu içeren bir pop-up gösterilir ve vardiya öğeleri mor renkte vurgulanır.
Ayrıca, bir Layout Shift kaydının Özet görünümünde başlangıç zamanı, vardiya puanı ve kaydırılan öğeler yer alır. Bu özellik, yeniden yükleme performans profiliyle kolayca kopyalanabildiğinden CLS sorunlarının yüklenmesiyle ilgili daha fazla ayrıntı edinmek için özellikle yararlıdır.
Bu, soldaki Analizler panelinde gösterilen Düzen kayması sorumluları analizine de bağlanır. Bu analizde, üst kısımda toplam CLS'nin yanı sıra düzen kaymalarının olası nedenleri gösterilir.
Yükleme sonrası CLS sorunlarını belirleme
CrUX ve Lighthouse CLS puanları arasındaki uyuşmazlık genellikle yükleme sonrası CLS'yi gösterir. Bu değişimleri saha verileri olmadan takip etmek zor olabilir. Alan verilerini toplama hakkında bilgi için Alandaki CLS öğelerini ölçme başlıklı makaleyi inceleyin.
Performans panelinin canlı metrikler görünümü, sayfayla etkileşim kurmanıza ve büyük düzen kaymalarına neden olan etkileşimleri belirlemek için CLS puanını izlemenize olanak tanır.
Geliştirici Araçları'nı kullanmak yerine, konsola yapıştırılan Performance Observer ile 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ı bir sayfayı kaydırırken, geç yüklenen içerik için ayrılmış alan olmadan tam olarak yüklendiğinde meydana gelir. Kullanıcı işaretçiyi üzerine getirdiğinde içeriğin kayması, yükleme sonrası yaygın bir CLS nedenidir. Bu etkileşimlerden herhangi biri sırasında içerikteki kaymalar, 500 milisaniye içinde gerçekleşse bile beklenmedik olarak kabul edilir.
Daha fazla bilgi için Düzen kaymalarında hata ayıklama başlıklı makaleyi inceleyin.
CLS'nin yaygın nedenlerini belirledikten sonra, Lighthouse'un zaman aralıkları kullanıcı akışı modu, düzen kaymaları ekleyerek tipik kullanıcı akışlarının gerilememesini sağlamak için de kullanılabilir.
Alanındaki CLS öğelerini ölçme
CLS'nin sahada izlenmesi, CLS'nin hangi koşullarda gerçekleştiğini belirlemek ve olası nedenleri daraltmak açısından çok değerli olabilir. Çoğu laboratuvar aracında olduğu gibi, saha araçları da yalnızca değişen öğeleri ölçer ancak bu genellikle nedeni belirlemek için yeterli bilgiyi sağlar. Hangi sorunların düzeltilmesi için en yüksek önceliğe sahip olduğunu belirlemek üzere CLS alan ölçümlerini de kullanabilirsiniz.
web-vitals kitaplığında, bu ek bilgileri toplamanıza olanak tanıyan ilişkilendirme işlevleri bulunur. Daha fazla bilgi için Gerçek hayattaki performansı hata ayıklama başlıklı makaleyi inceleyin. Diğer RUM sağlayıcılar da bu verileri benzer şekilde toplamaya ve sunmaya başladı.
CLS'nin yaygın nedenleri
CLS'nin nedenlerini belirledikten sonra sorunları düzeltmeye başlayabilirsiniz. Bu bölümde, CLS'nin daha yaygın nedenlerinden bazılarını ve bunları önlemek için yapabileceklerinizi göstereceğiz.
Boyutları olmayan resimler
Resim ve video öğelerinize her zaman width ve height boyut özelliklerini ekleyin. Alternatif olarak, CSS aspect-ratio veya benzeri bir yöntemle gerekli alanı ayırın. Bu yaklaşım, resim yüklenirken tarayıcının belgede doğru miktarda alan ayırabilmesini sağlar.
Resimlerdeki width ve height özelliklerinin geçmişi
Web'in ilk günlerinde geliştiriciler, tarayıcı resimleri getirmeye başlamadan önce sayfada yeterli alan ayrıldığından emin olmak için <img> etiketlerine width ve height özelliklerini eklerdi. Bu sayede yeniden akıtma ve yeniden düzenleme en aza indirilir.
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
Bu örnekteki width ve height birimleri içermez. Bu "piksel" boyutları, tarayıcının sayfa düzeninde 640x360 boyutunda bir alan ayırmasını sağlar. Gerçek boyutlar eşleşmese bile resim, bu alana sığacak şekilde uzatılırdı.
Duyarlı web tasarımı kullanıma sunulduğunda geliştiriciler width ve height etiketlerini kullanmamaya ve bunun yerine resimleri yeniden boyutlandırmak için CSS kullanmaya başladı:
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
Ancak resim boyutu belirtilmediğinden, tarayıcı resmi indirmeye başlayıp boyutlarını belirleyene kadar resim için alan ayrılmaz. Görseller yüklendikçe metin, yer açmak için sayfada aşağı kayar. Bu durum, kafa karıştırıcı ve sinir bozucu bir kullanıcı deneyimine neden olur.
En boy oranı burada devreye girer. Bir resmin en boy oranı, genişliğinin yüksekliğine oranıdır. Bu değer genellikle iki nokta işaretiyle ayrılmış iki sayı olarak ifade edilir (örneğin, 16:9 veya 4:3). x:y en boy oranında resim, x birim genişliğinde ve y birim yüksekliğindedir.
Bu, boyutlardan birini biliyorsak diğerinin belirlenebileceği anlamına gelir. 16:9 en boy oranı için:
- If puppy.jpg has a 360px height, width is 360 x (16 / 9) = 640px
- If puppy.jpg has a 640px width, height is 640 x (9 / 16) = 360px
Bir resmin en boy oranını bilmek, tarayıcının yükseklik ve ilişkili alan için yeterli alanı hesaplayıp ayırmasına olanak tanır.
Resim boyutlarını ayarlamayla ilgili modern 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 stil sayfanıza yukarıdaki CSS'yi ekleyerek düzen kaymalarını önleyebilirsiniz.
<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
Ardından tüm tarayıcılar, öğenin mevcut width ve height özelliklerine göre bir varsayılan en boy oranı ekler.
Bu, resim yüklenmeden önce width ve height özelliklerine göre bir en boy oranı hesaplar. Bu bilgiyi, düzen hesaplamasının en başında sağlar. Bir resmin belirli bir genişlikte (örneğin width: 100%) olması istendiğinde yükseklik, en boy oranı kullanılarak hesaplanır.
Bu aspect-ratio değeri, HTML işlenirken büyük tarayıcılar tarafından varsayılan bir kullanıcı aracısı stil sayfasıyla değil (nedenini ayrıntılı olarak öğrenmek için bu gönderiye göz atın) hesaplandığından değer biraz farklı şekilde gösterilir. Örneğin, Chrome bunu Nesne panelinin Stiller bölümünde şu şekilde gösterir:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
Safari de benzer şekilde davranarak HTML Özellikleri stil kaynağını kullanır. Firefox, bu hesaplanmış aspect-ratio değerini Inspector panelinde hiç göstermez ancak düzen için kullanır.
Önceki kodun auto kısmı önemlidir. Çünkü bu kısım, resim indirildikten sonra resim boyutlarının varsayılan en boy oranını geçersiz kılmasına neden olur. Resim boyutları farklıysa bu durum, resim yüklendikten sonra hala bir miktar düzen kaymasına neden olur ancak HTML yanlış olsa bile resim kullanılabilir hale geldiğinde resim en boy oranının kullanılmasını sağlar. Gerçek en boy oranı varsayılandan farklı olsa bile, boyut sağlanmayan bir resmin 0x0 varsayılan boyutundan daha az düzen kaymasına neden olur.
En boy oranı ve duyarlı resimler hakkında daha fazla bilgi edinmek için Medya en boy oranlarıyla sayfa yüklemeyi sorunsuz hale getirme başlıklı makaleyi inceleyin.
Resminiz bir kapsayıcıdaysa resmi kapsayıcının genişliğine göre yeniden boyutlandırmak için CSS'yi kullanabilirsiniz. Resim yüksekliği için sabit bir değer kullanmamak üzere height: auto; değerini ayarladık.
img {
height: auto;
width: 100%;
}
Duyarlı resimler ne olacak?
Duyarlı resimlerle çalışırken srcset, tarayıcının seçmesine izin verdiğiniz resimleri ve her bir resmin boyutunu tanımlar. <img> genişlik ve yükseklik özelliklerinin ayarlanabilmesi için her resim aynı en boy oranını kullanmalıdır.
<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önetiminize bağlı olarak değişebilir. Örneğin, dar görüntü alanları için bir resmin kırpılmış halini eklemek ve masaüstünde tam resmi göstermek 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 belirli bir <picture> öğesindeki <source> öğelerinde width ve height ayarlanması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
Düzen kaymalarına neden olabilecek tek içerik türü resimler değildir. Reklamlar, yerleştirmeler, iFrame'ler ve dinamik olarak yerleştirilen diğer içeriklerin tümü, kendilerinden sonra görünen içeriğin aşağı kaymasına neden olarak CLS'nizi artırabilir.
Reklamlar, web'deki düzen kaymalarına en büyük katkıyı sağlayan unsurlardan biridir. Reklam ağları ve yayıncılar genellikle dinamik reklam boyutlarını destekler. Reklam boyutları, daha yüksek tıklama oranları ve açık artırmada rekabet eden daha fazla reklam sayesinde performansı ve geliri artırır. Ancak bu durum, reklamların görüntülediğiniz görünür içeriği sayfanın aşağısına itmesi nedeniyle kullanıcı deneyiminin ideal olmamasına yol açabilir.
Yerleştirilebilir widget'lar, sayfanıza taşınabilir web içerikleri (ör. YouTube'daki videolar, Google Haritalar'daki haritalar ve sosyal medya gönderileri) eklemenize olanak tanır. Ancak bu widget'lar, yüklenmeden önce içeriklerinin ne kadar büyük olduğunun genellikle farkında değildir. Sonuç olarak, yerleştirme sunan platformlar widget'ları için her zaman yer ayırmaz. Bu da widget'lar yüklendiğinde düzen kaymalarına neden olur.
Bunlarla başa çıkma teknikleri benzerdir. Aradaki temel fark, eklenecek içerik üzerinde ne kadar kontrol sahibi olduğunuzdur. Bu, bir reklam iş ortağı gibi bir üçüncü taraf tarafından eklenirse eklenecek içeriğin tam boyutunu bilemeyebilir ve bu yerleştirmelerde meydana gelen düzen kaymalarını kontrol edemeyebilirsiniz.
Geç yüklenen içerikler için alan ayırma
Geç yüklenen içerikleri içerik akışına yerleştirirken ilk düzende bu içerikler için yer ayırarak düzen kaymalarını önleyebilirsiniz.
Bir yaklaşım, yer ayırmak için min-height CSS kuralı eklemektir. Diğer bir yaklaşım ise (örneğin reklamlar gibi duyarlı içerikler için) aspect-ratio CSS özelliğini, tarayıcıların boyutları belirtilmiş resimler için bu özelliği otomatik olarak kullandığı şekilde kullanmaktır.
Medya sorgularını kullanarak form faktörleri genelinde reklam veya yer tutucu boyutlarındaki küçük farklılıkları hesaba katmanız gerekebilir.
Reklamlar gibi sabit yüksekliği olmayan içeriklerde, düzen kaymasını tamamen ortadan kaldırmak için gereken alanın tam olarak ayrılması mümkün olmayabilir. Daha küçük bir reklam yayınlanırsa yayıncı, düzen kaymalarını önlemek için daha büyük bir kapsayıcıya stil verebilir veya geçmiş verilere göre reklam alanı için en olası boyutu seçebilir. Bu yaklaşımın dezavantajı, sayfadaki boş alan miktarını artırmasıdır.
Bunun yerine, ilk boyutu kullanılacak en küçük boyuta ayarlayabilir ve daha büyük içeriklerde bir miktar kaymayı kabul edebilirsiniz. Daha önce önerildiği gibi min-height kullanmak, boş bir öğenin 0 piksel olan varsayılan boyutuna kıyasla düzen kaymalarının etkisini azaltırken üst öğenin gerektiği kadar büyümesine olanak tanır.
Örneğin, reklam döndürülmediğinde yer tutucu göstererek ayrılmış alanı daraltmaktan kaçının. Öğeler için ayrılan alanın kaldırılması, içerik eklenmesi kadar CLS'ye neden olabilir.
Geç yüklenen içeriği görüntü alanında daha aşağıya yerleştirme
Görüntü alanının üst kısmına daha yakın bir şekilde dinamik olarak yerleştirilen içerik, genellikle görüntü alanının alt kısmına yerleştirilen içerikten daha fazla düzen kaymasına neden olur. Ancak içeriğin görüntü alanının herhangi bir yerine yerleştirilmesi yine de bir kaymaya neden olur. Yerleştirilen içerik için yer ayıramıyorsanız CLS üzerindeki etkiyi azaltmak amacıyla içeriği sayfada daha sonraki bir yere yerleştirmenizi öneririz.
Kullanıcı etkileşimi olmadan yeni içerik eklemekten kaçının
Bir siteyi yüklemeye çalışırken görünüm alanının üst veya alt kısmında açılan kullanıcı arayüzü nedeniyle düzen kaymaları yaşamış olabilirsiniz. Reklamlara benzer şekilde, bu durum genellikle sayfanın geri kalan içeriğini kaydıran banner'lar ve formlarda görülür:
Bu tür kullanıcı arayüzü öğelerini göstermeniz gerekiyorsa, yüklenirken sayfadaki içeriğin beklenmedik şekilde kaymasına neden olmaması için önceden görüntü alanında yeterli yer ayırın (örneğin, yer tutucu veya iskelet kullanıcı arayüzü kullanarak). Alternatif olarak, içeriği mantıklı olan yerlerde yer paylaşımı yaparak öğenin belge akışının bir parçası olmadığından emin olun. Bu tür bileşenlerle ilgili daha fazla öneri için Çerez bildirimleriyle ilgili en iyi uygulamalar başlıklı yayını inceleyin.
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üklenirken veya canlı feed içeriği güncellenirken. Bu 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 carousel kullanın ve geçişten sonra eski içeriği kaldırın. Yeni içerik gelirken yanlışlıkla tıklamaları veya dokunmaları önlemek için geçiş tamamlanana kadar tüm bağlantıları ve kontrolleri devre dışı bırakmayı unutmayın.
- Kullanıcının yeni içerik yükleme işlemini başlatmasını sağlayın. Böylece kullanıcı, geçişten etkilenmez (örneğin, "Daha fazla yükle" veya "Yenile" düğmesiyle). İçeriğin hemen gösterilmesi için kullanıcı etkileşiminden önce önceden getirilmesi önerilir. Kullanıcı girişinden sonra 500 milisaniye içinde gerçekleşen yerleşim kaymalarının CLS'ye dahil edilmediğini hatırlatırız.
- İçeriği ekran dışında sorunsuz bir şekilde yükleyin ve kullanıcıya içeriğin kullanıma hazır olduğunu bildiren bir bildirim yerleştirin (örneğin, "En üste kaydır" düğmesiyle).
Animasyonlar
CSS özelliği 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üzenleme, boyama ve birleştirme işlemlerini tetikler. top ve left özelliklerinin değiştirilmesi, taşınan öğe kendi katmanında olsa bile düzen kaymalarına neden olur. Bu özellikleri kullanarak animasyon yapmaktan kaçının.
Diğer CSS özellikleri, yeniden düzenlemeyi tetiklemeden değiştirilebilir. Örneğin, öğeleri çevirmek, ölçeklendirmek, döndürmek veya eğmek için transform animasyonlarını kullanabilirsiniz.
translate kullanılarak oluşturulan animasyonlar diğer öğeleri etkileyemez ve bu nedenle CLS'ye dahil edilmez. Birleştirilmemiş animasyonlar da yeniden düzenlemeye neden olmaz. Hangi CSS özelliklerinin düzen kaymalarını tetiklediği hakkında daha fazla bilgi edinmek için Yüksek performanslı animasyonlar başlıklı makaleyi inceleyin.
Web yazı tipleri
Web yazı tiplerinin indirilmesi ve oluşturulması, genellikle web yazı tipi indirilmeden önce iki şekilde ele alınır:
- Yedek yazı tipi, web yazı tipiyle değiştirilir ve bu da Stilsiz Metin Flaş'ına (FOUT) neden olur.
- "Görünmez" metin, bir web yazı tipi kullanılabilir hale gelene ve metin görünür hale getirilene kadar yedek yazı tipi kullanılarak görüntülenir (FOIT - görünmez metin flaşı).
Her iki yaklaşım da düzen kaymalarına neden olabilir. Metin görünmez olsa bile yedek yazı tipi kullanılarak düzenlenir. Bu nedenle, web yazı tipi yüklendiğinde metin bloğu ve çevreleyen içerik, görünür yazı tipinde olduğu gibi kayar.
Aşağıdaki araçlar, metin kaymasını en aza indirmenize yardımcı olabilir:
font-display: optional, web yazı tipi yalnızca ilk düzenleme sırasında kullanılabilirse kullanıldığından yeniden düzenlemeyi önleyebilir.- Uygun yedek yazı tipinin kullanıldığından emin olun. Örneğin,
font-family: "Google Sans", sans-serif;kullanıldığında"Google Sans"yüklenirken tarayıcınınsans-serifyedek yazı tipinin kullanılması sağlanır. Yalnızcafont-family: "Google Sans"kullanarak yedek yazı tipi belirtmemek, varsayılan yazı tipinin kullanılacağı anlamına gelir. Chrome'da bu yazı tipi, varsayılansans-serifyazı tipinden daha kötü bir eşleşme olan "Times"tır. size-adjust,ascent-override,descent-overrideveline-gap-overrideAPI'lerini kullanarak yedek yazı tipi ile web yazı tipi arasındaki boyut farklarını en aza indirin. Bu API'ler, Geliştirilmiş yazı tipi yedekleri başlıklı yayında ayrıntılı olarak açıklanmıştır.- Font Loading API, gerekli yazı tiplerinin alınması için gereken süreyi kısaltabilir.
<link rel=preload>özelliğini kullanarak kritik web yazı tiplerini olabildiğince erken yükleyin. Önceden yüklenmiş bir yazı tipi, ilk boyama işlemini karşılama konusunda daha yüksek bir şansa sahiptir. Bu durumda düzen kayması olmaz.
Diğer yazı tipi en iyi uygulamaları için Yazı tipleriyle ilgili en iyi uygulamalar başlıklı makaleyi inceleyin.
Sayfaların geri-ileri önbelleğe alınmaya uygun olduğundan emin olarak CLS'yi azaltma
CLS puanlarını düşük tutmak için oldukça etkili bir teknik, web sayfalarınızın geri/ileri önbelleği (bfcache) için uygun olmasını sağlamaktır.
Geri-ileri önbellek, sayfaları tarayıcı belleğinde kısa bir süre saklar. Bu sayede, sayfaya geri döndüğünüzde sayfa tam olarak bıraktığınız gibi geri yüklenir. Bu, tam olarak yüklenen sayfanın anında kullanıma hazır olduğu anlamına gelir. Yükleme sırasında, daha önce verilen nedenlerden herhangi biri nedeniyle normalde görülebilecek kaymalar olmaz.
Bu durum, ilk sayfa yüklemesinin düzen kaymalarına neden olabileceği anlamına gelse de kullanıcı sayfalar arasında geri döndüğünde aynı düzen kaymalarını tekrar tekrar görmez. İlk yüklemede bile kaymaları önlemeyi hedeflemelisiniz. Ancak bu durumun tamamen çözülmesi daha zor olduğunda, en azından bfcache navigasyonlarında kaymaları önleyerek etkisini azaltabilirsiniz.
Geri ve ileri gezinme, birçok sitede yaygın olarak kullanılır. Örneğin, içerik sayfasına, kategori sayfasına veya arama sonuçlarına dönme.
Bu özellik Chrome'da kullanıma sunulduğunda CLS'de belirgin iyileşmeler gördük.
Geri-ileri önbellek, tüm tarayıcılar tarafından varsayılan olarak kullanılır ancak bazı siteler çeşitli nedenlerle geri-ileri önbelleğe alınmaya uygun değildir. Sitenizin genel CLS puanını iyileştirmek için bu özellikten tam olarak yararlandığınızdan emin olmak üzere bfcache kullanımını engelleyen sorunları test etme ve belirleme hakkında daha fazla bilgi edinmek için bfcache kılavuzunu okuyun.
Sonuç
Bu kılavuzun önceki bölümlerinde ayrıntılı olarak açıklandığı gibi, CLS'yi belirlemek ve iyileştirmek için çeşitli teknikler vardır. Core Web Vitals'da izin verilen değerler vardır. Bu nedenle, CLS'yi tamamen ortadan kaldıramasanız bile bu tekniklerden bazılarını kullanarak etkiyi azaltabilirsiniz. Bu sayede, web sitenizin kullanıcılarına daha iyi bir deneyim sunarak bu sınırlar içinde kalabilirsiniz.