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 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, haberleri okurken veya bu "Ara" düğmesini tıklamaya çalışırken, web'de çok yaygındır. "Alışveriş Sepetine Ekle" düğmelerini kullanın. Bu tür deneyimler görsel açıdan rahatsız edici ve sinir bozucu. 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:
- Boyutu olmayan resimler.
- Boyutsuz reklamlar, yerleştirmeler 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ümlerine bakmaya başlamadan önce CLS puanınızı ve değişimlerin 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.
Başlangıçta sayfayı oluşturmak için gerekli tüm kaynaklar getirildiği için düzen kaymaları, sayfa yükleme sırasında çok görülür. Ancak, düzen kaymaları ilk yüklemeden sonra da gerçekleşebilir. Yükleme sonrası kaymaların çoğu kullanıcı etkileşimi nedeniyle gerçekleşebilir ve bu nedenle beklenen değişimler olduğundan (etkileşimden sonraki 500 milisaniye içinde meydana geldiği sürece) CLS puanının dışında tutulur.
Bununla birlikte, uygun bir etkileşimin olmadığı durumlarda, örneğin sayfada daha fazla gezindiğinizde ve geç yüklenen içeriğin yüklendiği için kaymalara neden olan, kullanıcının beklemediği diğer yükleme sonrası kaymalar dahil edilebilir. 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 bakın. 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ının genel olarak uyumlu olması, 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 kaymalarını da vurgular. 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 "Şuradan taşındı:" gibi ayrıntıları göstererek etkilenen öğeleri ayrıntılı olarak inceleyebilirsiniz ve "şuraya taşındı:" giriş olduğunu varsayalım.
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. Saha verileri olmadan bu değişimleri takip etmek zor olabilir. Alan verilerini toplama hakkında bilgi edinmek için Alandaki CLS öğelerini ölçme başlıklı makaleyi inceleyin.
Web Vitals 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ıyı kullanmaya alternatif olarak, konsola yapıştırılan bir Performans Gözlemcisi'ni kullanarak düzen kaymalarını kaydederken web sayfanıza göz atabilirsiniz.
Vardiya izlemeyi ayarladıktan sonra, yükleme sonrası CLS sorunlarını tekrar 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 biri sırasında herhangi bir içerik kayması, 500 milisaniye içinde olsa bile beklenmedik bir durum 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ı uygulayarak Lighthouse'un zaman aralıkları kullanıcı akış modu'nu da normal kullanıcı akışlarının gerilemesini önlemek için kullanabilirsiniz.
Alandaki CLS öğelerini ölç
CLS'nin sahada izlenmesi, CLS'nin hangi koşullarda gerçekleştiğini belirleme ve olası nedenleri bulma açısından paha biçilmez bir rol oynayabilir. Çoğu laboratuvar aracında olduğu gibi saha araçları da yalnızca değişen öğeleri ölçer. Ancak bu ölçüm, genellikle sorunun nedenini belirlemek için yeterli bilgi sağlar. Hangi sorunların düzeltilmesi en yüksek önceliğe sahip olduğunu 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 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ına ve bunlardan kaçınmak için neler yapabileceğinize değineceğiz.
Boyutu olmayan resimler
Resim ve video öğelerinize her zaman width ve height boyut özelliklerini ekleyin. Alternatif olarak, gerekli alanı CSS aspect-ratio veya benzer bir CSS ile ayırabilirsiniz. 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ı resimleri getirmeye başlamadan önce sayfada yeterli alanın ayrılmasını sağlamak için <img> etiketlerine width ve height özelliklerini ekliyordu. Bu da yeniden düzenlemeyi ve yeniden düzeni en aza indirir.
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
Bu örnekteki width ve height, birim içermez. Bu "piksel" tarayıcının sayfa 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 özelliklerini atlamaya ve resimleri yeniden boyutlandırmak için CSS'yi kullanmaya başladı:
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
Bununla birlikte, resim boyutu belirtilmediğinden, tarayıcı resmi indirmeye ve boyutlarını belirlemeye başlayana 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, genellikle iki nokta ile ayrılmış iki sayı olarak ifade edilir (ör. 16:9 veya 4:3). 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
- 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ı ayarlamak için modern en iyi uygulama
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, düzen hesaplamasının en başında sağlar. Resmin belirli bir genişlikte olduğu söylendiğinde (örneğin, width: 100%), yüksekliği 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 de HTML Özellikleri stilde bir kaynak 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ılan değerden farklı olsa bile, boyut sağlanmamış bir resmin 0x0 varsayılan boyutundan daha az düzen kaymasına neden olur.
Duyarlı resimler konusunda daha kapsamlı bir yaklaşımla en boy oranı konusunda mükemmel bir inceleme için medya en boy oranlarıyla rahatsız edici olmayan sayfa yükleme bölümüne bakın.
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ı 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 bağlı olarak, en boy oranı da resim yönü kullanın. Örneğin, dar kapsamlı bir görünüm için bir resmin kırpılmış ve resmin tamamını masaüstünde görüntüleyin:
<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 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 videoları, Google Haritalar'dan haritalar ve sosyal medya yayınları gibi taşınabilir web içeriklerini 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. Bu durum, nihai olarak yüklendiklerinde düzen kaymalarına 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ırın
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 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 amacıyla 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ı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 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, 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 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'larda ve formlarda 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, mantıklı olduğu yerlerde içeriği yer paylaşımlı olarak ekleyerek öğenin belge 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 yayınına bakın.
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. Böyle durumlarda düzen kaymalarını önlemenin birkaç yolu vardır:
- Eski içeriği, sabit boyutlu bir kapsayıcı içindeki yeni içerikle değiştirin veya geçişten sonra bir rulo kullanarak eski içeriği kaldırın. Yeni içerik gönderilirken 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.
- 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ği, anında gösterilmesi için kullanıcı etkileşiminden önce önceden getirmeniz ö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ışı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üzeni, boyamayı 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 yapmaktan kaçının.
Diğer CSS özellikleri, yeniden düzenler tetiklenmeden değiştirilebilir. Buna, öğeleri çevirmek, ölçeklendirmek, döndürmek veya eğmek için transform animasyonlarının kullanılması dahildir.
translate kullanan birleştirilmiş animasyonlar diğer öğeleri etkileyemediğinden CLS'ye dahil edilmez. Birleştirilmemiş animasyonlar da yeniden düzene neden olmaz. Düzen kaymalarını hangi CSS özelliklerinin tetiklediği hakkında daha fazla bilgi edinmek için Yüksek performanslı animasyonlar konusuna bakın.
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:
- 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ı 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. - Font Upload API, gerekli yazı tiplerini almak için gereken süreyi 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 boyamayla eşleşme olasılığı daha yüksektir. Bu durumda, düzen kayması 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 çok etkili bir teknik de web sayfalarınızın geri-ileri önbellek (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, daha önce belirtilen nedenlerden dolayı normalde yükleme sırasında görülebilecek herhangi bir kayma olmadan, tamamen yüklenen sayfanın anında kullanılabilir olduğu anlamına gelir.
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 hedeflemelisiniz. Ancak bunun tamamen çözülmesi daha zor olduğunda, en azından Bfcache gezinmelerinde bunlardan kaçınarak 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 göze çarpan iyileşmeler 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.