# CLS (Cumulative Layout Shift) Nedir?
**URL:** https://emreaykutalp.com/blog/cls-nedir
**Yayın Tarihi:** 3 Aralık 2024
---
**Bilgilendirme**
**CLS (Cumulative Layout Shift)**, bir web sayfası yüklenirken gerçekleşen beklenmeyen görsel kaymaların ölçümüdür. Kullanıcıların sayfa içeriklerini okuma veya etkileşim kurma deneyimini doğrudan etkileyen bu metrik, **Google PageSpeed Insights** ve **Core Web Vitals**'ın temel unsurlarından biridir. CLS, özellikle mobil cihaz kullanıcıları için kritik bir metrik olup, düşük bir CLS puanı kullanıcı deneyimini artırır ve SEO performansını olumlu etkiler.
## **CLS Nasıl Ölçülür?**
CLS, sayfa yüklenmesi sırasında gerçekleşen her bir görsel kaymanın şiddeti ve sıklığının hesaplanmasıyla ölçülür. İki temel bileşen vardır:
1. **Impact Fraction (Etkilenme Oranı):** Görsel kaymanın ekrandaki alanı nasıl etkilediğini ölçer.
2. **Distance Fraction (Mesafe Oranı):** İçeriğin başlangıçtaki konumundan ne kadar hareket ettiğini hesaplar.
**CLS Puanı Hesaplama Formülü:** CLS=Impact Fraction×Distance Fraction\\text{CLS} = \\text{Impact Fraction} \\times \\text{Distance Fraction}CLS=Impact Fraction×Distance Fraction
### **CLS İyi Bir Değer Olmalı:**
- **İyi:** 0 - 0.1
- **Geliştirme Gerekiyor:** 0.1 - 0.25
- **Kötü:** 0.25 ve üstü
## **CLS'yi Düşürmek için Çözüm Önerileri**
CLS’yi optimize etmek için hem acemiler hem de deneyimli yazılımcılara uygun stratejiler sunuyoruz.
### **1\. Görseller için Genişlik ve Yükseklik Özelliklerini Belirleme**
**Acemiler İçin:**
- HTML kodunda **width** ve **height** özelliklerini mutlaka tanımlayın. Bu, tarayıcının yerleşim alanını önceden ayırmasını sağlar.
```
```
**Tecrübeli Yazılımcılar İçin:**
- **Responsive Design** kullanıyorsanız, **CSS Aspect Ratio** özelliğini uygulayın. Görselin oranını koruyarak boyutlandırmayı kolaylaştırır:
```
img {
aspect-ratio: 3 / 2;
}
```
### **2\. Reklamların ve Dinamik İçeriklerin Yerleşimini Sabitleme**
**Acemiler İçin:**
- Reklam öğelerinin boyutlarını CSS ile sabitleyin. Dinamik içeriklerin alanını önceden rezerve edin.
```
.reklam {
width: 300px;
height: 250px;
}
```
**Tecrübeli Yazılımcılar İçin:**
- **Lazy-loading** ve **placeholder (yer tutucu)** kullanarak dinamik içeriklerin yüklenme sırasını kontrol edin.
```
```
### **3\. Yazı Tiplerini Optimize Etmek**
**Acemiler İçin:**
- Yazı tipleri için bir **fallback font** (yedek yazı tipi) belirleyin. Bu, tarayıcının ana yazı tipi yüklenene kadar varsayılan bir yazı tipi kullanmasını sağlar.
```
body {
font-family: Arial, sans-serif;
}
```
**Tecrübeli Yazılımcılar İçin:**
- **Font Display Swap** kullanın, böylece yazı tipi yüklenirken hızlı bir şekilde görüntülenebilir.
```
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap;
}
```
### **4\. Animasyon ve Geçiş Efektlerini İyileştirme**
**Acemiler İçin:**
- CSS animasyonlarında **transform** ve **opacity** kullanmayı tercih edin. Bunlar, tarayıcının GPU optimizasyonlarından faydalanmasını sağlar.
```
.box {
transition: transform 0.5s ease-in-out;
}
```
**Tecrübeli Yazılımcılar İçin:**
- **Composite Layer Animations** oluşturun. Tarayıcı, daha karmaşık animasyonları GPU seviyesinde işler.
```
.box {
will-change: transform, opacity;
}
```
### **5\. Web Fontlarının Yüklenme Sürecini Hızlandırma**
**Acemiler İçin:**
- Yazı tiplerini yerel olarak barındırın veya CDN kullanın. Google Fonts gibi kaynakları kullanırken fontların önceden yüklenmesini sağlayın.
```
```
**Tecrübeli Yazılımcılar İçin:**
- **Resource Hints** (örn. **preload** ve **prefetch**) ile font yüklemesini hızlandırın.
```
```
### **6\. Üçüncü Taraf Scriptlerin Yönetimi**
**Acemiler İçin:**
- Gereksiz scriptleri kaldırın ve yalnızca gerekli olanları yükleyin. Scriptleri sayfanın altında yükleyerek kritik CSS ve HTML'nin önce yüklenmesini sağlayın.
```
```
**Tecrübeli Yazılımcılar İçin:**
- **Lazy-load ve Asynchronous Loading** kullanarak üçüncü taraf scriptlerin performansa etkisini azaltın.
```
```
## **CLS'yi Düşürmenin Faydaları**
1. **Gelişmiş Kullanıcı Deneyimi:**
- Beklenmeyen kaymalar kullanıcıları rahatsız etmez, bu da memnuniyeti artırır.
2. **SEO Performansı:**
- Google, düşük CLS puanına sahip siteleri ödüllendirir.
3. **Mobil Kullanıcılar için Daha İyi Performans:**
- Mobil cihazlarda görsel kaymaların etkisi daha yüksektir. Düşük CLS, mobil deneyimi iyileştirir.
CLS, web performansı ve kullanıcı deneyimi açısından hayati bir PageSpeed metriğidir. Düşük CLS puanı elde etmek için görsellerden yazı tiplerine, animasyonlardan reklam öğelerine kadar birçok öğeyi optimize etmek gerekir. Yukarıda belirtilen adımlar, hem acemiler hem de profesyonel yazılımcılar için kapsamlı bir rehber sunar.
Sitenizin CLS değerini düşürerek hem kullanıcılarınızın memnuniyetini artırabilir hem de arama motoru sıralamalarında avantaj sağlayabilirsiniz.
```
**Tecrübeli Yazılımcılar İçin:**
- **Responsive Design** kullanıyorsanız, **CSS Aspect Ratio** özelliğini uygulayın. Görselin oranını koruyarak boyutlandırmayı kolaylaştırır:
```
img {
aspect-ratio: 3 / 2;
}
```
### **2\. Reklamların ve Dinamik İçeriklerin Yerleşimini Sabitleme**
**Acemiler İçin:**
- Reklam öğelerinin boyutlarını CSS ile sabitleyin. Dinamik içeriklerin alanını önceden rezerve edin.
```
.reklam {
width: 300px;
height: 250px;
}
```
**Tecrübeli Yazılımcılar İçin:**
- **Lazy-loading** ve **placeholder (yer tutucu)** kullanarak dinamik içeriklerin yüklenme sırasını kontrol edin.
```