Ekran dışı içerik oluşturmayı atlayarak ilk yükleme süresini iyileştirin.
Chromium 85'te kullanıma sunulan content-visibility özelliği, sayfa yükleme performansını iyileştirmek için en etkili yeni CSS özelliklerinden biri olabilir. content-visibility, kullanıcı aracısının gerekli olana kadar bir öğenin oluşturma (düzen ve boyama dahil) oluşturma işlemini 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şimler kurulmasını sağlar. Çok kullanışlı.
content-visibility: auto uygulamak, ilk yüklemede oluşturma performansında 7 kat artış sağlar. Daha fazla bilgi edinmek için okumaya devam edin.Tarayıcı desteği
content-visibility, CSS Kapsayıcı Spesifikasyonu'ndaki temel öğeleri temel alır. content-visibility şimdilik yalnızca Chromium 85'te desteklense de (ve Firefox için "prototip oluşturmaya değer" olarak kabul edilir), Kapsayıcı Spesifikasyonu çoğu modern tarayıcıda desteklenmektedir.
CSS Kapsayıcısı
CSS kapsama alanını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şturulmasının performansının iyileştirilmesini sağlamaktır.
Temel olarak geliştirici, tarayıcıya sayfanın hangi bölümlerinin bir içerik grubu olarak dahil edildiğini söyleyebilir. Böylece, tarayıcılar alt ağacın dışındaki durumu dikkate almaya gerek kalmadan içerik hakkında akıl yürütme imkanı bulur. Hangi içerik parçalarının (alt ağaçlar) izole içerik içerdiğini bilirseniz, tarayıcı sayfa oluşturma için optimizasyon kararları verebilir.
Her biri contain CSS özelliği için potansiyel bir değer olan ve boşlukla ayrılmış bir değer listesinde birleştirilebilen dört tür CSS kapsayıcı vardır:
size: Bir öğedeki boyut kapsanması, öğenin alt öğelerinin incelemeye gerek kalmadan yerleştirilmesini sağlar. Bu, ihtiyacımız olan tek şey öğenin boyutuysa muhtemelen alt öğelerin düzenini atlayabileceğimiz anlamına gelir.layout: Düzen kapsaması, alt öğelerin sayfadaki diğer kutuların harici düzenini etkilemediği anlamına gelir. Bu, yapmak istediğimiz tek şey başka kutular düzenlemekse bu, potansiyel olarak alt öğelerin düzenini atlamamıza olanak tanır.style: Stil barındırma, alt öğelerinden daha fazlası üzerinde etkisi olabilecek özelliklerin (ör. sayaçlar) öğenin dışına çıkmamasını sağlar. Böylece, yalnızca diğer öğeler üzerindeki stilleri hesaplamak istiyorsak, alt öğeler için stil hesaplamasını atlamamıza izin verilir.paint: Boya içerme, kapsayıcı kutunun alt öğelerinin sınırlarının dışında görünmemesini sağlar. Hiçbir şey öğenin arasından 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. Böylece, öğe ekran dışındaysa alt öğe boyamayı atlayabiliriz.
content-visibility ile oluşturma çalışması atlanıyor
Tarayıcı optimizasyonları yalnızca uygun bir grup belirtildiğinde devreye girebileceğinden hangi kapsama değerlerinin kullanılacağını belirlemek zor olabilir. En iyi sonucu veren değerleri görmek için değerlerde değişiklikler yapabilir veya gerekli koşulu otomatik olarak uygulamak için content-visibility adlı başka bir CSS özelliğini kullanabilirsiniz. content-visibility, geliştirici olarak minimum çabayla tarayıcının sağlayabileceği en büyük performans kazançlarını elde etmenizi sağlar.
İçerik görünürlüğü özelliği birkaç değeri kabul eder ancak auto anında performans iyileştirmelerini sağlayan özelliktir. content-visibility: auto değerine sahip bir öğe, layout, style ve paint kapsayıcılığı kazanır. Öğe ekran dışındaysa (ve kullanıcıyla başka bir şekilde alakalı değilse; ilgili öğeler, alt ağacında odak veya seçim içeren öğeler olursa) size kapsama elde eder (ve içeriğini boyamayı ve isabet testini durdurur).
Bunun anlamı nedir? Kısacası, öğe ekran dışındaysa alt öğeleri oluşturulmaz. Tarayıcı, içeriğinin hiçbir kısmını dikkate almadan öğenin boyutunu belirler ve öğe 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 kapsamını eklemez ve öğenin içeriğini boyayıp test etmeye başlar. Bu, oluşturma işinin kullanıcı tarafından tam zamanında görülmesini sağlar.
Erişilebilirlikle ilgili bir not
content-visibility: auto ürününün özelliklerinden biri, ekran dışı içeriğin doküman nesne modelinde ve dolayısıyla erişilebilirlik ağacında (visibility: hidden'ın aksine) kullanılabilir durumda kalmasıdır. Bu, içeriğin yüklenmesini beklemeden veya oluşturma performansından ödün vermeden sayfada aranabilir ve sayfaya gidilebileceği anlamına gelir.
Bununla birlikte, bunun tersi, tarayıcı bu stilleri görüntü alanına girene kadar oluşturmayacağı için, display: none veya visibility: hidden gibi stil özelliklerine sahip önemli nokta öğelerinin ekran dışındayken erişilebilirlik ağacında da görüneceğidir. Bunların erişilebilirlik ağacında görünmesini ve karışıklığa neden olmasını önlemek için aria-hidden="true" öğesini de eklediğinizden emin olun.
Örnek: bir seyahat blogu
content-visibility: auto uyguladık. Sonuçlar, ilk sayfa yüklemesinde 232 ms ile 30 ms arasındaki oluşturma sürelerini gösterir.Bir seyahat blogu genellikle birkaç resim ve açıklayıcı metin içeren bir dizi öykü içerir. Tipik bir tarayıcıda bir seyahat bloguna gittiğinde şöyle olur:
- Sayfanın bir bölümü, gerekli tüm kaynaklarla birlikte ağdan indirilir.
- Tarayıcı, içeriğin kullanıcı tarafından görünür olup olmadığını dikkate almadan tüm sayfanın tüm içeriğini stilize eder ve düzenler.
- Tarayıcı, tüm sayfa ve kaynaklar indirilene kadar 1. adıma geri döner.
2. adımda tarayıcı, değişmiş olabilecek şeyleri arayarak tüm içerikleri işler. Bu güncelleme, yeni güncellemeler sonucunda kaymış olabilecek öğelerle birlikte, yeni öğelerin stil ve düzenini günceller. Bu, işi oluşturmaktır. Bu işlem zaman alır.
Şimdi de blogdaki hikayelerin her birine content-visibility: auto koyarsanız ne olacağını düşünün. 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.
İçerik görünürlüğü sayesinde, kullanıcı tarafından görülebilen (ekranda görünen) tüm içeriklerin stilini belirler ve düzenler. Bununla birlikte, tamamen ekran dışı hikayeyi işlerken tarayıcı, oluşturma işlemini atlar ve yalnızca öğe kutusunun stilini belirler ve düzenler.
Bu sayfayı yükleme performansı, tam ekran hikayeler ve ekran dışı hikayelerin her biri için boş kutular içeriyormuş gibi olur. Bu yöntem, yükleme oluşturma maliyetinde % 50 veya daha fazla azalmanın beklendiğinden ç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, performansta 7 kat artış demektir.
Bu avantajlardan yararlanmak için ne yapmanız gerekir? İlk olarak, içeriği bölümlere ayırırız:
content-visibility: auto öğesini almak için story sınıfının uygulandığı bölümlere içerik ayırma örneği. Codepen'de Demoyu inceleyinDaha sonra, bölümlere aşağıdaki stil kuralını 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 öğesinin olası avantajlarından yararlanmak 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, öğenin boş gibi düzenleneceği anlamına gelir. Öğenin yüksekliği normal blok düzeninde belirtilmemişse yüksekliği 0 olur.
Bu ideal bir seçenek olmayabilir, çünkü kaydırma çubuğunun boyutu değişeceğinden, yüksekliği sıfır olmayan her hikayeye bağlıdır.
Neyse ki CSS, öğe boyutun belirlenmesinden etkileniyorsa öğenin doğal boyutunu etkili bir şekilde belirten contain-intrinsic-size adlı başka bir özellik sağlar. Örneğimizde, bölümlerin yüksekliği ve genişliği için tahmini bir değer olarak 1000px değerini kullanıyoruz.
Yani, "içeriğe dayalı boyutlu" boyutlardan oluşan tek bir alt öğe varmış gibi düzenlenerek boyutlandırılmamış div'lerinizin yine de yer kaplamasını sağlar.
contain-intrinsic-size, oluşturulan içerik yerine 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 parametre belirtildiğinde tarayıcı, varsa son oluşturulan boyutu hatırlar ve geliştirici tarafından sağlanan yer tutucu boyutu yerine bunu kullanır. Örneğin, contain-intrinsic-size: auto 300px değerini belirttiyseniz öğe, her boyutta 300px içsel boyutlandırmayla başlar ancak öğenin içeriği oluşturulduktan sonra oluşturulan içsel boyutu korur.
Sonraki oluşturma boyutu değişiklikleri de hatırlanır. Pratikte bu, bir öğeyi content-visibility: auto uygulanmış bir şekilde kaydırdıktan sonra tekrar ekran dışına kaydırdığınızda ideal genişliği ve yüksekliğinin otomatik olarak korunacağı ve yer tutucu boyutuna geri döndürülmeyeceği anlamına gelir. Bu özellik özellikle sonsuz kaydırma yapanlar için faydalıdır. Bu özellik artık kullanıcı sayfayı keşfederken zaman içinde boyut tahminini otomatik olarak iyileştirebiliyor.
content-visibility: hidden ile içerik gizleniyor
Önbelleğe alınmış oluşturma durumunun avantajlarından yararlanırken içeriğin ekranda olup olmadığına bakılmaksızın oluşturulmadan kalmasını istiyorsanız ne olur? Şunları girin:
content-visibility: hidden.
content-visibility: hidden özelliği, content-visibility: auto ürününün ekran dışında sunduğu gibi, oluşturulmamış içerik ve önbelleğe alınmış oluşturma durumunun avantajlarının tamamını sunar. Ancak auto özelliğinden farklı olarak ekranda otomatik olarak oluşturulmaya başlamaz.
Bu 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 gizlemenin diğer yaygın yollarıyla 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 belgeden gerçekten kaldırmaz çünkü söz konusu öğe (ve alt ağacı), sayfada hala geometrik yer kaplar ve hâlâ tıklanabilir. Ayrıca, gizlenmiş olsa bile gerektiğinde oluşturma durumunu günceller.
Diğer yandan, content-visibility: hidden, oluşturma durumunu korurken öğeyi gizler. Böylece yapılması gereken değişiklikler varsa bunlar yalnızca öğe tekrar gösterildiğinde (yani content-visibility: hidden özelliği kaldırıldığında) gerçekleşir.
content-visibility: hidden özelliğinin en iyi kullanım alanlarından bazıları, gelişmiş sanal kaydırıcılar uygulamak ve düzeni ölçmektir. Ayrıca, tek sayfalık uygulamalar (SPA) için de idealdir. Etkin olmayan uygulama görüntülemeleri, görüntülenmelerini engellemek ancak önbelleğe alınma durumlarını korumak için content-visibility: hidden eklenerek DOM'de bırakılabilir. Bu, görünümün tekrar etkin hale geldiğinde oluşturulmasının hızlı olmasını sağlar.
Sonraki boyamayla etkileşim (INP) üzerindeki etkiler
INP, bir sayfanın kullanıcı girişine güvenilir şekilde yanıt verip vermediğini değerlendiren bir metriktir. Yanıt hızı, oluşturma işi de dahil olmak üzere ana iş parçacığında gerçekleşen aşırı miktarda çalışmadan etkilenebilir.
Belirli bir sayfadaki oluşturma çalışmasını azaltabildiğinizde ana ileti dizisine, kullanıcı girişlerine daha hızlı yanıt verme fırsatı vermiş olursunuz. Oluşturma işinin oluşturulması ve uygun durumlarda content-visiblity CSS mülkünün kullanılması, özellikle de oluşturma ve düzen işlemlerinin büyük kısmı tamamlandığında, oluşturma işini azaltabilir.
Oluşturma işlerinin azaltılması INP'yi doğrudan etkiler. 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ı tarafından görülebilen kritik çalışmalara yanıt verme şansı vermiş olursunuz. Bu, bazı durumlarda sayfanızın INP'sini iyileştirebilir.
Sonuç
content-visibility ve CSS Kapsayıcı Spesifikasyonu, bazı heyecan verici performans artışlarının doğrudan CSS dosyanıza geldiği anlamına gelir. Bu özellikler hakkında daha fazla
bilgi için aşağıdaki videolara göz atın: