Merhaba arkadaşlar, bugün başımı çok ağrıtan bir sorunu ve bulduğum temiz çözümü anlatacağım. Bir haber portalı projesinde, içeriğin arasına serpiştirilmiş reklam iframe'leri vardı. Bu iframe'lerin yüklenmesi biraz gecikince, sayfa aniden zıplıyor, kullanıcı okuduğu yeri kaybediyor ve Core Web Vitals metriklerinden Cumulative Layout Shift (CLS) değerimiz berbattı. Bu hatayı ilk gördüğümde kafayı yemiştim, çünkü kullanıcı deneyimi gerçekten kötüydü.
Sorunun Tam Olarak Nerede?
Sorun şuydu: Reklam iframe'i için sadece genişlik (`width: 100%`) belirlemiştim, yüksekliği ise reklamın kendi içeriği belirliyordu. Sayfa ilk render edildiğinde iframe boş olduğu için yüksekliği 0'dı. Sonra reklam script'i çalışıp iframe'i doldurunca, aniden bir yükseklik oluşuyor ve aşağıdaki tüm içerik aşağı itiliyordu. İşte o meşhur "layout shift" dedikleri şey.
Çözüm: Aspect-Ratio ile Yeri Önceden Ayırmak
Eskiden bunun için padding hack'i (örn: `padding-bottom: 56.25%` gibi) kullanılırdı. Ama artık modern CSS bize `aspect-ratio` özelliğini verdi. Bu özellik, bir elementin en-boy oranını tanımlamamızı sağlıyor. Böylece, iframe yüklenmeden önce, onun kaplayacağı alanı "rezerve edebiliyoruz".
İşte benim kullandığım en temiz çözüm. Öncelikle, reklam iframe'ini saran bir wrapper div'i oluşturdum.
Peki Bu Kod Ne Yapıyor?
1. `.reklam-wrapper` sınıfı, genişliği %100 alır ve `aspect-ratio: 16 / 9` ile yüksekliğini otomatik olarak bu orana göre hesaplar. (Örnek: Genişlik 800px ise, yükseklik 450px olur).
2. İçindeki `iframe` ise `position: absolute` ile bu wrapper'ı tamamen doldurur. Artık iframe'in içeriği ne zaman yüklenirse yüklensin, onun için ayrılmış alan değişmeyecek.
3. `background-color` ve `border-radius` sadece görsel olarak daha iyi görünmesi için. Zorunlu değil.
Pratik Uygulama ve Dikkat Edilmesi Gerekenler
Tabii ki her reklam aynı boyutta olmuyor. Reklam sağlayıcınızdan (Google AdSense, mgid vs.) iframe'inizin standart boyut oranını öğrenmeniz gerekiyor. Yaygın oranlar:
- Banner için: `aspect-ratio: 4 / 1`
- Kare için: `aspect-ratio: 1 / 1`
- Dikey banner: `aspect-ratio: 3 / 4`
Eğer birden fazla boyut destekliyorsanız, biraz daha karmaşık CSS (container queries veya media queries) veya reklam script'inizin size döndüğü boyuta göre JavaScript ile `aspect-ratio` değerini güncellemek gerekebilir. Ama çoğu durumda sabit bir oran işinizi görecektir.
Bu küçük değişiklikle, sayfa ilk açıldığında reklam alanı hemen yerini alıyor. Kullanıcı aşağı kaydırdığında içerik zıplamıyor ve CLS skorumuz gözle görülür şekilde düzeldi. Hem SEO hem de kullanıcı memnun.
Siz projelerinizde reklam entegrasyonu yaparken benzer layout shift sorunları yaşadınız mı? Farklı reklam sağlayıcıları için `aspect-ratio` dışında kullandığınız başka yöntemler var mı? Yorumlarda deneyimlerinizi paylaşırsanız çok sevinirim.
Sorunun Tam Olarak Nerede?Sorun şuydu: Reklam iframe'i için sadece genişlik (`width: 100%`) belirlemiştim, yüksekliği ise reklamın kendi içeriği belirliyordu. Sayfa ilk render edildiğinde iframe boş olduğu için yüksekliği 0'dı. Sonra reklam script'i çalışıp iframe'i doldurunca, aniden bir yükseklik oluşuyor ve aşağıdaki tüm içerik aşağı itiliyordu. İşte o meşhur "layout shift" dedikleri şey.
Çözüm: Aspect-Ratio ile Yeri Önceden AyırmakEskiden bunun için padding hack'i (örn: `padding-bottom: 56.25%` gibi) kullanılırdı. Ama artık modern CSS bize `aspect-ratio` özelliğini verdi. Bu özellik, bir elementin en-boy oranını tanımlamamızı sağlıyor. Böylece, iframe yüklenmeden önce, onun kaplayacağı alanı "rezerve edebiliyoruz".
İşte benim kullandığım en temiz çözüm. Öncelikle, reklam iframe'ini saran bir wrapper div'i oluşturdum.
CSS:
.reklam-wrapper {
width: 100%;
aspect-ratio: 16 / 9; / Reklam sağlayıcınızın verdiği oranı buraya yazın /
background-color: #f8f9fa; / Yüklenene kadar boş görünmesin diye hafif bir arkaplan /
border-radius: 8px;
overflow: hidden;
position: relative;
}
.reklam-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}1. `.reklam-wrapper` sınıfı, genişliği %100 alır ve `aspect-ratio: 16 / 9` ile yüksekliğini otomatik olarak bu orana göre hesaplar. (Örnek: Genişlik 800px ise, yükseklik 450px olur).
2. İçindeki `iframe` ise `position: absolute` ile bu wrapper'ı tamamen doldurur. Artık iframe'in içeriği ne zaman yüklenirse yüklensin, onun için ayrılmış alan değişmeyecek.
3. `background-color` ve `border-radius` sadece görsel olarak daha iyi görünmesi için. Zorunlu değil.
Pratik Uygulama ve Dikkat Edilmesi GerekenlerTabii ki her reklam aynı boyutta olmuyor. Reklam sağlayıcınızdan (Google AdSense, mgid vs.) iframe'inizin standart boyut oranını öğrenmeniz gerekiyor. Yaygın oranlar:
- Banner için: `aspect-ratio: 4 / 1`
- Kare için: `aspect-ratio: 1 / 1`
- Dikey banner: `aspect-ratio: 3 / 4`
Eğer birden fazla boyut destekliyorsanız, biraz daha karmaşık CSS (container queries veya media queries) veya reklam script'inizin size döndüğü boyuta göre JavaScript ile `aspect-ratio` değerini güncellemek gerekebilir. Ama çoğu durumda sabit bir oran işinizi görecektir.
Bu küçük değişiklikle, sayfa ilk açıldığında reklam alanı hemen yerini alıyor. Kullanıcı aşağı kaydırdığında içerik zıplamıyor ve CLS skorumuz gözle görülür şekilde düzeldi. Hem SEO hem de kullanıcı memnun.
Siz projelerinizde reklam entegrasyonu yaparken benzer layout shift sorunları yaşadınız mı? Farklı reklam sağlayıcıları için `aspect-ratio` dışında kullandığınız başka yöntemler var mı? Yorumlarda deneyimlerinizi paylaşırsanız çok sevinirim.