Kullanıcı deneyimini iyileştirmek için ani düzen değişikliklerinden 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 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 "Ara" 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 CLS'nin 0,1 veya daha az 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, sayfa düzeni değişikliklerinin 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.
- Boyutları olmayan reklamlar, yerleşimler ve iFrame'ler gibi dinamik olarak yerleştirilen içerikler.
- 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ındaki CLS ile sahadaki CLS
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üklediği için 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 Vitals programının resmi 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 ö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ı 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, 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ı genel olarak uyumlu olduğunda bu durum 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 bu 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 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, gecikmeli yüklenmiş içerik için ayrılmış alan olmadan tamamen yüklendiğinde gerçekleşir. Kullanıcı imleci üzerine tuttuğunda içeriğin kayması, yükleme sonrası CLS'nin yaygın nedenlerinden biridir. Bu etkileşimlerden herhangi biri sırasında gerçekleşen içerik kaymaları, 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 hangi koşullarda gerçekleştiğini belirlemek ve olası nedenleri daraltmak için CLS'yi sahada izlemek çok yararlı olabilir. Ç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 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.
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 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 birimleri 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 öğelerini atlamaya başladı ve 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 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ı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.
- 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ı 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">
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 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, 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ı olsa bile resim yüklendikten sonra düzende bir miktar kayma yaşanır. Ancak bu, HTML yanlış olduğunda resim en boy oranının kullanılabilir olduğunda yine 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%;
}
Duyarlı resimler ne olacak?
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 resimde aynı en boy oranının kullanılması 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ı, 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ı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ştirilenler, 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 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 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 en uygun kullanıcı deneyimine yol açmayabilir.
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 içeriklerinin ne kadar büyük olduğundan haberdar değildir. 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üzeninin değişmesine 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, reklam iş ortağı gibi bir üçüncü taraf tarafından eklenirse eklenecek içeriğin tam boyutunu bilemezsiniz ve bu yerleşik içeriklerde gerçekleşen düzen değişikliklerini kontrol edemezsiniz.
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 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 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çerikler için belirli bir düzeyde kaydırma kabul edebilirsiniz. Daha önce önerildiği gibi min-height kullanmak, boş bir öğenin varsayılan boyutu olan 0 piksel boyutuna kıyasla düzen kaymalarının etkisini azaltırken üst öğenin gerektiği gibi büyümesine olanak tanır.
Örneğin, reklam döndürülmezse yer tutucu göstererek ayrılmış alanı daraltmaktan kaçının. Öğeler için ayrılan alanı kaldırmak, 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ç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 eklemek yine de bazı kaymalara 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ıyla karşılaşmış 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ü kolaylıklarını görüntülemeniz gerekiyorsa yüklendiğinde sayfadaki içeriğin beklenmedik bir şekilde kaymasına neden olmaması için önceden görüntüleme alanında yeterli alan ayırın (örneğin, yer tutucu veya iskelet kullanıcı arayüzü kullanarak). 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.
- Kullanıcının yeni içeriğin yüklenmesini başlatmasını sağlayın. Böylece kullanıcı, değişiklikten şaşırmaz (ör. "Daha fazla yükle" veya "Yenile" düğmesi). İçeriğin hemen gösterilmesi için kullanıcı etkileşiminden önce ön beslemesi ö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ın dışına 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üzen, boya 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 oluşturmaktan 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 etkileyemez ve bu nedenle 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ılabilene ve metin görünür hale gelene kadar yedek yazı tipi kullanılarak gösterilir (FOIT: Görünmez metin yanıp sönmesi).
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, metnin 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ı 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 boyamayı karşılama şansı daha yüksektir. Bu durumda, sayfa düzeni kaydırma 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 azaltma
CLS puanlarını düşük tutmak için oldukça etkili bir teknik, web sayfalarınızın geri/ileri önbelleğe (bfcache) 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, birçok 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.