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 kaydığını ve etkilenen öğelerin ne kadar hareket ettiğini birleştirerek içeriğin kararlılığını ölçer.
Düzen kaymaları kullanıcıların dikkatini dağıtabilir. Bir makaleyi okumaya başladığınızı ve sayfada aniden bir şeylerin değişmesine neden olarak kaldığınızı ve bulunduğunuz yeri tekrar bulmanızı gerektirdiğini hayal edin. Bu durum, web'de haberleri okurken veya bu "Ara" düğmesini tıklamaya çalışırken sık karşılaşılan bir durumdur. "Alışveriş Sepetine Ekle" düğmelerini kullanın. Bu tür deneyimler görsel olarak rahatsız edici ve can sıkıcıdır. Bu hatalar, genellikle sayfaya aniden başka bir öğenin eklenmesi veya yeniden boyutlandırılması nedeniyle görünür öğelerin taşınmaya zorlanmasından kaynaklanır.
İyi bir kullanıcı deneyimi sağlamak için sitelerin CLS'si sayfa ziyaretlerinin en az% 75'inde 0, 1 veya daha az olmalıdır.
Saniye veya milisaniye cinsinden ölçülen zamana dayalı değerler olan diğer Core Web Vitals'tan farklı olarak CLS puanı, içeriğin ne kadar kaydığını ve ne kadar uzağa kaydığını temel alan 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:
- Boyutları 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 kaymalarının 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 Kullanıcı Deneyimi Raporu (CrUX) tarafından ölçülen CLS'nin, Chrome Geliştirici Araçları veya diğer laboratuvar araçlarını kullanarak ölçtükleri CLS ile eşleşmemesi nedeniyle yanlış olduğunu düşünmeleri yaygın bir durumdur. Lighthouse gibi web performans laboratuvarı araçları, bazı web performansı metriklerini ölçmek ve yol göstermek için genellikle sayfayı basit bir şekilde yüklediğinden bir 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. 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üklenirken düzen kaymaları çok yaygındır ancak düzen kaymaları ilk yükleme sonrasında da gerçekleşebilir. Yükleme sonrası birçok kayma kullanıcı etkileşimi sonucunda gerçekleşebilir. Bu nedenle, söz konusu etkileşimden sonraki 500 milisaniye içinde gerçekleştikleri sürece beklenen kaymalar oldukları için CLS puanından hariç tutulurlar.
Ancak, uygun etkileşim olmadığında kullanıcı tarafından beklenmeyen diğer yükleme sonrası kaymalar dahil edilebilir. Örneğin, sayfayı daha da kaydırdığınızda ve sayfaya yavaşça yüklenen içerik yüklendiğinde kaymalara neden olabilir. Yükleme sonrası CLS'nin diğer yaygın nedenleri, 500 milisaniyelik ek süreden daha uzun süren Tek Sayfalık Uygulamalar gibi geçiş etkileşimleridir.
PageSpeed Insights, kullanıcı tarafından algılanan "Gerçek kullanıcılarınızın ne yaşadığını keşfedin" bölümündeki bir URL'den CLS bölümü, "Performans sorunlarını teşhis edin" bölümünde laboratuvar tabanlı yükleme CLS'sini bölümüne ekleyin. Bu değerler arasındaki farklar muhtemelen yükleme sonrası CLS'den kaynaklanır.
Yükleme CLS sorunlarını tanımlama
PageSpeed Insights'ın CrUX ve Lighthouse CLS puanları genel olarak uyumlu olduğunda bu genellikle Lighthouse tarafından algılanan bir yükleme CLS sorunu olduğunu gösterir. Bu durumda Lighthouse, eksik genişlik ve yükseklik nedeniyle CLS'ye neden olan resimler hakkında daha fazla bilgi sağlamak ve ayrıca sayfa yüklemesi sırasında değişen tüm öğeleri CLS katkılarıyla birlikte listelemek için iki denetimle yardımcı olur. CLS denetimlerini filtreleyerek şu denetimleri görebilirsiniz:
Geliştirici Araçları'ndaki Performans paneli, Deneyim bölümündeki düzen değişikliklerini de vurgular. Bir Layout Shift kaydının Özet görünümü, kümülatif düzen kaydırma puanını ve etkilenen bölgeleri gösteren bir dikdörtgen yer paylaşımını içerir. Bu, yeniden yükleme performansı profili ile kolayca çoğaltılabileceğinden özellikle yükleme CLS sorunları hakkında daha fazla ayrıntı edinmek için yararlıdır.
Layout Shift kaydını 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 CLS'yi izlemek için kullanılabilir. Bu uzantıyı, kaydırılan öğelerin üzerinde daha fazla ayrıntı bulabileceğiniz bir bilgi ekranında veya konsolda kullanabilirsiniz.
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ı işaretçiyi üzerinde tuttuğunda içeriğin kayması, yükleme sonrası CLS'nin sık karşılaşılan diğer bir nedenidir. Bu etkileşimlerden herhangi biri sırasında gerçekleşen içerik 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 bölümüne bakın.
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 Alandaki performans hatalarını ayıklama bölümüne bakın. 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 en yaygın nedenlerinden bazılarını ve bunları önlemek için neler yapabileceğinizi göstereceğiz.
Boyutu 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 dokümanda doğru miktarda yer 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, birim içermez. Bu "piksel" boyutları, tarayıcının sayfanın düzeninde 640x360 boyutunda bir alan ayırmasını sağlar. Gerçek boyutların eşleşip eşleşmediğine bakılmaksızın resim bu alana sığacak şekilde uzatılır.
Duyarlı Web Tasarımı kullanıma sunulduğunda geliştiriciler, width ve height özelliklerini atlamaya ve resimleri yeniden boyutlandırmak için CSS'yi 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, yer açmak için sayfada aşağı kaydırılarak kafa karıştırıcı ve can sıkıcı 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 oranın iki sayıdan oluşması ve iki nokta işaretiyle ayrılması (ör. 16:9 veya 4:3) yaygındır. x:y en boy oranı için, 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:
- yavru köpek.jpg 360 piksel yüksekliğe sahipse, genişlik 360 x (16 / 9) = 640 piksel olur
- puppy.jpg dosyasının genişliği 640 piksel ise 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ı hesaplayıp 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ı
width ve height özelliklerini
kullanırsanız, düzen kaymalarını önlemek için
öncesindeki CSS'yi de dahil ederek, bu özellikleri resim üzerinde
stil sayfası ekleyin.
<!-- 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 yöntem, resim yüklenmeden önceki width ve height özelliklerine dayalı olarak bir en boy oranı hesaplar. Bu bilgileri, sayfa düzeni 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 kullanıcı aracısı stil sayfası yerine HTML işlenirken büyük tarayıcılar tarafından hesaplanır (nedeni hakkında ayrıntılı bilgi için bu yayına bakın). Bu nedenle değer biraz farklı şekilde gösterilir. Örneğin, Chrome bu değeri Nesne panelinin Stil bölümünde şu şekilde gösterir:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
Safari, HTML Özellikleri stil kaynağını kullanarak benzer şekilde davranır. Firefox, hesaplanan bu aspect-ratio değerini Denetleyici 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ğundan önemlidir. Resim boyutları farklıysa bu durum resim yüklendikten sonra da bir miktar düzen kaymasına neden olur. Ancak bu durum, HTML yanlış olması ihtimaline karşı resim en boy oranının kullanılabilir olduğunda kullanılmasını 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ı resimler hakkında 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ı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 belirleriz.
img {
height: auto;
width: 100%;
}
Peki ya duyarlı resimler?
Duyarlı resimlerle çalışırken srcset, tarayıcının aralarında seçim yapmasına izin verdiğiniz resimleri ve her bir resmin hangi boyutta olacağını 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ı, sanat yönünüze göre de 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ıkwidthheight
Belirli bir <picture> öğesi içindeki <source> öğeleri:
<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ştirilmiş öğeler ve diğer geç yüklenen 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'de düzen değişimlerine en çok katkıda bulunan faktörlerden 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 nedeniyle performansı/gelirinizi artırır. Ne yazık ki bu durum, görüntülediğiniz görünür içeriği sayfanın aşağısına iten reklamlar nedeniyle optimum olmayan bir kullanıcı deneyimine 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şik widget'lar sunan platformlar widget'ları için her zaman yer ayırmaz. Bu da widget'lar yüklendiğinde sayfa düzeninde kaymalara neden olur.
Bunlarla başa çıkma teknikleri benzerdir. En önemli farklar, eklenecek içerik üzerinde ne kadar kontrol sahibi olduğunuzdır. 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çerikler içerik akışına yerleştirilirken, ilk düzende bunlar için yer ayrılarak düzen kaymalarından kaçınılabilir.
Bir yaklaşım, alan ayırmak için min-height CSS kuralı eklemektir veya reklamlar gibi duyarlı içerikler için aspect-ratio CSS özelliğini, tarayıcıların boyutları sağlanmış resimler için bu özelliği otomatik olarak kullandığı ş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 bir yüksekliğe sahip olmayan 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ıya stil uygulayabilir veya geçmiş verilere dayalı olarak 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, başlangıç boyutunu kullanılacak en küçük boyuta ayarlayabilir ve daha büyük içerikler için bir miktar değiştirme seviyesini kabul edebilirsiniz. Daha önce önerildiği gibi min-height kullanılması, üst öğenin gerektiği gibi büyümesini sağlar ve boş bir öğenin 0 piksellik varsayılan boyutuna kıyasla düzen kaymalarının etkisini azaltır.
Örneğin, reklam döndürülmezse yer tutucu göstererek ayrılmış alanı daraltmaktan kaçını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ının alt kısmına yerleştirin
Görüntü alanının üst kısmına yakın bir yere 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 kaymalarına neden olur. Ancak görüntü alanının herhangi bir yerine içerik yerleştirilmesi yine de bir kaymaya neden olur. Yerleştirilen içerik için yer ayıramıyorsanız CLS'si üzerindeki etkisini azaltmak üzere bu içeriği sayfanın ilerleyen kısımları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'lar ve formlarla yaşanır:
Bu tür kullanıcı arayüzü olanaklarını görüntülemeniz gerekirse 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, içeriği uygun olduğu yerlerde yer paylaşımı yaparak öğenin doküman akışının bir parçası olmadığından emin olun. 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.
- Kaymanın şaşırmaması için kullanıcıdan yeni içerik yüklemeyi başlatmasını isteyin (örneğin, "Daha fazla yükle" veya "Yenile" düğmesiyle). İçeriğin hemen gösterilmesi için kullanıcı etkileşiminden önce ön beslemesi önerilir. Kullanıcı girişinden sonraki 500 milisaniye içinde gerçekleşen düzen kaymalarının CLS'ye dahil edilmediğini hatırlatmak isteriz.
- İçeriği ekran dışından sorunsuz bir şekilde yükleyin ve kullanıcıya içeriğin kullanılabilir olduğuna dair bir bildirim (ör. "Yukarı kaydır" düğmesi) 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üzeni, boyamayı ve birleştirmeyi tetikler. top ve left özelliklerinin değiştirilmesi, taşınan öğe kendi katmanında olsa bile düzen kaymalarına da neden olur. Bu özellikleri kullanarak animasyon yapmaktan kaçının.
Diğer CSS özellikleri, yeniden düzen oluşturma işlemi 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 şu iki yöntemden biriyle gerçekleştirilir:
- Yedek yazı tipi, web yazı tipiyle değiştirilir ve bu nedenle Stilsiz Metin Flash (FOUT) oluşur.
- "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 metin ön flaş).
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 kaydırılır.
Aşağıdaki araçlar, metin kaymasını en aza indirmenize yardımcı olabilir:
font-display: optional, web yazı tipi yalnızca ilk düzen oluşturulduğunda kullanılabilir olduğu için yeniden düzen oluşturmayı ö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"kullanılarak yedek yazı tipi belirtilmezse Chrome'da varsayılan yazı tipi kullanılır. Bu yazı tipi, Chrome'da "Times" olarak ayarlanır. Bu, varsayılansans-serifyazı tipinden daha kötü bir eşleşme olan serif yazı tipidir. - Geliştirilmiş yazı tipi yedekleri yayınında ayrıntılı olarak açıklanan 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>kullanarak önemli web yazı tiplerini mümkün olduğunca erken yükleyin. Önceden yüklenmiş bir yazı tipinin ilk boyamayı karşılama şansı daha yüksektir. Bu durumda, sayfa düzeni kaydırma olmaz.
Yazı tipiyle ilgili diğer en iyi uygulamaları Yazı tipleri için en iyi uygulamalar bölümünde bulabilirsiniz.
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 başka bir sayfaya gittikten sonra kısa bir süre boyunca tarayıcı belleğinde tutar. Böylece, bu sayfalara geri döndüğünüzde sayfalar tam olarak bıraktığınız gibi geri yüklenir. 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üklemesinin düzen kaymalarıyla karşılaşabileceği anlamına gelse de kullanıcı sayfalara geri döndüğünde aynı düzen kaymalarını tekrar tekrar 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 dikkate değer 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 üzere bu özellikten tam olarak yararlandığınızdan emin olmak için bfcache kullanımını nasıl önleyeceğinizle ilgili daha fazla bilgi edinmek için bfcache kılavuzunu okuyun.
Sonuç
Bu kılavuzun önceki bölümlerinde açıklandığı şekilde CLS'yi tanımlamak ve iyileştirmek için bir dizi teknik vardır. Core Web Vitals'da yerleşik bazı izinler vardır. Bu nedenle, CLS'yi tamamen ortadan kaldıramasanız bile bu tekniklerden bazılarını kullanmak, etkiyi azaltmanıza olanak tanır. Bu sayede, bu sınırların içinde kalıp web sitenizin kullanıcılarına daha iyi bir deneyim sunabilirsiniz.