Merhaba arkadaşlar, bugün sizlere performans canavarı bir web uygulamasında başımı çok ağrıtan bir sorunu ve bulduğum neredeyse sihirli çözümü anlatacağım. Uzun, iç içe geçmiş listeler ve karmaşık kart yapılarıyla dolu bir admin paneli üzerinde çalışıyordum. Sayfa ilk açıldığında veya aşağı kaydırıldığında hissedilir bir takılma, özellikle mobil cihazlarda ise adeta bir donma yaşanıyordu. Lighthouse skorları düşük, kullanıcı deneyimi berbattı. İşte tam bu noktada, 
Render Canavarını Dizginlemek maceram başladı.
Araştırmalarım beni klasik lazy loading tekniklerinden öteye, doğrudan tarayıcının render mekanizmasına müdahale eden yeni bir CSS özelliğine götürdü: `content-visibility`. Özellikle
`content-visibility: auto` değeri, bir elementi görünüm alanına (viewport) girene kadar onun render ve layout süreçlerini tamamen atlamasını sağlıyor. Bu, `display: none` gibi elementi tamamen kaldırmak değil, sadece maliyetli işlemleri ertelemek anlamına geliyor.
Peki bunu nasıl uyguladım? Ana fikir, sayfadaki her bir bağımsız içerik bloğuna (örneğin, bir kart, liste öğesi veya bölüm) bu özelliği vermek. İşte benim kullandığım en temiz çözümün kodları:
Buradaki contain-intrinsic-size özelliği ise olmazsa olmaz bir partner. Tarayıcıya, henüz render edilmemiş elementin yaklaşık yüksekliğini (bu örnekte 500px ve 150px) söylüyoruz. Böylece sayfa kaydırma çubuğunun boyutu aniden değişmiyor ve layout shift (yer değiştirme) sorunu yaşanmıyor. Değerleri kendi içeriğinize göre ayarlamalısınız.
Performans Kazanımı ve Sonuçlar
Değişiklikleri yapıp sayfayı yeniden test ettiğimde gözlerime inanamadım. İlk render süresi gözle görülür şekilde düştü. Özellikle aşağı kaydırırken artık takılmalar yok, akıcı bir deneyim var. Lighthouse "Performance" skoru ciddi anlamda yükseldi. En büyük kazanım, görünüm alanı dışında kalan onlarca kompleks elementin layout ve boyama (paint) işlemlerini yapmamak oldu.
Tabii ki dikkat edilmesi gereken noktalar var. Bu özelliği, arama motoru botlarının görmesi gereken veya sayfa ilk açıldığında kritik olan içeriklere (hero bölümü gibi) uygulamamanız gerekiyor. Ayrıca, `contain-intrinsic-size` değerini doğru tahmin etmek önemli, yoksa içerik yüklendiğinde küçük sıçramalar yaşanabilir.
Siz daha önce `content-visibility` özelliğini denediniz mi? Uzun listeler veya karmaşık grid yapılarında performansı artırmak için sizin kullandığınız farklı bir yöntem var mı? Benim gibi render sürelerinden mustarip olan varsa, bu yöntemi kesinlikle denemeli. Yorumlarda tecrübelerinizi paylaşın, tartışalım!
Render Canavarını Dizginlemek maceram başladı.Araştırmalarım beni klasik lazy loading tekniklerinden öteye, doğrudan tarayıcının render mekanizmasına müdahale eden yeni bir CSS özelliğine götürdü: `content-visibility`. Özellikle
`content-visibility: auto` değeri, bir elementi görünüm alanına (viewport) girene kadar onun render ve layout süreçlerini tamamen atlamasını sağlıyor. Bu, `display: none` gibi elementi tamamen kaldırmak değil, sadece maliyetli işlemleri ertelemek anlamına geliyor.Peki bunu nasıl uyguladım? Ana fikir, sayfadaki her bir bağımsız içerik bloğuna (örneğin, bir kart, liste öğesi veya bölüm) bu özelliği vermek. İşte benim kullandığım en temiz çözümün kodları:
CSS:
.content-section {
content-visibility: auto;
/ Elemanın doğal yüksekliğini korumak için şart! /
contain-intrinsic-size: 0 500px;
}
.news-card, .data-row {
content-visibility: auto;
contain-intrinsic-size: 0 150px;
}Buradaki contain-intrinsic-size özelliği ise olmazsa olmaz bir partner. Tarayıcıya, henüz render edilmemiş elementin yaklaşık yüksekliğini (bu örnekte 500px ve 150px) söylüyoruz. Böylece sayfa kaydırma çubuğunun boyutu aniden değişmiyor ve layout shift (yer değiştirme) sorunu yaşanmıyor. Değerleri kendi içeriğinize göre ayarlamalısınız.
Performans Kazanımı ve SonuçlarDeğişiklikleri yapıp sayfayı yeniden test ettiğimde gözlerime inanamadım. İlk render süresi gözle görülür şekilde düştü. Özellikle aşağı kaydırırken artık takılmalar yok, akıcı bir deneyim var. Lighthouse "Performance" skoru ciddi anlamda yükseldi. En büyük kazanım, görünüm alanı dışında kalan onlarca kompleks elementin layout ve boyama (paint) işlemlerini yapmamak oldu.
Tabii ki dikkat edilmesi gereken noktalar var. Bu özelliği, arama motoru botlarının görmesi gereken veya sayfa ilk açıldığında kritik olan içeriklere (hero bölümü gibi) uygulamamanız gerekiyor. Ayrıca, `contain-intrinsic-size` değerini doğru tahmin etmek önemli, yoksa içerik yüklendiğinde küçük sıçramalar yaşanabilir.
Siz daha önce `content-visibility` özelliğini denediniz mi? Uzun listeler veya karmaşık grid yapılarında performansı artırmak için sizin kullandığınız farklı bir yöntem var mı? Benim gibi render sürelerinden mustarip olan varsa, bu yöntemi kesinlikle denemeli. Yorumlarda tecrübelerinizi paylaşın, tartışalım!