Kullanıcı deneyimini iyileştirmek için ani düzen kaymalarından nasıl kaçınacağınızı öğrenin
Cumulative Layout Shift (CLS), üç Core Web Vitals metriğinden biridir. Görüntü alanındaki görünür içeriğin ne kadarının değiştiğini, 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ızı ve aniden sayfadaki öğelerin kaydığını, bu nedenle dikkatinizin dağıldığını ve yerinizi tekrar bulmanız gerektiğini düşünün. Bu durum, haber okurken veya "Arama" ya da "Alışveriş Sepetine Ekle" düğmelerini tıklamaya çalışırken de dahil olmak üzere web'de çok yaygındır. Bu tür deneyimler görsel olarak rahatsız edici ve can sıkıcıdır. Bu tür sorunlar genellikle sayfaya aniden başka bir öğe eklendiğinde veya bir öğenin boyutu değiştirildiğinde görünür öğelerin hareket etmeye zorlanması nedeniyle ortaya çıkar.
İyi bir kullanıcı deneyimi sağlamak için sitelerin, sayfa ziyaretlerinin en az% 75'inde 0,1 veya daha düşük bir CLS'ye sahip 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 uzakta kaydığına dair bir hesaplamaya dayalı, birimsiz bir değerdir.
Bu kılavuzda, düzen kaymalarının yaygın nedenlerini optimize etmeyi ele alacağız.
Düşük CLS'nin en yaygın nedenleri şunlardır:
- Boyutu olmayan resimler.
- Boyutları olmayan reklamlar, yerleşimler ve iframe'ler.
- Boyut içermeyen reklamlar, yerleştirmeler ve iframe'ler gibi dinamik olarak yerleştirilmiş içerik.
- Web yazı tipleri.
Düzen değişikliklerinin nedenlerini anlama
Yaygın CLS sorunlarının çözümlerini incelemeye başlamadan önce CLS puanınızı ve değişikliklerin nereden geldiğini anlamanız önemlidir.
Laboratuvar araçlarında CLS ile sahada CLS karşılaştırması
Geliştiricilerin, Chrome Geliştirici Araçları veya diğer laboratuvar araçlarını kullanarak ölçtükleri CLS ile eşleşmediği için Chrome Kullanıcı Deneyimi Raporu (CrUX) tarafından ölçülen CLS'nin yanlış olduğunu düşünmesi yaygındır. Lighthouse gibi web performansı laboratuvar araçları, genellikle bazı web performansı metriklerini ölçmek ve bazı yönergeler sunmak için sayfayı basit bir şekilde yüklediklerinden sayfanın CLS'sinin tamamını göstermeyebilir (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. Bu veri kümesi için CLS yalnızca laboratuvar araçlarının ölçtüğü ilk sayfa yükleme sırasında değil, sayfanın tüm ömrü boyunca ölçülür.
Sayfayı ilk kez oluşturmak için gerekli tüm kaynaklar getirildiği için sayfa yükleme sırasında düzen kaymaları çok yaygındır ancak düzen kaymaları ilk yükleme sonrasında da gerçekleşebilir. Yükleme sonrası kaymaların çoğu kullanıcı etkileşimi nedeniyle gerçekleşebilir ve bu nedenle söz konusu etkileşimden 500 milisaniye sonra meydana geldiği sürece beklenen kaymalar olduğundan CLS puanının dışında tutulur.
Ancak, uygun etkileşim olmadığında kullanıcı tarafından beklenmeyen diğer yükleme sonrası kaymalar dahil edilebilir. Örneğin, sayfayı daha fazla kaydırdığınızda ve yavaş yüklenmiş içerik yüklendiğinde bu kaymalara neden olabilir. Yükleme sonrası CLS'nin diğer yaygın nedenleri, geçiş etkileşimlerinde (ör. tek sayfalı uygulamalarda) 500 milisaniyelik ek yayınlanma süresinden daha uzun süren etkileşimlerdir.
PageSpeed Insights, hem "Gerçek kullanıcılarınızın nelerle karşılaştığını görün" bölümünde bir URL'den kullanıcı tarafından algılanan CLS'yi hem de "Performans sorunlarını teşhis edin" bölümünde laboratuvar tabanlı yükleme CLS'sini gösterir. Bu değerler arasındaki farklar büyük olasılıkla yükleme sonrası CLS'den kaynaklanmaktadır.
Yükleme CLS sorunlarını belirleme
PageSpeed Insights'ın CrUX ve Lighthouse CLS puanlarının genel olarak uyumlu olması, genellikle Lighthouse tarafından algılanan 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 denetimde yardımcı olur ve sayfa yüklemesi sırasında kaydırılan tüm öğeleri CLS katkılarıyla birlikte listeler. CLS denetimlerini filtreleyerek şu denetimleri görebilirsiniz:
Geliştirici Araçları'ndaki Performans panelinde Deneyimler bölümündeki düzen değişiklikleri de vurgulanır. Bir Layout Shift kaydının Özet görünümü, kümülatif düzen kayması puanını ve etkilenen bölgeleri gösteren bir dikdörtgen yer paylaşımını içerir. Bu, yeniden yükleme performans profiliyle kolayca çoğaltılabileceği için yükleme CLS sorunlarıyla ilgili daha fazla ayrıntı almak açısından özellikle yararlıdır.
Layout Shift kaydı gösteren kırmızı renkli bir çubuk doldurulur. Kaydı tıkladığınızda bu resimde "taşındığı yer" ve "taşındığı hedef" gibi ayrıntılar gösterilerek etkilenen öğelere ayrıntılı olarak bakabilirsiniz.
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, alan verileri olmadan tespit etmek zor olabilir. Alan verileri toplama hakkında bilgi edinmek için Alandaki CLS öğelerini ölçme başlıklı makaleyi inceleyin.
Web Verileri Chrome uzantısı, bir sayfayla etkileşimde bulunurken uyarı ekranında veya konsolda kayan öğelerin üzerinde daha fazla ayrıntı elde edebileceğiniz CLS'yi izlemek için kullanılabilir.
Uzantı kullanmaya alternatif olarak, konsola yapıştırılan Performans Gözlemcisi'ni kullanarak sayfa düzeni değişikliklerini 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 kendisine ayrılan alan olmadan tam olarak yüklendiğinde meydana gelir. Kullanıcı imleci üzerine tuttuğunda içeriğin kayması, yükleme sonrası CLS'nin yaygın nedenlerinden biridir. Bu etkileşimlerden biri sırasında herhangi bir içerik kayması, 500 milisaniye içinde gerçekleşse bile beklenmedik olarak sayılır.
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 da kullanılabilir. Bu mod, düzen değişiklikleri yaparak tipik kullanıcı akışlarının geriye gitmemesini sağlar.
Alandaki CLS öğelerini ölçme
CLS'nin sahada izlenmesi, CLS'nin hangi koşullarda gerçekleştiğini belirlemede ve olası nedenleri bulmada paha biçilmez bir rol oynayabilir. Çoğu laboratuvar aracı gibi saha araçları da yalnızca kaymış öğeleri ölçer ancak bu genellikle nedeni belirlemek için yeterli bilgi sağlar. Hangi sorunların düzeltilmesi gerektiğini belirlemek için 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 Alanda performansla ilgili hata ayıklama başlıklı makaleyi inceleyin. Diğer RUM sağlayıcıları da benzer şekilde bu verileri toplayıp sunmaya başladı.
CLS'nin yaygın nedenleri
CLS'nin nedenlerini belirledikten sonra, sorunları düzeltmek için çalışmaya başlayabilirsiniz. Bu bölümde, CLS'nin en yaygın nedenlerinden bazılarını ve bunları önlemek için neler yapabileceğinizi 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, tarayıcının resim yüklenirken dokümanda doğru miktarda alan ayırmasını sağlar.
Resimlerdeki width ve height özelliklerinin geçmişi
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 özellikleri eklerdi. Bu sayede yeniden akış ve yeniden düzen oluşturma 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 sayfanın düzeninde 640x360 boyutunda bir alan ayırmasını sağlar. Resim, gerçek boyutların uygun olup olmadığına bakılmaksızın bu alana sığacak şekilde uzatılır.
Duyarlı Web Tasarımı kullanıma sunulduğunda geliştiriciler width ve height öğelerini atlamaya başladı 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şlayana ve boyutlarını belirleyene kadar resim için alan ayrılamaz. Resimler yüklenirken metin, resimlere yer açmak için sayfanın aşağısına kayar. Bu da kafa karıştırıcı ve can sıkıcı bir kullanıcı deneyimi oluşturur.
Bu noktada en boy oranı devreye girer. Bir resmin en boy oranı, genişliğinin yüksekliğine oranıdır. Bu, genellikle iki nokta ile ayrılmış iki sayı olarak ifade edilir (ör. 16:9 veya 4:3). x:y en boy oranında, resim x birim genişliğinde ve y birim yüksekliğindedir.
Yani boyutlardan birini biliyorsak diğeri belirlenebilir. 16:9 en boy oranı için:
- puppy.jpg dosyasının yüksekliği 360 piksel ise genişlik 360 x (16 / 9) = 640 piksel olur.
- yavru köpek.jpg 640 piksel genişliğe sahipse, yükseklik 640 x (9 / 16) = 360 piksel olur
Bir resmin en boy oranını bilmek, tarayıcının yükseklik ve ilişkili alan için yeterli alanı hesaplamasına ve ayırmasına olanak tanır.
Resim boyutlarını ayarlamayla ilgili modern en iyi uygulamalar
Modern tarayıcılar, resimlerin varsayılan en boy oranını resmin width ve height özelliklerine göre ayarlar. Bu nedenle, resimde bu özellikleri ayarlayarak ve önceki CSS'yi stil sayfanıza ekleyerek sayfa düzeni 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">
Daha sonra 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 bilgileri, düzen hesaplamasının en başında sağlar. Bir resme belirli bir genişlik (örneğin width: 100%) belirtildiği anda, yükseklik hesaplamak için en boy oranı kullanılır.
Bu aspect-ratio değeri, varsayılan bir User Agent stil sayfası yerine HTML işlenirken başlıca tarayıcılar tarafından hesaplanır (nedenini ayrıntılı olarak incelemek için bu yayına bakın). Bu nedenle değer, biraz farklı bir şekilde gösterilir. Örneğin, Chrome, Öğe panelinin Stiller bölümünde bunu şu şekilde görüntüler:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
Safari, HTML Özellikleri stil kaynağını kullanarak benzer şekilde davranır. Firefox, bu hesaplanmış aspect-ratio değerini İnceleyici panelinde hiç göstermez ancak sayfa düzeni için kullanır.
Önceki kodun auto kısmı önemlidir. 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 da bir miktar düzen kaymasına neden olur. Ancak bu durum, HTML'nin yanlış olması ihtimaline karşı, resim en boy oranının kullanılabilir olduğunda kullanılmaya devam etmesini sağlar. Gerçek en boy oranı varsayılandan farklı olsa bile, boyutu belirtilmemiş bir resmin 0x0 varsayılan boyutundan daha az düzen kaymasına neden olur.
Duyarlı resimlerle ilgili daha fazla bilgi edinmek ve en boy oranını ayrıntılı olarak incelemek için Medya en boy oranları ile sorunsuz sayfa yükleme başlıklı makaleyi inceleyin.
Resminiz bir kapsayıcı içinde yer alıyorsa resmi kapsayıcı genişliğine göre yeniden boyutlandırmak için CSS'yi kullanabilirsiniz. Resim yüksekliğinde sabit bir değer kullanmaktan kaçınmak için height: auto; değerini ayarladık.
img {
height: auto;
width: 100%;
}
Peki ya duyarlı resimler?
Duyarlı resimler ile çalışırken srcset, tarayıcının aralarından seçim yapmasına izin verdiğiniz resimleri ve her bir resmin boyutunu tanımlar. <img> genişlik ve yükseklik özelliklerinin ayarlanabilmesi için her resmin aynı en boy oranını kullanması gerekir.
<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 resim yönünüze bağlı olarak değişebilir. Örneğin, dar görüntü alanları için bir resmin kırpılmış bir fotoğrafını eklemek ve masaüstünde resmin tamamını 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 belirli bir <picture> öğesindeki <source> öğelerinde width ve height ayarlarını destekler:
<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ştirilen içerikler 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ü, bunlardan sonra görünen içeriğin aşağı kaymasına neden olarak CLS'nizin artmasına neden olabilir.
Reklamlar, web'deki 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. Reklam boyutları, daha yüksek tıklama oranları ve açık artırmada daha fazla reklamın rekabet etmesi nedeniyle performansı/geliri artırır. Maalesef bu durum, görüntülediğiniz görünür içeriği sayfanın alt kısmına iten reklamlar nedeniyle kullanıcı deneyiminin optimum olmamasına yol açabilir.
Yerleştirilebilir widget'lar, sayfanıza YouTube'daki videolar, Google Haritalar'daki haritalar ve sosyal medya gönderileri gibi taşınabilir web içerikleri eklemenize olanak tanır. Ancak bu widget'lar genellikle yüklenmeden önce içeriklerinin ne kadar büyük olduğunun farkında olmaz. Sonuç olarak, yerleştirme olanağı sunan platformlar widget'ları için her zaman yer ayırmaz ve bu durum, nihai olarak yüklendiklerinde düzen kaymalarına neden olur.
Bu sorunlarla başa çıkma tekniklerinin tümü benzerdir. En önemli fark, eklenecek içerik üzerinde ne kadar kontrole sahip olduğunuzdur. Bu boyut, reklam iş ortağı gibi bir üçüncü tarafça eklenirse, eklenecek içeriğin tam boyutunu bilemeyebilir veya bu yerleştirmeler içinde meydana gelen düzen değişikliklerini kontrol edemeyebilirsiniz.
Geç yüklenen içerikler için alan ayırma
Geç yüklenen içerikleri içerik akışına yerleştirirken düzen kaymalarını önlemek için ilk düzende bunlara yer ayırın.
Yaklaşımlardan biri, alan ayırmak için min-height CSS kuralı eklemek veya örneğin reklamlar gibi duyarlı içerikler için aspect-ratio CSS mülkünü, tarayıcıların boyutu sağlanan resimlerde otomatik olarak kullanmasına benzer şekilde kullanmaktır.
Medya sorgularını kullanarak form faktörleri arasında reklam veya yer tutucu boyutlarındaki küçük farklılıkları hesaba katmanız gerekebilir.
Reklamlar gibi sabit yüksekliği olmayabilecek içerikler için, düzen kaymasını tamamen ortadan kaldırmak için gereken tam alan miktarını 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ıya stil uygulayabilir veya geçmiş verilere dayalı olarak reklam alanı için en olası boyutu seçebilir. Bu yaklaşımın olumsuz tarafı, sayfadaki boş alanın 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 değiştirme değişikliğini kabul edebilirsiniz. Daha önce önerildiği gibi min-height kullanmak, boş bir öğenin varsayılan boyutu olan 0 piksel ile karşılaştırıldığında düzen kaymalarının etkisini azaltırken üst öğenin gerektiği gibi büyümesine olanak tanır.
Örneğin, hiçbir reklam döndürülmediğinde bir yer tutucu göstererek ayrılmış alanın daraltılmasını önlemeye çalışın. Öğeler için ayrılan boşluğun kaldırılması, içerik eklemek kadar CLS'ye neden olabilir.
Geç yüklenen içeriği görüntü alanında daha alta yerleştirin
Görüntü alanının üst kısmına yakın bir yere dinamik olarak yerleştirilen içerikler, genellikle görüntü alanının alt kısmına yerleştirilen içeriklere kıyasla daha fazla düzen kaymasına neden olur. Ancak görüntü alanının herhangi bir yerine içerik yerleştirilmesi yine de bir kaymaya neden olur. Enjekte edilen içerik için yer ayıramıyorsanız CLS'si üzerindeki etkiyi azaltmak için içeriği sayfanın daha sonlarına yerleştirmenizi öneririz.
Kullanıcı etkileşimi olmadan yeni içerik eklemekten kaçının
Bir siteyi yüklemeye çalışırken görüntü 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 sayfa içeriğinin geri kalanını kaydıran banner'larda ve formlarda yaşanır:
Bu tür kullanıcı arayüzü olanaklarını görüntülemeniz gerekiyorsa görüntü alanında bunun için önceden yeterli alan ayırın (örneğin, bir yer tutucu veya iskelet kullanıcı arayüzü kullanarak). Böylece, sayfa yüklendiğinde sayfadaki içeriğin şaşırtıcı şekilde kaymasına neden olmaz. Alternatif olarak, öğenin doküman akışının bir parçası olmadığından emin olmak için içeriği uygun olduğunda yer paylaşımı yapın. Bu tür bileşenlerle ilgili daha fazla öneri için Çerez bildirimleri için en iyi uygulamalar başlıklı makaleyi inceleyin.
Bazı durumlarda dinamik olarak içerik 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 durumlarda beklenmedik düzen değişikliklerini önlemenin birkaç yolu vardır:
- Sabit boyutlu bir kapsayıcıda eski içeriği yeni içerikle değiştirin veya geçişten sonra eski içeriği kaldırarak bant kullanın. Yeni içerikler yüklenirken yanlışlıkla tıklama veya dokunma yapılmasını önlemek için geçiş tamamlanana kadar tüm bağlantıları ve kontrolleri devre dışı bırakmayı unutmayın.
- Değişikliğe hazırlıksız yakalanmaması için kullanıcının yeni içeriğin yüklenmesini başlatmasını sağlayın (ör. "Daha fazla yükle" veya "Yenile" düğmesi). İçeriği, hemen gösterilmesi için kullanıcı etkileşiminden önce önceden getirmeniz önerilir. Kullanıcı girişinden 500 milisaniye içinde gerçekleşen yerleşim kaymalarının CLS'ye dahil edilmediğini hatırlatmak isteriz.
- İçeriği ekran dışında sorunsuz bir şekilde yükleyin ve kullanıcıya içeriğin kullanıma sunulduğunu belirten bir bildirim (örneğin, "Yukarı kaydır" düğmesiyle) yerleştirin.
Animasyonlar
CSS mülk 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üzen, boya ve birleştirmeyi tetikler. top ve left özelliklerinin değiştirilmesi, taşınmakta olan öğe kendi katmanında olsa bile düzen kaymalarına da neden olur. Bu özellikleri kullanarak animasyon oluşturmaktan kaçının.
Diğer CSS özellikleri, yeniden düzenler tetiklenmeden değiştirilebilir. Öğeleri taşımak, ölçeklendirmek, döndürmek veya eğmek için transform animasyonlarını kullanmak da bu yöntemlerden biridir.
translate kullanan birleştirilmiş animasyonlar diğer öğeleri etkileyemediğinden 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 başlıklı makaleyi inceleyin.
Web yazı tipleri
Web yazı tiplerinin indirilmesi ve oluşturulması, genellikle web yazı tipi indirilmeden önce iki yöntemden biriyle gerçekleştirilir:
- Yedek yazı tipi, web yazı tipiyle değiştirilir ve stilsiz metin yanıp söner (FOUT).
- "Görünmez" metin, bir web yazı tipi kullanılabilir hale gelinceye ve metin görünür hale gelinceye kadar yedek yazı tipi kullanılarak görüntülenir (FOIT (görünmez metnin flash simgesi).
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 çevresindeki içerik, görünür yazı tipinde olduğu gibi aynı şekilde kaydırılır.
Aşağıdaki araçlar, metin kaymasını en aza indirmenize yardımcı olabilir:
- Web yazı tipi yalnızca ilk düzen sırasında kullanılabilir durumdaysa
font-display: optionalyeniden düzenlenmekten kaçınabilir. - 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ı tipi kullanılır. Yalnızcafont-family: "Google Sans"kullanarak yedek yazı tipi belirtilmezse varsayılan yazı tipi kullanılır. Chrome'da varsayılan yazı tipi "Times"dır. Bu yazı tipi, varsayılansans-serifyazı tipinden daha kötü bir eşleşme olan bir serif yazı tipidir. - İyileştirilmiş yedek yazı tipleri yayınında ayrıntılı olarak açıklandığı gibi yeni
size-adjust,ascent-override,descent-overrideveline-gap-overrideAPI'lerini kullanarak yedek yazı tipi ile web yazı tipi arasındaki boyut farklılıklarını en aza indirin. - Yazı Tipi Yükleme API'si, gerekli yazı tiplerini almanın süresini kısaltabilir.
<link rel=preload>özelliğini kullanarak kritik web yazı tiplerini olabildiğince erken yükleyin. Önceden yüklenmiş bir yazı tipinin, ilk boyamayla eşleşme olasılığı daha yüksektir. 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 okuyun.
Sayfaların Bfcache için uygun olmasını sağlayarak CLS'yi azaltın.
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.
Bfcache, sayfaları siz gittikten sonra kısa bir süre için tarayıcının belleğinde tutar. Böylece, bu sayfalara geri dönerseniz tam olarak bıraktığınız gibi geri yüklenirler. Bu, tam yüklü sayfanın anında kullanılabilir olduğu anlamına gelir. Bu durumda, daha önce belirtilen nedenlerden herhangi biri nedeniyle yükleme sırasında normalde görülebilecek hiçbir kayma olmaz.
Bu, ilk sayfa yüklemesinde düzen kaymalarıyla karşılaşacağı anlamına gelse de, kullanıcı sayfalara geri döndüğünde tekrar tekrar aynı düzen kaymalarını görmez. İlk yüklemede bile kaymaları her zaman önlemeyi hedeflemeniz gerekir. Ancak bu sorunun tamamen çözülmesi daha zor olduğunda, bfcache gezinmelerinde kaymaları önleyerek en azından etkiyi azaltabilirsiniz.
Geri ve ileri gezinme çoğu sitede yaygın olarak kullanılır. Örneğin, bir 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ştirmeler gördük.
Bfcache tüm tarayıcılar tarafından varsayılan olarak kullanılır, ancak bazı siteler çeşitli nedenlerden dolayı bfcache için uygun değildir. Sitenizin genel CLS puanına yardımcı olmak için bu özelliğin tüm avantajlarından yararlandığınızdan emin olmak amacıyla bfcache kullanımını engelleyen sorunların nasıl test edilip tanımlanacağı hakkında daha fazla bilgi 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'ta 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 bu sınırlar içinde kalabilir ve web sitenizin kullanıcılarına daha iyi bir deneyim sunabilirsiniz.