Yayınlanma tarihi: 30 Ekim 2024
2024'ün başlarında Core Web Vitals metriği olarak Interaction to Next Paint'in (INP) kullanıma sunulması, oluşturma performansına yönelik daha fazla ilgi uyandırdı. INP'nin bir kısmı, kullanıcı sayfayla etkileşime geçtikten sonra tarayıcıda bir sonraki karenin boyanması için gereken süreye odaklanır. Web sitenizin INP'sini düşük tutmak, kullanıcıların etkileşimlerine mümkün olduğunca hızlı ve sorunsuz bir şekilde yanıt verildiğini hissetmelerini sağlar.
Ayrıca önemli bir nokta, sayfa yüklenirken tamamlanması gereken oluşturma işlemidir. Bu işlem, etkileşimleri daha baştan geciktirebilir. Sayfa yaşam döngüsünün bu önemli aşamasında yapılan iş miktarını azaltmanın yollarını bulmak faydalı olacaktır. Bunu yapmanın yollarından biri CSS content-visibility mülkü kullanmaktır. Bu mülkün Eylül 2024'ten itibaren Temel yeni kullanılabilir olduğunu duyurmaktan mutluluk duyuyoruz.
content-visibility, kullanıcı aracısına öğelerin oluşturulmasını, görüntü alanına yaklaşana kadar ertelemelerini söyleyen bir CSS özelliğidir. Bu, sayfanın ilk yüklenmesinde daha az oluşturma çalışmasının başlatılacağı anlamına geldiğinden, çok sayıda DOM öğesi içeren sayfalar için yararlı olabilir. Bunun yerine, çalışma kullanıcının görmesine gerek kalmadan hemen önce gerçekleşir.
content-visibility: auto parçalanmış içerik alanlarına uygulandığında ilk yüklemede 7 kat oluşturma performansı artışı elde edilir. Daha fazla bilgi için okumaya devam edin.
Ekran dışı öğeler için bu optimizasyonu etkinleştirmek üzere web sitenizin CSS'sinde öğelere content-visibility: auto kuralını uygulayın:
.render-me-later {
content-visibility: auto;
}
content-visibility, CSS kapsayıcı özelliği için tanımlanan davranışlardan bazılarını kullanır.contain CSS kapsayıcılığının amacı, DOM ağacının bölümlerini izole etmektir. Bu sayede oluşturma işlemleri DOM ağacının belirli bir kısmıyla sınırlandırılabilir. Böylece, sayfa düzeni geçersiz kılınır ve yalnızca DOM ağacının bir alt kümesi için yeniden yapılır. Bu özelliği oluşturma performansı için uygularken contain mülkünün çeşitli değerleri ve bunların etkili bir şekilde nasıl kullanılacağı hakkında bilgi sahibi olmanız gerekir.
content-visibility: auto öğelere uygulandığında, öğeler contain mülkü tarafından sağlanan özelliklerin bir kısmını otomatik olarak alır. Sonuç olarak, etkilenen öğeler başlangıçta 0px yüksekliğinde oluşturulur. Bu da öğelerin oluşturulmadığı anlamına gelir.
Ancak bunun bazı yan etkileri vardır. Örneğin, kullanıcı daha önce oluşturulmamış öğelere doğru kaydırdıkça sayfanın kaydırma çubuğu kayabilir ve yüksekliği değişebilir. Bu öğeler, kullanıcının bunları görmesi için tam zamanında oluşturulur. Bu sorunu azaltmak için contain-intrinsic-size özelliğini uygulayın.
content-visibility, yakın zamanda Temel Yeni olarak kullanıma sunulduğundan, yeni mülkü kullanmak için henüz güncellenmemiş tarayıcılara sahip kullanıcılarla ilgili endişeleriniz olabilir. content-visibility bir CSS özelliği olduğundan çok endişelenmenize gerek yoktur. Bunu anlayan tarayıcılar bu özelliği kullanır, anlamayan tarayıcılar ise kullanmaz. Bu, content-visibility'yi destekleyen tarayıcılardan elde edeceğiniz performans avantajlarının yanı sıra sayfaların büyük ölçüde aynı şekilde çalışacağını bekleyebileceğiniz anlamına gelir.
content-visibility, ek bir avantaj sağlar. Sayfa yükleme sırasında oluşturma yükünü azaltmak için bu özelliği kullanabileceğiniz durumlar varsa, sayfalarınızın en çok ihtiyaç duydukları anda mümkün olduğunca fazla işlem gücüne sahip olmasını sağlamak için bu özelliği kullanmanız önerilir. Bu kullanışlı özellik artık Temel Yeni olarak kullanıma sunulduğundan, kullanıcıların gerekli olana kadar önledikleri oluşturma çalışmalarından yararlanabilmeleri için bu özelliği kullanmaktan çekinmeyin.