Cumulative Layout Shift Nedir? CLS Optimizasyonu Nasıl Yapılır?

Last Updated on 19 Ocak 2022 by Yıldırım SERTBAŞ

Cumulative Layout Shift(CLS) Nedir?

Kümülatif düzen kayması olarak Türkçe’ye çevrilen Cumulative Layout Shift (CLS), bir web sayfasının yayında olduğu süre boyunca görsel kararlılığına odaklanan Core Web Vitals metriklerinden ve kullanıcı merkezli performans metriklerinden biridir.

CLS, kullanıcıları rahatsız eden düzen kaymalarını önlemek için önemli bir terimdir. Bir yazıyı okurken veya bir linke tıklamak üzereyken, metin veya link aniden aşağı veya yukarı hareket ederse, kullanıcı için sıkıntı yaratacaktır.

Çoğu zaman, düzen kaymaları sıkıntılıdır, kullanıcı için can sıkıcıdır ve içerik yayıncısına olan güveni azaltır. Ayrıca, bazı durumlarda CLS gerçek mali kayıplara da neden olabileceği gibi müşterilere de istemsiz satın almalar yaratabilir.

Bu nedenle, düşük bir Cumulative Layout Shift puanı hem SEO hem de kullanıcı deneyimi açısından önemlidir. Google Search Console’un Core Web Vitals raporundaki Cumulative Layout Shift (CLS) sorunu, kullanıcıların web sitesini kullanırken düzen değişiklikleri yaşadığını gösteren başka bir sinyaldir.

Google’ın Core Web Vitals gibi kullanıcı merkezli metriklerle web sayfası yükleme performansına dayalı Sayfa Deneyimi Algoritması nedeniyle, Cumulative Layout Shift önemli bir kullanıcı deneyimi, dönüşüm oranı optimizasyonu ve arama motoru optimizasyonu terimi haline geldi. Bu rehberde, CLS’nin tanımını, ölçüm, puanlama ve iyileştirme yöntemlerine ilişkin yanıtları bulacaksınız.

Cumulative Layout Shift (CLS) Neden Oluşur?

Cumulative Layout Shift, aşağıda listelenen çeşitli nedenlerden dolayı gerçekleşebilir.

• Sayfa kaynaklarını eş zamansız olarak web sayfasına yükleme.
• Yükseklik ve genişlik değerleri olmayan videolar, iframe’ler, resimler ve reklamlar
• Dinamik olarak yüklenen içerik
• Web yazı tiplerinin geç görselleştirilmesi, yani FOIT / FOUT

• DOM yüklemeden önce bir ağ onayı beklemek. Ağ onayı cihazların ilk bağlantı denemelerinde bağlantılarda ve ilgili sertifikalarda başarısız olmasıdır.

Cumulative Layout Shift’in oluşmasının bir başka nedeni de, üretim ve geliştirme ortamında yüklenen ve farklı çalışan web sayfası kaynaklarıdır. Çoğunlukla geliştirme sunucusu ve aşamasında, kaynaklar yerel sunucudan ve yerel önbellekten hızlı bir şekilde yüklenir. Bu durum sayfada sorun yokmuş hissi yaratır. Ancak üretim ortamında, kullanıcılar çok daha yavaş yüklenen sayfalara ve ayrıca farklı bir internet bağlantısı ve cihaz varyasyon olanakları ile düzen kaymalarına maruz kalabilirler. Bu durumdan dolayı bir SEO ve geliştirici, gerçekçi simülasyonlar ile sayfa hızı ve kullanıcı deneyimi testleri yapmalıdır.

Cumulative Layout Shift Puanı Nedir?

Cumulative Layout Shift, web sayfasındaki oturum boyunca bir web sayfasındaki her bir düzen kayması durumunun toplamını ölçer. Cumulative Layout Shift (CLS), yüklenen bir web sayfası öğesinin, yüklendiği yere göre farklı bir konuma hareket ettiğinde gerçekleşir.

Daha düşük bir Cumulative Layout Shift puanı için, yüklenen web sayfası bileşenlerinin yüklendikten sonra sabit kalması önemlidir.

İyi Bir Cumulative Layout Shift(CLS) Puanı nedir?

İyi bir Cumulative Layout Shift puanı 0,1’den azdır. Kullanıcıların %75’inden fazlasının 0,1 CLS puanından daha düşük bir oturumu varsa, bu iyi bir CLS puanı olarak kabul edilir.

Düzen Kayması Puanı Nasıl Ölçülür?

Düzen kaymaları, düzen kararsızlığı API’si tarafından ölçülür. Düzen kayması veri girişi, herhangi bir öğe ekrandaki görünür konumunu değiştirdiğinde gerçekleşir.

Yüklemeden sonra konumlarını değiştiren elemanlara kararsız elemanlar denir. Düzen kayması, yalnızca yüklenen bir web sayfası öğesi yüklendikten sonra konumunu değiştirirse gerçekleşir, boyut, stil değişikliği veya yeni eklenen DOM öğelerini hesaba katmaz.

Düzen Kayması(Layout Shift) Puanı Nasıl Hesaplanır?

Tarayıcı, oluşturulan iki kare arasındaki farkı inceleyerek düzen kayması puanını hesaplar. Düzen kaymaları, bir web sayfası öğesinin başlangıç konumu iki çerçeve arasında değiştiğinde meydana gelir. Tarayıcının düzen kayması ölçümü için kullandığı iki yöntem vardır.

Düzen Kayması Puanı = Etki Kesri * Uzaklık Kesri

Cumulative Layout Shift İçin Etki Kesri nedir?

Impact Fraction(etki kesri), ekranın görünen kısmındaki kararsız öğelerin ne kadarının iki kare arasında yer değiştirdiğini hesaplar. Her iki çerçevede hareket eden kararsız elemanın kapladığı toplam alan etki kesridir. Etki kesri, kararsız elemandan etkilenen toplam alanı ölçer.

Örneğin, bir öğe ilk karede görünür ekranın %30’unu, yani görüntü portunu kaplıyorsa ve ikinci karede %30 aşağı kayıyorsa, Etki kesri %60’tır. Bu, 0.60 Cumulative Layout Shift puanı anlamına gelir.

CLS için Uzaklık Kesri Nedir?

Uzaklık kesri, görüntü alanının büyüklüğüne göre kararsız bir öğenin yüzde kaçının hareket ettiğini ölçer. Görüntü alanının sahip olduğu büyük boyut yani uzaklık kesri önemlidir. Örneğin, telefon ekranında %30 aşağı hareket eden kararsız bir öğe için mesafe kesri 0,30’dur.

Uzaklık kesri yatay ya da dikey olarak oluşabilir.

Bu örneğe göre uzaklık kesri şöyle hesaplanır.

Uzaklık kesri: Maksimum hareket mesafesi/Viewport yüksekliği=120/167=0,179

Beklenen ve Beklenmeyen Düzen Değişiklikleri Arasındaki Fark Nedir?

Web sitesindeki kararsız elemanların neden olduğu Kümülatif Düzen Kayması, yalnızca beklenmeyen düzen kaydırma olayları için geçerli olan kullanıcı merkezli bir performans metriğidir. Bununla birlikte, tüm düzen kaymaları olumsuz değildir, bazen web sayfası bileşenleri, kullanıcı ara yüzünde planlanırken başlangıç konumlarını değiştirir.

Kullanıcı Tarafından Oluşturulan Düzen Kaymaları

Düzen kaymalarının hepsi olumsuz ve kullanıcıya kötü deneyim yaşatan düzen kaymaları değildir. Kullanıcının beklediği zamanda oluşan/oluşturulan düzen kaymalarına iyidir. Beklenen ve istenen düzen kaymaları, bir düğmeye tıklanarak, bir bağlantıya tıklanarak, bir arama çubuğuna veri girilerek veya bir haber bültenine kaydolarak tetiklenebilir.

Örnek olarak web sitelerindeki harekete geçirici mesajlar(CTA) barındıran butonları verebiliriz. Bu butonlara tıklandıktan sonra işlemin devam ettiğini belirten yükleme işaretlerinin gösterilmesi kullanıcı deneyimi açısından olumludur. Bu şekilde kullanıcı işlemin devam ettiğini bilir ve bekler.

Eğer bu tip yükleme barları ya da işaretleri gösterilmiyorsa kullanıcı işlemin geçerliliğini sorgulayıp başka bir yere tıklayabilir. Bu da kullanıcı deneyimi açısından kötü bir durumdur.

Doğal ve Pürüzsüz Animasyonlar ve Geçişler

Animasyonlar ve geçişler, iyi yapıldığında, kullanıcıyı şaşırtmadan sayfadaki içeriği güncellemenin harika bir yoludur. Sayfada aniden ve beklenmedik bir şekilde değişen içerik neredeyse her zaman kötü bir kullanıcı deneyimi yaratır.

