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 düzen ve boyama dahil olmak üzere bir öğenin oluşturma işlemini atlamasını sağlar.
kadar geri bildirim alırsınız. 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ı.
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
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'yi kontrol altına almanın temel ve genel hedefi, kullanıcı verilerinin önceden tahmin edilebilir şekilde izole edilmesini sağlayarak bir DOM alt ağacı ekleyin.
Temel olarak bir geliştirici, tarayıcıya sayfanın hangi bölümlerinin kapsüllendiğini söyleyebilir Böylece, tarayıcılar herhangi bir bağlam olmadan içeriği akıl yürüterek ağaç dışındaki bir durumu da göz önünde bulundurmak gerekir. 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 verme sürecidir.
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. Böylece, boyayı boyama aşamasını alt öğeleri kullanır.
content-visibility ile oluşturma işlemi atlanıyor
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, en geniş kapsamlı
yardımcı olması için, tarayıcının sunabileceği performans artışını
geliştiriciyim.
İç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. Stil gibi oluşturma sürecinin büyük bir kısmı ve öğenin alt ağacının düzeni 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
, 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ışı 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
content-visibility: auto uyguladık. Sonuçlar, ilk sayfa yüklemesinde 232 ms ile 30 ms arasında değişen oluşturma sürelerini gösterir.Bir seyahat blogu genellikle birkaç resim ve açıklayıcı metin. Tipik bir tarayıcıda bir seyahat blogu:
- 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.
- Tarayıcı, sayfanın ve kaynakların tamamı hazır olana kadar 1. adıma geri döner indirildi.
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 aradaki fark genel
iş miktarına bakacağız.
İçerik görünürlüğüyle, etkili olan tüm içeriğin stil ve yerlerini ekranda görünür (ekranda yer alır). 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 oluşturarak ekran dışı hikayelerin her biri için Bu yöntem, yüksek performans daha iyi, reklam oluşturma maliyetinin % 50 veya daha fazla azalması yükleniyor. Örneğimizde 232 ms'lik bir oluşturma süresinin, Oluşturma süresi 30 ms. 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:
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ınDaha 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. Öğenin yüksekliği belirtilmemişse
üzerinde çalışıyorsa 0 yüksekliğinde 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, auto
contain-intrinsic-size için anahtar kelime. 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 yöntem size daha fazla kontrol sağlayarak öğelerin içeriğini gizlemenize ve görünür hale getirebilirsiniz.
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 öğ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 alt ağacı olduğu için öğeyi dokümandan gerçekten kaldırmaz Sayfada yine de geometrik alan kaplar ve tıklanabilir. Google gizlenmiş olsa bile gerektiğinde oluşturma durumunu da günceller.
Öte yandan content-visibility: hidden, öğeyi gizler.
oluşturma durumunu korur. Bu nedenle,
Bunlar yalnızca öğe tekrar gösterildiğinde (ör.
content-visibility: hidden mülkü kaldırılır).
content-visibility: hidden için harika kullanım alanlarından bazıları
sanal kaydırma araçları ve ölçüm düzeni. 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ş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 Kapsama Spesifikasyonu, heyecan verici performans anlamına geliyor
güçlendirmeler doğrudan CSS dosyanıza gelir. Daha fazla bilgi için
göz atın: