Ekran dışındaki içeriklerin oluşturulmasını atlayarak ilk yükleme süresini iyileştirin.
İ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ı.
Tarayıcı desteği
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
Bir seyahat blogu genellikle birkaç resim ve açıklayıcı metin. Tipik bir tarayıcı, bir seyahat bloguna gittiğinde şunlar olur:
- Sayfanın bir bölümü, gerekli olanlar ile birlikte ağdan indirilir. kaynaklar.
- 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.
- 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.
Ş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:
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: