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.

Una Kravets
Jeremy Wagner
Vladimir Levin
Vladimir Levin

İlgili içeriği oluşturmak için kullanılan content-visibility Chrome 85'te kullanıma sunulan yeni ve en etkili CSS'lerden biri özelliklerini kullanmanızı öneririz. content-visibility, kullanıcı aracısının bir öğenin oluşturulma işlemini (düzenleme ve boyama dahil) gerektiği zamana kadar atlamasına olanak tanır. Oluşturma işlemi atlandığı için içeriğin ekran dışında kaldığından, content-visibility özelliğini kullanmak kullanıcının ilk yüklemenin daha hızlı gerçekleşmesini sağlar. Ayrıca, kullanıcı aracılarıyla daha hızlı ekrandaki içeriklerdir. Çok kullanışlı.

ağ sonuçlarını temsil eden rakamlarla demo
Makale demomuzda, content-visibility: auto parçalanmış içerik alanlarına uygulandığında ilk yüklemede oluşturma performansında 7 kat artış elde edilir. Daha fazla bilgi için okumaya devam edin.

Tarayıcı desteği

Tarayıcı Desteği

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Kaynak

content-visibility, CSS Kapsamı içindeki temel öğeleri kullanır Özellikler. content-visibility ise yalnızca şimdilik Chromium 85'te destekleniyor (ve "değerli" sayılıyor prototip oluşturma" Firefox olduğunda), Kapsayıcı Spesifikasyonu çoğu modern daha fazla bilgi edinin.

CSS Kapsamı

CSS kapsayıcılığının temel ve genel hedefi, DOM alt ağacının sayfanın geri kalanından tahmin edilebilir bir şekilde izole edilmesini sağlayarak web içeriğinin oluşturma performansında iyileştirmeler sağlamaktır.

Temel olarak geliştiriciler, sayfanın hangi bölümlerinin içerik grubu olarak kapsüllendiğini tarayıcıya söyleyebilir. Bu sayede tarayıcılar, alt ağaç dışındaki durumu dikkate almak zorunda kalmadan içerik hakkında mantık yürütebilir. Hangi içerik parçalarının (alt ağaçlar) yalıtılmış içerik bulunması, tarayıcının optimizasyon yapabileceği anlamına gelir. karar vermeye yardımcı olur.

Dört tür CSS vardır kapsama, her biri contain CSS mülkü için bir potansiyel değerdir (bu değer birleştirilebilir) değerleri bir boşlukla ayrılmış liste olarak belirtin:

  • size: Bir öğenin boyut kapsamı, öğenin kutusunun ve alt öğelerini incelemenize gerek kalmadan ortaya konmuştur. Bu sayede İhtiyacımız olan tek şey öğesine dokunun.
  • layout: Düzen kapsamı, alt öğelerin sayfadaki diğer kutuların harici düzeni. Bu, bazı durumlarda alt öğelerin düzenine başka kutular yerleştirmekten başka bir şey yapalım.
  • style: Stil kapsamı, üzerinde etki yaratabilecek özelliklerin öğeden kaçmaz.Bu, yalnızca alt öğeleridir (ör. sayaçlar). Bu Böylece, tüm alt öğeler için stil hesaplamasını potansiyel olarak diğer öğelerdeki stilleri hesaplamaktır.
  • paint: Boya muhafazası, kapsayıcı kutunun alt öğelerinin görüntülememesi için kullanılır. Hiçbir şey görünür bir şekilde öğeden taşamaz Bir öğe ekran dışındaysa veya herhangi bir şekilde görünür değilse alt öğeleri görünür değildir. Bu, öğe ekran dışındaysa alt öğelerin boyanmasını atlamamıza olanak tanır.

content-visibility ile oluşturma işlemini atlama

Tarayıcı nedeniyle, hangi kapsama değerlerinin kullanılacağını belirlemek zor olabilir. optimizasyonlar yalnızca uygun bir grup belirtildiğinde devreye girer. Şunları yapabilirsiniz: değerler üzerinde denemeler yaparak neyin işe yaradığını en iyi veya siz gereken kodu uygulamak için content-visibility adlı başka bir CSS özelliğini kullanabilir otomatik olarak kontrol edebilir. content-visibility, geliştirici olarak sizden minimum düzeyde çabayla tarayıcı tarafından sağlanabilecek en yüksek performans kazançlarını elde etmenizi sağlar.

İçerik görünürlüğü özelliği birkaç değeri kabul eder, ancak auto olan değerdir anlık performans iyileştirmeleri sağlayan bir fırsattır. İçinde content-visibility: auto; layout, style ve paint kontrol altına alma kazanıyor. Eğer öğe ekran dışında kalıyor (ve kullanıcıyla başka bir şekilde alakalı değil; alt ağaçlarında odak veya seçim içeren öğelerdir), da size kontrol altına alır (ve tablo ve isabet testi .

Bunun anlamı nedir? Kısacası, öğe ekran dışındaysa alt öğeleri oluşturulmadı. Tarayıcı, öğenin boyutunu dikkate almadan belirler orada durur. Öğenin alt ağacının stili 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 eklemez ve öğenin içeriğini boyayıp isabet testi yapmaya başlar. Bu sayede oluşturma işlemi, kullanıcı tarafından görülecek şekilde tam zamanında tamamlanır.

Erişilebilirlikle ilgili not

content-visibility: auto özelliğinin özelliklerinden biri, ekran dışı içeriğin doküman nesne modelinde ve dolayısıyla erişilebilirlik ağacında (visibility: hidden sürümünden farklı olarak) kullanılabilir durumda kalmasıdır. Bu da içeriğin yüklenmesini beklemeden veya oluşturma performansından ödün vermeden ilgili içeriğin sayfada aranabileceği ve bu 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

Bu örnekte, sağdaki seyahat blogumuzu temel alıp soldaki parçalara ayrılmış alanlara content-visibility: auto uyguladık. Sonuçlar, ilk sayfa yüklenmesinde oluşturma sürelerinin 232 ms'den 30 ms'ye düştüğünü gösteriyor.

Bir seyahat blogu genellikle birkaç resim ve açıklayıcı metin. Tipik bir tarayıcı, bir seyahat bloguna gittiğinde şunlar olur:

  1. Sayfanın bir bölümü, gerekli olanlar ile birlikte ağdan indirilir. kaynaklar.
  2. Tarayıcı stilleri ve sayfa içeriği, sayfa içeriğini göstermeden göz önünde bulundurulduğunda, içeriğin kullanıcı tarafından görülüp görülmediği belirlenir.
  3. Sayfanın tamamı ve kaynaklar indirilene kadar tarayıcı 1. adıma geri döner.

2. adımda tarayıcı, soruna neden olabilecek şeylerin arayan değişti. Tüm yeni öğelerin stil ve düzenini günceller. ve yeni güncellemeler sonucunda kaymış olabilecek öğeler. Bu işlem gerçekleştiriliyor iş yeri. Bu işlem zaman alır.

Bir seyahat blogunun ekran görüntüsü.
Seyahat blogu örneği. Codepen'de Demo bölümüne bakın

Şimdi, yukarıdakilerin her birine content-visibility: auto eklerseniz ayrı ayrı hikayeler oluşturabilirsiniz. Genel döngü aynıdır: tarayıcı sayfanın parçalarını indirir ve oluşturur. Ancak fark, 2. adımda yaptığı iş miktarındadır.

content-visibility ile, kullanıcının şu anda gördüğü tüm içerikler (ekran üzerinde olan) stilize edilir ve düzenlenir. Ancak, hikayeyi işlerseniz, tarayıcı oluşturma işlemini atlar ve yalnızca öğe kutusunun kendisini biçimlendirin ve düzenleyin.

Bu sayfayı yükleme performansı, ekranın tamamı ekrandaymış gibi olur. hikaye ve boş kutular ekleyerek ekran dışı hikayelerin her biri için Bu, yüksek performans daha iyi, reklam oluşturma maliyetinin % 50 veya daha fazla azalması yükleniyor. Örneğimizde, oluşturma süresi 232 ms olan bir sayfanın oluşturma süresinin 30 ms'ye düştüğünü 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ırmaya çalışın:

İçeriğin CSS sınıfıyla bölümlere ayrılmasını gösteren ek açıklamalı bir ekran görüntüsü.
content-visibility: auto almak için içeriği story sınıfının uygulandığı bölümlere ayırma örneği. Codepen'de Demo bölümüne bakın

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

Tarayıcı, content-visibility ürününün olası avantajlarından yararlanmak için içerik oluşturma sonuçlarının düzgün bir şekilde oluşturulmasını sağlamak için öğesinin boyutunu hiçbir şekilde etkilemez. Bu, elementin boşmuş gibi görünmesini sağlar. Normal bir blok düzeninde öğenin yüksekliği belirtilmemişse öğenin yüksekliği 0 olur.

Bu ideal olmayabilir çünkü kaydırma çubuğunun boyutu değişeceğinden hikayenin sıfır olmayan bir yüksekliği vardır.

Neyse ki CSS, contain-intrinsic-size adında başka bir özellik sunuyor. doğal boyutu etkili bir şekilde belirler. boyut kısıtlamasından etkilenirler. Örneğimizde, bu değeri 1000px olarak ayarlıyoruz: bölümlerin yüksekliği ve genişliği için bir tahmindir.

Yani, "doğal boyutlu" tek bir alt öğesi varmış gibi görünür Böylece, boyutlandırılmamış div'lerinizin yer kaplamaya devam etmesini sağlar. 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 vardır. Bu belirtildiğinde, tarayıcı hatırlar: son oluşturulan boyutu (varsa) belirleyip geliştirici tarafından sağlanan yer tutucu yerine bunu kullanın seçin. Örneğin, contain-intrinsic-size: auto 300px öğesini belirttiyseniz öğesi, her bir boyutta 300px doğal boyutla başlar, ancak öğe içeriği oluşturulursa oluşturulan gerçek boyutu korunur. Daha sonra yapılacak oluşturma boyutu değişiklikleri de hatırlanır. Pratikte bu, zaman çizelgesine sadık kalmak için content-visibility: auto uygulanmış bir öğeyi kaydırdıktan sonra geri kaydırma ekran dışındaysa otomatik olarak ideal genişliğini ve yüksekliğini korur ve orijinal boyutu eklemektir. Bu özellik özellikle sonsuz kaydırıcılar için yararlıdır. Bu da artık kullanıcı olarak zaman içinde boyutlandırma tahminini sayfayı keşfeder.

content-visibility: hidden ile ilgili içerik gizleniyor

İçeriğin oluşturulmadan kalmasını istiyorsanız ne yapabilirsiniz? ve önbelleğe alınmış oluşturma durumunun avantajlarından yararlanıyor mu? Şunu girin: content-visibility: hidden.

content-visibility: hidden özelliği, content-visibility: auto ile aynı şekilde oluşturulmamış içerik ve önbelleğe alınmış oluşturma durumu ekranın dışına çıkar. Ancak, auto öğesinin aksine, ekranda oluşturmak için kullanılır.

Bu sayede, bir öğenin içeriğini gizleyebilir ve daha sonra hızlıca göstermeyi seçebilirsiniz.

Bu yöntemi, öğe içeriklerini gizlemek için kullanılan diğer yaygın yöntemlerle karşılaştırın:

  • display: none: Öğeyi gizler ve oluşturma durumunu kaldırır. Bu öğeyi göstermenin, aynı filtreyle yeni bir öğe oluşturmak kadar pahalı aynı içeriğe sahiptir.
  • visibility: hidden: Öğeyi gizler ve oluşturma durumunu korur. Bu işlem, öğeyi (ve alt ağacını) sayfadaki geometrik alandan kaldırmaz ve öğe hâlâ tıklanabilir durumda kalır. Google gizlenmiş olsa bile gerektiğinde oluşturma durumunu da günceller.

Öte yandan content-visibility: hidden, öğeyi oluşturma durumunu korurken öğeyi gizler. Bu nedenle, yapılması gereken değişiklikler yalnızca öğe tekrar gösterildiğinde (yani content-visibility: hidden mülkü kaldırıldığında) gerçekleşir.

content-visibility: hidden'ün en iyi kullanım alanlarından bazıları, gelişmiş sanal kaydırma çubukları uygulamak ve düzeni ölçmektir. Ayrıca özellikle de tek sayfalık uygulamalar (SPA'lar). Etkin olmayan uygulama görüntülemeleri DOM'de content-visibility: hidden, gösterilmesini engellemek ancak önbelleğe alınmış durumudur. Bu, görünüm tekrar etkin hale geldiğinde hızlı bir şekilde oluşturulmasını sağlar.

Sonraki Boyamayla Etkileşim (INP) üzerindeki etkiler

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ı INP'de iyileştirebilir.

Sonuç

content-visibility ve CSS Kapsama Spesifikasyonu, heyecan verici performans anlamına geliyor güçlendirmeler doğrudan CSS dosyanıza gelir. Bu özellikler hakkında daha fazla bilgi için: