“content-visibility” özelliği, sayfa yüklemelerini hızlandırmak ve performansı artırmak için sunulan bir CSS özelliğidir. belirli öğelerin ve içeriğin sayfa yüklendiğinde otomatik olarak gecikmeli olarak yüklenmesine izin verir. Bu sayede, sayfa yükleme sürelerini optimize ederek kullanıcıların daha hızlı bir şekilde içeriğe erişmelerini sağlar.

“content-visibility” Nasıl Çalışır?

Bu özellik, “auto” ve “hidden” olmak üzere iki değer alır. “auto” değeri, tarayıcıya içeriğin otomatik olarak gecikmeli yüklenmesine izin verirken, “hidden” değeri öğenin yüklenmemesini sağlar. Özellikle görsel açıdan karmaşık içeriklerin olduğu sayfalarda, “content-visibility” ile “hidden” değeri kullanarak yükleme sürelerini önemli ölçüde azaltmak mümkündür. Böylece kullanıcılar, sayfa yükleme sürelerindeki farkı açıkça hissederler.

Web Performansına Etkisi

Duyarlı ve hızlı bir kullanıcı deneyimi, web sitelerinin başarısında kritik bir rol oynar. “content-visibility”, sayfa yükleme sürelerini optimize ederek web performansını önemli ölçüde artırır. Uzun sayfalarda içeriğin yüklenmesini geciktirerek, sayfanın ilk yükleme süresini düşürür ve kullanıcıların daha hızlı bir şekilde içeriğe erişmesini sağlar. Araştırmalar, “content-visibility” özelliğinin sayfa yükleme sürelerinde %25’e varan performans artışları sağladığını gösteriyor. Bu da web sitenizin kullanıcılar arasında daha cazip ve rekabetçi bir konuma gelmesini sağlar.

Temel Kullanım

.lazy-loaded {
  content-visibility: auto;
  contain-intrinsic-size: 100px 100px; /* Öğenin varsayılan boyutunu belirler */
}

Görsellerde Kullanım

“content-visibility” ile resimlerin gecikmeli olarak yüklenmesini sağlayarak sayfa yüklemelerini hızlandırabiliriz.

.lazy-image {
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;
}

Liste ve tablolar

.lazy-list {
  content-visibility: auto;
  contain-intrinsic-size: 400px;
}
.lazy-table {
  content-visibility: auto;
}

Önemli içerik için kullanım

.lazy-important-content {
  content-visibility: visible;
}

“content-visibility” özelliği, web geliştiricilerin sayfa yükleme performansını optimize etmelerini sağlayan güçlü bir araçtır. Gecikmeli yükleme ile sayfa yükleme sürelerini azaltırken, önemli içerikleri hemen yüklemek için “content-visibility: visible;” değeri kullanılabilir. Bu sayede yükleme önceliklerinizi css ile ayarlayabilirsiniz. Web sitenizin performansını optimize edebilir ve kullanıcıların daha hızlı ve akıcı bir deneyim yaşamasını sağlayabilirsiniz.

✨