content-visible: oluşturma performansınızı artıran yeni CSS özelliği

Ekran dışındaki içeriklerin oluşturulmasını atlayarak ilk yükleme süresini iyileştirin.

Jeremy Wagner

Una Kravets

Vladimir Levin

Chromium 85'te kullanıma sunulan content-visibility özelliği, sayfa yükleme performansını iyileştirmede en etkili yeni CSS özelliklerinden biri olabilir. content-visibility, kullanıcı aracısının düzen ve boyama da dahil olmak üzere bir öğenin oluşturma işlemini ihtiyaç duyulana kadar atlamasını sağlar. Oluşturma işlemi atlandığından, içeriğinizin büyük bir kısmı ekran dışındaysa content-visibility özelliğinden yararlanmak ilk kullanıcının çok daha hızlı yüklenmesini sağlar. Ayrıca, ekrandaki içerikle daha hızlı etkileşim sağlar. Çok kullanışlı.

Tarayıcı desteği

content-visibility, CSS Kapsayıcı Spesifikasyonu kapsamındaki temel öğeleri kullanır. content-visibility şimdilik yalnızca Chromium 85'te desteklense de (ve Firefox için "prototip oluşturmaya değer" olarak kabul edilse de) Kapsayıcı Spesifikasyonu çoğu modern tarayıcıda desteklenmektedir.

CSS Kapsamı

CSS'yi kapsamanın temel ve kapsayıcı hedefi, sayfanın geri kalanından bir DOM alt ağacının öngörülebilir şekilde izole edilmesini sağlayarak web içeriğinin oluşturma performansını iyileştirmektir.

Temelde bir geliştirici, tarayıcıya sayfanın hangi bölümlerinin bir içerik grubu olarak kapsüllendiğini söyleyebilir. Böylece, tarayıcılar alt ağacın dışında bir durumla karşılaşmadan içerik hakkında akıl yürütebilir. Hangi içerik bitlerinin (alt ağaçların) yalıtılmış içerik barındırdığını bilirseniz tarayıcı, sayfa oluşturma için optimizasyon kararlarını verebilir.

Her biri contain CSS özelliği için potansiyel bir değer olan dört tür CSS kapsamı vardır. Bu değerler, boşlukla ayrılmış bir değer listesinde birleştirilebilir:

• size: Bir öğenin boyut içermesi, öğe kutusunun alt öğelerini incelemeye gerek kalmadan yerleştirilmesini sağlar. Bu, ihtiyacımız olan tek şey öğenin boyutuysa alt öğelerin düzenini atlayabileceğimiz anlamına gelir.
• layout: Düzen kapsamı, alt öğelerin sayfadaki diğer kutuların dış düzenini etkilemediği anlamına gelir. Bu, tüm yapmak istediğimiz başka kutular yerleştirmekse potansiyel olarak alt öğelerin düzenini atlamamıza olanak tanır.
• style: Stil sınırlama, yalnızca alt öğelerinden daha fazlası üzerinde etkileri olabilecek özelliklerin (ör. sayaçlar) öğe dışına çıkmamasını sağlar. Bu, diğer öğeler üzerinde stilleri hesaplamak istediğimizde alt öğeler için stil hesaplamasını potansiyel olarak atlamamıza olanak tanır.
• paint: Boya kapsama alanı, kapsayıcı kutunun alt öğelerinin sınırlarının dışında görüntülenmemesini sağlar. Öğeden hiçbir şey görünür şekilde taşamaz ve bir öğe ekran dışındaysa veya başka bir şekilde görünür değilse alt öğeleri de görünür olmaz. Bu, öğe ekran dışındaysa alt öğeleri boyamayı potansiyel olarak atlamamıza olanak tanır.

content-visibility ile oluşturma işlemi atlanıyor

Tarayıcı optimizasyonları yalnızca uygun bir grup belirtildiğinde devreye girebileceği için hangi kapsama değerlerinin kullanılacağını belirlemek zor olabilir. Neyin en iyi sonucu verdiğini görmek için değerler üzerinde değişiklikler yapabilir veya gerekli kapsayıcıyı otomatik olarak uygulamak için content-visibility adlı başka bir CSS özelliğini kullanabilirsiniz. content-visibility, bir geliştirici olarak en az çabayla tarayıcının sağlayabileceği en yüksek performans kazancını elde etmenizi sağlar.

İçerik görünürlüğü özelliği birden fazla değer kabul eder, ancak auto anında performans iyileştirmeleri sağlar. content-visibility: auto içeren bir öğe layout, style ve paint kapsamasını kazanır. Öğe ekran dışındaysa (ve kullanıcıyla başka bir şekilde alakalı değilse) ilgili öğeler, alt ağacında odaklanılan veya seçime sahip olanlar olur. Aynı zamanda size hücresini de kazanır (ve içeriğini boyamayı ve isabet testini durdurur).

Bunun anlamı nedir? Kısacası, öğe ekran dışındaysa alt öğeleri oluşturulmaz. Tarayıcı, öğenin boyutunu, içeriğini dikkate almadan belirler ve orada durur. Öğenin alt ağacının stil ve düzeni gibi oluşturma işlemlerinin çoğu atlanır.

Öğe görüntü alanına yaklaştıkça tarayıcı artık size kapsayıcısını eklemez ve öğenin içeriğini boyayıp vurarak test etmeye başlar. Bu, oluşturma işinin kullanıcı tarafından görülmek üzere tam zamanında yapılmasını sağlar.

Erişilebilirlikle ilgili not

content-visibility: auto özelliğinin özelliklerinden biri, ekran dışındaki içeriğin belge nesne modelinde ve dolayısıyla erişilebilirlik ağacında (visibility: hidden ürününün aksine) kullanılabilir durumda kalmasıdır. Bu, içeriğin yüklenmesini beklemeden veya oluşturma performansından ödün vermeden sayfada arama yapılabilecek ve içeriklere gidilebileceği anlamına gelir.

Ancak bunun bir diğer tarafı da, display: none veya visibility: hidden gibi stil özelliklerine sahip önemli nokta öğelerinin, ekran dışındayken erişilebilirlik ağacında da görünmesidir. Bunun nedeni, tarayıcı bu stilleri görüntü alanına girene kadar oluşturmayacaktır. Bunların erişilebilirlik ağacında görünmesini ve karışıklığa neden olmasını önlemek için aria-hidden="true" eklediğinizden de emin olun.

Örnek: seyahat blogu

Bir seyahat blogu genellikle birkaç resim ve bazı açıklayıcı metinler içeren bir dizi öykü içerir. Tipik bir tarayıcıda seyahat bloguna gittiğinde şu şekilde olur:

1. Sayfanın bir bölümü, gerekli kaynaklarla birlikte ağdan indirilir.
2. Tarayıcı, içeriğin kullanıcı tarafından görülüp görülmediğini dikkate almadan, sayfanın tüm içeriğini stilize eder ve düzenler.
3. Tarayıcı, tüm sayfa ve kaynaklar indirilene kadar 1. adıma geri döner.

2. adımda, tarayıcı tüm içeriği işlerken değişmiş olabilecek şeyleri arar. Yeni öğelerin tarzını ve düzenini, ayrıca yeni güncellemeler sonucunda kaymış olabilecek öğeleri günceller. Bu, işin oluşturulmasıdır. Bu işlem zaman alır.

Şimdi blogdaki her bir hikayeye content-visibility: auto eklemeniz durumunda ne olacağını düşünün. Genel döngü aynıdır: Tarayıcı, sayfanın parçalarını indirir ve oluşturur. Ancak aradaki fark, 2. adımda yaptığı iş miktarındadır.

İçerik görünürlüğüyle, o anda kullanıcı tarafından görülebilen tüm içeriklerin (ekranda yer alan) stilini belirler ve düzenler. Bununla birlikte, tamamen ekran dışında olan hikayeyi işlerken tarayıcı, oluşturma işlemini atlar ve yalnızca öğe kutusunun stilini belirler.

Bu sayfa yükleme performansı, tam ekran hikayeleri ve ekran dışındaki hikayelerin her biri için boş kutular içeriyormuş gibi olacaktır. Bu, yükleme oluşturma maliyetinin beklenen% 50 veya daha fazla azalması sayesinde çok daha iyi performans gösterir. Örneğimizde, oluşturma süresinin 232 ms'den 30 ms'ye yükseldiğini görüyoruz. Bu sayede performans 7 kat artar.

Bu avantajlardan yararlanmak için ne yapmanız gerekir? İlk olarak, içeriği bölümlere ayırıyoruz:

Daha sonra, aşağıdaki stil kuralını bölümlere uygularız:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

contain-intrinsic-size ile bir öğenin doğal boyutunu belirtme

content-visibility işlevinin olası avantajlarını anlamak için tarayıcının, içerik oluşturma sonuçlarının öğenin boyutunu hiçbir şekilde etkilemediğinden emin olmak amacıyla boyut sınırlama uygulaması gerekir. Bu durum, söz konusu öğenin boş gibi görüleceği anlamına gelir. Öğenin yüksekliği normal blok düzeninde belirtilmemişse yüksekliği 0 olur.

Kaydırma çubuğunun boyutu değişeceğinden, yüksekliği sıfır olmayan her hikayeye bağlı olacağından bu ideal olmayabilir.

Neyse ki CSS, öğe boyutun kapsamasından etkileniyorsa öğenin doğal boyutunu etkili bir şekilde belirten başka bir özellik olan contain-intrinsic-size'yi sağlar. Örneğimizde, bölümlerin yüksekliğine ve genişliğine yönelik bir tahmin olarak bu değeri 1000px olarak ayarlıyoruz.

Diğer bir deyişle, "gerçek boyutlu" boyutlarda tek bir alt öğeye sahipmiş gibi düzenlenir ve boyutlandırılmamış div'lerinizin alanı kaplamaya devam etmesi sağlanır. contain-intrinsic-size, oluşturulan içerik yerine bir yer tutucu boyutu görevi görür.

Chromium 98 ve sonraki sürümlerde, contain-intrinsic-size için yeni bir auto anahtar kelimesi bulunmaktadır. Belirtildiğinde, tarayıcı son oluşturulan boyutu (varsa) hatırlar ve geliştirici tarafından sağlanan yer tutucu boyutu yerine bunu kullanır. Örneğin, contain-intrinsic-size: auto 300px öğesini belirtirseniz öğe her bir boyutta 300px yerleşik boyutuyla başlar, ancak içeriği oluşturulduktan sonra oluşturulan gerçek boyutu korunur. Daha sonra yapılacak oluşturma boyutu değişiklikleri de hatırlanır. Pratikte bu, content-visibility: auto uygulanmış bir öğeyi kaydırdıktan sonra tekrar ekran dışına kaydırırsanız ideal genişliğini ve yüksekliğini otomatik olarak korur ve yer tutucu boyutlandırmasına geri dönmez. Bu özellik, artık kullanıcı sayfayı keşfederken boyutlandırma tahminini otomatik olarak iyileştirebilen sonsuz kaydırıcılar için özellikle yararlıdır.

content-visibility: hidden ile ilgili içerik gizleniyor

İçeriği ekranda olup olmamasına bakılmaksızın oluşturulmadan tutmak ve önbelleğe alınmış oluşturma durumunun avantajlarından faydalanmak isterseniz ne olur? Şunu girin: content-visibility: hidden.

content-visibility: hidden özelliği, content-visibility: auto ekran dışında olduğu gibi, oluşturulmamış içerik ve önbelleğe alınmış oluşturma durumunun avantajlarını sunar. Ancak auto, ekranda otomatik olarak oluşturulmaya başlanmaz.

Bu yöntem size daha fazla kontrol sağlayarak bir öğenin içeriğini gizlemenize ve daha sonra bunları hızlı bir şekilde göstermenize olanak tanır.

Bunu, öğe içeriğini gizlemek için başvurulan diğer yöntemlerle karşılaştırın:

• display: none: Öğeyi gizler ve oluşturma durumunu kaldırır. Bu, öğenin gösterilmesinin, aynı içeriğe sahip yeni bir öğe oluşturmak kadar pahalı olduğu anlamına gelir.
• visibility: hidden: Öğeyi gizler ve oluşturma durumunu korur. Bu işlem, öğeyi (ve alt ağacını) belgeden gerçekten kaldırmaz çünkü öğe (ve alt ağacı) sayfada halen geometrik alanı kaplar ve tıklanabilir durumda kalır. Ayrıca, gizli olsa bile oluşturma durumunu gerektiğinde günceller.

Öte yandan content-visibility: hidden, oluşturma durumunu korurken öğeyi gizler. Böylece, yapılması gereken herhangi bir değişiklik varsa bu değişiklikler yalnızca öğe tekrar gösterildiğinde (content-visibility: hidden özelliği kaldırıldığında) gerçekleşir.

content-visibility: hidden için en iyi kullanım alanlarından bazıları gelişmiş sanal kaydırma çubuklarının uygulanması ve düzenin ölçülmesidir. Tek sayfalık uygulamalar (SPA'lar) için de idealdir. Etkin olmayan uygulama görüntülemeleri, önbelleğe alınma durumlarını korumak ancak görüntülenmelerini önlemek için content-visibility: hidden uygulanarak DOM'de kalabilir. Bu, görünüm tekrar etkin hale geldiğinde hızlı bir şekilde oluşturulmasını sağlar.

Sonraki Boyamayla Etkileşime İlişkin Efektler (INP)

INP, bir sayfanın kullanıcı girişine güvenilir şekilde yanıt verme becerisini değerlendiren bir metriktir. Yanıt verme hızı, oluşturma işi de dahil olmak üzere ana iş parçacığında yapılan aşırı miktarda işten etkilenebilir.

Herhangi bir sayfada oluşturma işlemini azaltabildiğinizde, ana ileti dizisine kullanıcı girişlerine daha hızlı yanıt verme fırsatı tanımış olursunuz. Bu, oluşturma işlemini içerir. Uygun durumlarda content-visiblity CSS mülkünü kullanmak, özellikle de oluşturma ve düzen işlemlerinin çoğunun yapıldığı başlangıç sırasında, oluşturma işini azaltabilir.

Oluşturma işini azaltmanın INP üzerinde doğrudan etkisi vardır. Kullanıcılar, ekran dışı öğelerin düzenini ve oluşturulmasını düzgün bir şekilde ertelemek için content-visibility özelliğini kullanan bir sayfayla etkileşimde bulunmaya çalıştığında, ana ileti dizisine, kullanıcıların görebildiği kritik çalışmalara yanıt verme şansı vermiş olursunuz. Bu, bazı durumlarda sayfanızın INP değerini iyileştirebilir.

Sonuç

content-visibility ve CSS Kapsayıcı Spesifikasyonu, bazı heyecan verici performans artışlarının doğrudan CSS dosyanıza geleceği anlamına gelir. Bu mülkler hakkında daha fazla bilgi için aşağıdakilere göz atın:

• CSS Kapsama Spesifikasyonu
• CSS Kapsamında MDN Dokümanları
• CSSWG Taslakları