Ancak bir konumdan diğerine kademeli ve doğal olarak hareket eden içerik, genellikle kullanıcının neler olup bittiğini daha iyi anlamasına ve durum değişiklikleri arasında onlara rehberlik etmesine yardımcı olabilir. Bu da kullanıcıya olumlu bir kullanıcı deneyimi sunar.

Kötü ve İyi Düzen Kaymaları Arasındaki Farklar Nelerdir?

Kötü ve iyi düzen kaymaları arasındaki farklar aşağıdadır.

• Kullanıcıların beklemediği veya onlara sorulmadan oluşturulmadan oluşan düzen kaymaları kötü bir deneyim yaşatır.
• Kötü düzen kaymaları, kullanıcı deneyimine zarar verir ve kullanıcı memnuniyetini azaltır.
• İyi düzen kaymaları durumları kullanıcılar tarafından başlatılabilir.
• İyi düzen kayması olayları kullanıcılar tarafından algılanabilir.
• İyi düzen kaymaları, kullanıcıların sayfayı anlamasını kolaylaştırır.
• Cumulative Layout Shift (CLS) puanı yalnızca kötü düzen kayma durumlarını ölçer.

Cumulative Layout Shift Nasıl Ölçülür?

CLS hem laboratuvar ortamında hem de gerçek kullanıcı deneyimleri dikkate alınarak hesaplanabilir. CLS aşağıdaki araçlarla ölçülebilir.

• Lighthouse
• Pingdom
• WebPageTest
• SpeedCurve
• Dareboost
• GTMetrix
• Chrome Kullanıcı Deneyimi Raporu
• PageSpeed Insights
• Search Console (Core Web Vitals Bölümü)
• Chrome DevTools

CLS Ölçümü İçin Laboratuvar Verisi İle Gerçek Kullanıcı Deneyimi Arasındaki Fark Nedir?

Bu noktada laboratuvar verileri ile yani bir web sayfası yükleme aracıyla ölçülen CLS puanı ile gerçek kullanıcı deneyimine dayanan ölçüm arasında fark bulunur.

Web sayfası yükleme aracı ile CLS ölçümü, sadece ilgili sayfanın yüklenmesi sırasında hesaplanan skoru verir. Gerçek kullanıcı deneyimi ile ölçülen CLS skoru ilgili sayfada kalınan süre boyunca yani o sayfanın kapatılmasına kadar geçen sürede oluşan skordur.

Bu bağlamda gerçek kullanıcı verilerine dayanan CLS ölçümü daha sağlıklı sonuçlar verecektir.

CLS Optimizasyonu Nasıl Yapılır?

Çoğu web sitesi için, aşağıdaki prensiplere uyarak ve bunlara göre optimizasyon çalışması yaparak beklenmedik düzen kaymalarından kaçınabilirsiniz.

• Her zaman resimlerinize ve video öğelerinize boyut özelliklerini ekleyin veya CSS en boy oranı kutuları gibi bir şeyle gerekli alanı ayırın. Bu yaklaşım, görüntü yüklenirken tarayıcının belgede doğru miktarda alan ayırmasını sağlar.
• Eğer boyut özelliklerini giremiyorsanız destekleyen varsayılan bir değer verebilmek için “boyutlandırılmamış medya özellik ilkesini” de kullanabilirsiniz.
• Bir kullanıcı etkileşimine yanıt vermediği sürece, asla mevcut içeriğin üzerine içerik eklemeyin.
• Anlamlı animasyonlar kullanın.

Yükseklik ve Genişlik Değeri Olmayan Resimler

Resimlerinize ve video öğelerinize her zaman genişlik ve yükseklik boyutu özelliklerini ekleyin. Alternatif olarak, gerekli alanı CSS en boy oranı kutuları ile ayırın. Bu yaklaşım, görüntü yüklenirken tarayıcının belgede doğru miktarda alan ayırmasını sağlar.

Web’in ilk günlerinde geliştiriciler, tarayıcı görüntüleri almaya başlamadan önce sayfada yeterli alan ayrılmasını sağlamak için <img> etiketlerine genişlik ve yükseklik nitelikleri eklerdi. Bu, yeniden akış ve yeniden yerleşimi en aza indirecektir.

<img src=”ornek.jpg” width=”640″ height=”360″ alt=”ornek resim” />

