Yoğun içeriklerin oluşturulmasını erteleme

Sonsuz kaydırma, karmaşık kontrol panelleri veya yoğun makaleler gibi kapsamlı içeriğe sahip web sayfalarında ilk oluşturma yavaş olabilir ve etkileşimler yavaşlayabilir. Modern web teknolojileri, hemen görünmeyen içeriklerin oluşturma iş yükünü ertelemenize olanak tanır. Böylece erişilebilirlikten veya kullanıcı beklentilerinden ödün vermeden performansı önemli ölçüde artırabilirsiniz.

Oluşturma işlemini optimize etmek için CSS content-visibility özelliğini ve HTML hidden="until-found" özelliğini kullanabilirsiniz. Her ikisi de performansa yardımcı olsa da farklı kullanım alanlarına hizmet eder.

Hangisini ne zaman kullanmalısınız?

content-visibility: auto nasıl uygulanır?

Ekran dışı içerik seçme

ZORUNLU: content-visibility: auto alan öğeleri dikkatli bir şekilde belirlemeniz GEREKİR.

• Kesinlikle ilk ekranın altında olan büyük, bağımsız düzen bloklarını (ör. sonsuz akıştaki kart öğeleri, sondaki yorumlar veya alt kısmı yoğun düzen bölümleri) hedefleyin.
• UYGULAMAYIN: Bu özelliği, ilk görüntü alanındaki (ekranın üst kısmındaki) öğelere uygulamayın. Bu, tarayıcıyı oluşturma işleminden önce görünürlük sınırlarını değerlendirmeye zorlar. Bu da sayfa yükleme performansını geciktirir.
• Oluşturma maliyetinden en yüksek düzeyde tasarruf etmek için derin veya karmaşık dahili DOM yapılarına sahip öğeleri hedefleyin (DO).

Uygulama adımları

1. ZORUNLU: İlk yüklemede ekran dışında olduğu onaylanan ağır bölümleri belirleyin.
2. ZORUNLU: Bu ekran dışı öğelerin her birine content-visibility: auto uygulayın.
3. ZORUNLU: Her öğede contain-intrinsic-size kullanarak tahmini bir düzen yapısı boyutu sağlayın.

contain-intrinsic-size hizmetini kullanma

ZORUNLU: content-visibility: auto ile contain-intrinsic-size eşlenmelidir. Bunun yapılmaması, tarayıcıyı ekran dışındayken öğeyi 0 piksel yüksekliğe daraltmaya zorlar. Bu da kullanıcı sayfayı kaydırırken ciddi düzen kaymasına ve kaydırma çubuğunun atlamasına neden olur.

contain-intrinsic-size CSS kısaltma özelliği, yer tutucu boyut görevi görür. auto anahtar kelimesini kullanmak, tarayıcının öğe nihayet oluşturulduktan sonra tam boyutu "hatırlamasını" sağlar. Öğe tekrar ekran dışına çıkarsa yer tutucu yerine bu hesaplanan boyut kullanılır.

Örnek kod

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

content-visibility: hidden nasıl uygulanır?

1. Ağır bölümleri belirleyin: Başlangıçta gizli olan düzen bloklarını (ör. büyük bir veri tablosundaki ek satırlar) bulun.
2. CSS uygulama: Öğeye content-visibility: hidden ekleyin.
3. Öğeyi gösterme: Öğenin gösterilmesi gerektiğinde content-visibility özelliğini visible veya auto olarak değiştirin.

Örnek kod

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

content-visibility: hidden, öğeyi ve alt öğelerini erişilebilirlik ağacından ve sayfa içi aramasından hariç tuttuğu için içerik gizliyken keşfedilebilir durumda kalması gerekiyorsa bunu KULLANMAYIN. Gizli içeriğin yerel sayfada bul özelliğiyle aranabilir kalması gerekiyorsa Gizli içeriği arama bölümünde açıklandığı şekilde hidden="until-found" kullanın.

En İyi Uygulamalar

• contain-intrinsic-size ile content-visibility: auto kullanın. Aksi takdirde, kaydırma sırasında yükseklik yeniden hesaplanır ve bu da görüntü alanı düzeninin atlamasına veya görsel hatalara neden olur.
• Kritik sayfa oluşturmayı geciktireceğinden, ilk katlama görüntü alanındaki öğelere content-visibility: auto UYGULAMAYIN.
• ZORUNLU Erişilebilirlik Doğrulaması: content-visibility: auto uygularken sıralı klavye erişilebilirliğini doğrulamanız ZORUNLUDUR. Belirli yardımcı teknoloji yapılandırmalarında, content-visibility: auto kullanan ekran dışı düğümler, odak zorla içlerine taşınana kadar erişilebilirlik ağacından veya sıralı gezinme rotalarından hariç tutulabilir. Yalnızca klavyeyi kullanarak ekran dışı sınırlar arasında doğrusal gezinmeyi test edin.

Yedek stratejiler

content-visibility yedek

content-visibility desteklenmediğinde tarayıcı tarafından yoksayılır. Çoğu durumda content-visibility: auto için yedek gerekmez ancak yedek kullanılmadığında performans artışı elde edilemez. Desteklenmeyen tarayıcılar content-visibility: hidden öğelerini tamamen görünür bırakır. Yedek uygulamak için özellik algılamayı kullanın.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}