Yukarıdaki genişlik ve yüksekliğin birimler içermediğini fark edebilirsiniz. Bu “piksel” boyutları, 640×360’lık bir alanın ayrılmasını sağlayacaktır. Görüntü, gerçek boyutların eşleşip eşleşmediğine bakılmaksızın bu alana sığacak şekilde uzar.

Duyarlı Web Tasarımı tanıtıldığında, geliştiriciler genişlik ve yüksekliği atlamaya başladılar ve bunun yerine görüntüleri yeniden boyutlandırmak için CSS kullanmaya başladılar.

img {
width: 100%; /* or max-width: 100%; */
height: auto;
}

Bu yaklaşımın bir dezavantajı, bir görüntü için yalnızca indirmeye başladıktan sonra alan ayrılabilmesi ve tarayıcının boyutlarını belirleyebilmesidir. Görüntüler yüklendiğinde, her görüntü ekranda göründüğünde sayfa yeniden akar. Metnin aniden ekranda aşağı inmesi yaygınlaştı. Bu hiç de harika bir kullanıcı deneyimi değildi.

En boy oranı burada devreye girer. Bir görüntünün en boy oranı, genişliğinin yüksekliğine oranıdır. Bunun iki nokta üst üste ile ayrılmış iki sayı olarak ifade edildiğini görmek yaygındır (örneğin 16:9 veya 4:3). Bir x:y en-boy oranı için, görüntü x birim genişliğinde ve y birim yüksekliğindedir.

Bu, boyutlardan birini bilirsek, diğerinin belirlenebileceği anlamına gelir. 16:9 en boy oranı için:

Eğer puppy.jpg 360 piksel yüksekliğe sahipse, genişlik 360 x (16 / 9) = 640 pikseldir
Eğer pupy.jpg 640 piksel genişliğe sahipse, yükseklik 640 x (9 / 16) = 360 pikseldir

En boy oranını bilmek, tarayıcının yükseklik ve ilgili alan için yeterli alanı hesaplamasına ve ayırmasına olanak tanır.

Modern uygulamalarda, CLS’yi azaltmak için HTML dokümanındaki yükseklik ve genişlik niteliklerini kullanmak daha iyidir. Aynı zamanda, tarayıcılar tarafından kullanılan User-agent Stil sayfaları genellikle boyutsuz ve en-boy oranına sahip görüntüler için eğitilmiştir.

Bir görüntüyü container genişliği kadar tutmak istiyorsanız, “width: 100%; yükseklik: otomatik;” Değerleri kullanabilirsiniz. Böylece “auto” ile yükseklik değeri hesaplanarak CSS belgesi veya ilgili HTML kod satırı okunarak CLS’nin önüne geçilebilir.

img {
height: auto;
width: 100%;
}

Responsive İmage Kullanarak CLS Nasıl Önlenir?

Duyarlı görüntülerle çalışırken srcset, tarayıcının aralarından seçim yapmasına izin verdiğiniz görüntüleri ve her görüntünün boyutunu tanımlar. genişlik ve yükseklik özniteliklerinin ayarlanabilmesini sağlamak için her görüntü aynı en boy oranını kullanmalıdır.

<img
width=”1000″
height=”1000″
src=”ornek-1000.jpg”
srcset=” ornek -1000.jpg 1000w, ornek -2000.jpg 2000w, ornek -3000.jpg 3000w”
alt=” ornek resim”
/>

Bu örnekte, tarayıcı “ornek-1000.jpg” görüntüsünü 1000 piksel geniş ekrana indirir. Yükseklik değeri de ilgili görüntü alanı genişliğine göre belirlenen oranda değişir.

Kümülatif Düzen Kayması ve Reklamlar

Reklamlardan Kaynaklanan CLS Sorunu Nasıl Çözülür?

Reklamlar, web’deki düzen değişikliklerine en büyük katkıda bulunanlardan 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ı/geliri artırır. Ne yazık ki bu, görüntülediğiniz görünür içeriği sayfanın aşağısına iten reklamlar nedeniyle iyi olmayan bir kullanıcı deneyimine yol açarlar.

Reklam yaşam döngüsü boyunca, birçok noktada düzen kaymasına neden olabilir:

• Reklamın bir container içerisine dinamik olarak eklenmesi ve yine reklamın container boyutlarını dinamik olarak değiştirmesi CLS sorununa neden olur.
• Reklamı barındıran div, container sayfaya dinamik olarak eklenirse sayfadaki diğer elemanların kaymasına neden olur.
• Reklam etiketi sistemi reklamı barındıran container’ı sıfırladığında CLS’yi tetikleyebilir.
• Reklam kapsayıcısının birinci taraf bir kodla yeniden boyutlandırılması CLS’nin artmasına neden olabilir.

Reklamlar için Statik Slot Oluşturma

Etiket kitaplığınıza iletilen aynı boyutlara sahip DOM öğelerini statik olarak biçimlendirin. Bu, kitaplığın yüklendiğinde düzen kaymaları getirmemesini sağlamaya yardımcı olabilir. Bunu yapmazsanız, kitaplık sayfa düzeninden sonra DOM öğesinin boyutunu değiştirebilir. Bu süreçte, yüklenme olasılığı en yüksek olan reklamların boyutları hesaplanarak daha büyük bir kapsayıcı belirlenir.

Ayrıca daha küçük reklam sunumlarının boyutlarını da göz önünde bulundurun. Daha küçük bir reklam sunuluyorsa, yayıncı, düzen kaymalarını önlemek için (daha büyük) kapsayıcının stilini belirleyebilir. Bu yaklaşımın dezavantajı, boş alan miktarını artıracak olması ve beyaz alan bırakmasıdır, bu nedenle buradaki seçimi aklınızda bulundurun.

Reklam Yerleşimini Sayfa Başının Dışında Tutmak

Görünüm alanının üst kısmına yakın olan reklamlar, ortadakilerden daha büyük bir düzen kaymasına neden olabilir. Bunun nedeni, en üstteki reklamların genellikle aşağıda daha fazla içeriğe sahip olmasıdır, yani reklam bir kaymaya neden olduğunda daha fazla öğenin hareket etmesidir. Bunun tersine, görünümün ortasına yakın olan reklamlar, üzerindeki içeriğin hareket etme olasılığı daha düşük olduğu kadar çok öğeyi kaydırmayabilir.

CLS İçin Iframe ve Embed’in Önemi

Embed(gömülü) widget’lar, sayfanıza taşınabilir web içeriği yerleştirmenize olanak tanır (örneğin, YouTube’dan videolar, Google Haritalar’dan haritalar, sosyal medya gönderileri vb.). Bu embedler çeşitli şekillerde olabilir:

• HTML’yi değiştiren spesifik bir JavaScript etiketi
• Satır içi(inline) bir HTML snippet’i
• iframe embed
• Spesifik bir HTML div’i.

Bu yerleştirmeler genellikle bir embedin ne kadar büyük olacağının önceden farkında değildir (örneğin, bir sosyal medya gönderisi durumunda – gömülü bir görseli var mı? video mu? birden çok metin satırı var mı?). Sonuç olarak, embedler sunan platformlar, yerleştirmeleri için her zaman yeterli alan ayırmaz ve nihayet yüklendiklerinde düzenin değişmesine neden olabilirler.

Iframe ve Embed için CLS Nasıl Önlenir?

Bu soruna geçici bir çözüm bulmak için, bir yer tutucu veya yedeğe sahip yerleştirmeler için yeterli alanı önceden hesaplayarak CLS’yi en aza indirebilirsiniz. Embedler için kullanabileceğiniz bir iş akışı:

• Tarayıcı geliştirici araçlarınızla inceleyerek son yerleştirmenizin yüksekliğini elde edin
• Embed bir kere yüklendiğinde, içerilen iframe, içeriğinin sığması için yeniden boyutlandırılacaktır.

Boyutları not edin ve embede göre bir yer tutucu şekillendirin. Medya sorgularını kullanarak farklı form faktörleri arasındaki reklam/yer tutucu boyutlarındaki küçük farklılıkları hesaba katmanız gerekebilir.

Dinamik İçerik ve CLS Optimizasyonu

Bir siteyi yüklemeye çalışırken görünümün üstünde veya altında açılan kullanıcı arayüzü nedeniyle muhtemelen düzen değişiklikleri yaşadınız. Reklamlara benzer şekilde, bu genellikle sayfa içeriğinin geri kalanını değiştiren başlıklar ve formlarda olur.

• “Email listemize kayıt olun uyarıları yapan pop-up’lar”
• “Alakalı içeriklerimize göz atın uyarısı yapan pop-up’lar”
• “Android veya IOS uygulamamızı indirin uyarısı veren pop-up’lar”
• “Çerez, bildirim uyarıları”
• “Size özel teklifler, indirimler pop-up’ları” (Genellikle e-ticaret)
• “Şimdi Üye olun, Kupon Kodu vb pop-up’lar”

Bu tür kullanıcı arabirimi elemanları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ı arabirimi kullanarak), böylece yüklendiğinde sayfadaki içeriğin şaşırtıcı bir şekilde kaymasına neden olmaz. .

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ı yayın içeriğini güncellerken. Bu durumlarda beklenmedik düzen kaymalarını önlemenin birkaç yolu vardır:

• Eski içeriği sabit boyutlu bir container içinde 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çeriği yüklemesini başlatmasını sağlayın, böylece değişime şaşırmasınlar (örneğin, “Daha fazla yükle” veya “Yenile” düğmesi ile). İçeriğin hemen görünmesi için kullanıcı etkileşiminden önce içeriğin önceden getirilmesi önerilir. Bir hatırlatma olarak, kullanıcı girişinin 500 ms’si içinde meydana gelen düzen kaymaları CLS’ye sayılmaz.
• İçeriği sorunsuz bir şekilde ekran dışına yükleyin ve kullanıcıya içeriğin kullanılabilir olduğuna dair bir bildirim yerleştirin (örneğin, bir “Yukarı Kaydır” düğmesi ile).

Web Yazı Tipleri, FOUT, FOIT ve Cumulative Layout Shift

Web yazı tiplerini indirmek ve işlemek, düzenin iki şekilde kaymasına neden olabilir:

• Sayfada kullanılan asıl font dosyası yüklenene kadar fallback (geçici, yedek) olarak çağrılan font dosyasının yüklenen dosya ile değişiminde ortaya çıkan kayma (FOUT – Flash of Unstyled Text)
• Sayfada kullanılacak olan asıl font dosyası yüklenene kadar yedek bir font kullanılmaz ise asıl font’un kullanıldığı alanlar görünmez olur. Devamında yüklenen asıl font dosyası ile görünmeyen alanlar yükleneceğinden sayfada düzen kayması yaşanır ve CLS tetiklenir. (FOIT – Flash of Invisible Text)

Flash of Invisible Text(FOIT) Sorununun Çözümü

Sayfanın yükleme aşamasında asıl font dosyası yüklenene kadar geçici bir yedek (fallback) font dosyası çağrılmadığında font dosyasının kullanıldığı alanlar kullanıcı için görünmez olur. Bu sorunun önüne geçmek için font’un çağrıldığı CSS dosyası içerisinde font-display: kısmına swap; eklemesi yapabilirsiniz.

Font-display: swap; şeklinde kullanabilirsiniz.

Flash of Unstyled Text(FOUT) Sorunun Çözümü

Web sitesinde asıl kullanılan fontun yüklenmesi sürecinde yedekte(fallbcak) duran font dosyasının aslı ile değiştiği durumlarda ortaya ani görüntü değişimi görsel düzen kaymasına verilen isimdir. Asıl font ile yedek olarak çağrılan fontun arasındaki yapısal farklar mevcut ise CLS’yi tetikleyen bir sorun olarak karşınıza çıkar.

Bu sorunun çözümüne ilişkin aşağıdaki aksiyonlar alınabilir:

• Asıl font ile çağrılan yedek font arasında çok fazla yapısal fark olmaması sağlanır.
• Yedek font dosyasının stillerini(yazı tipi boyutu, satır yüksekliği, harf mesafesi vb), sayfada geç yüklenen ya da eşzamansız yüklenen font dosyasının özelliklerine benzeyecek şekilde ayarlayın.

Chrome 83’ten itibaren aşağıdakiler de önerilir.

• <link rel=preload> kullanılması: önceden yüklenmiş bir yazı tipinin ilk boyamayı karşılama şansı daha yüksektir, bu durumda düzen kayması olmaz.
• <link rel=preload> ve font-display: optional birlikte kullanılması

Animasyonlar ve Kümülatif Düzen Kaydırma

CSS özellik değerlerinde yapılan değişiklikler, tarayıcının bu değişikliklere tepki vermesini gerektirebilir. box-shadow ve box-sizing gibi bir dizi değer yeniden yerleşimi, boyamayı ve birleştirmeyi tetikler. Bir dizi CSS özelliği daha az maliyetli bir şekilde değiştirilebilir.

Yararlanılan Kaynaklar: https://web.dev/optimize-cls/