Material Symbols Kullanırken Font Fallback Kaynaklı CLS Sorununun CSS Font Loading ile Çözümü

English version

Asenkron Font Yüklemesinin CLS Üzerindeki Etkisi

Material Symbols gibi ikon kütüphaneleri, bir font-family aracılığıyla <span> veya <i> gibi elementlerin metin içeriğini (text node) gliflerle (glyphs) değiştirerek çalışır. Temel sorun, bu ikon font dosyalarının (genellikle WOFF2 formatında) asenkron olarak fetch edilmesidir. Bu durum, tarayıcının render pipeline’ında öngörülemeyen bir mizanpaj kaymasına (Cumulative Layout Shift – CLS) neden olur.

Render süreci şu adımları izler:

1. DOM Parsing: Tarayıcı, <span>settings</span> gibi bir text node içeren elementi parse eder.
2. Render Tree Oluşturma: Bu element için CSSOM’dan gelen font-family: ‘Material Symbols Outlined’ kuralı uygulanır. Ancak bu aşamada font dosyası henüz network’ten indirilmemiştir.
3. Layout (Reflow): Tarayıcı, render ağacındaki her bir elemanın geometrisini (bounding box) hesaplar. İkon fontu mevcut olmadığından, bu hesaplamayı sistemin varsayılan yedek (fallback) fontu ve settings metninin boyutlarına göre yapar.
4. Font Yüklemesi ve Swap: Asenkron olarak yüklenen ikon fontu kullanılabilir hale geldiğinde, tarayıcı bir “font swap” işlemi gerçekleştirir. settings metninin yerini, genellikle metinden tamamen farklı genişlik ve yükseklik metriklerine sahip olan ikon glifi alır.
5. Re-Layout: Bu boyut değişikliği, tarayıcıyı yeniden bir layout (reflow) hesaplaması yapmaya zorlar. Bu ikinci layout, elemanın ve ondan etkilenen çevre elemanların pozisyonunu değiştirerek CLS skoruna doğrudan negatif katkıda bulunur.

Sorun, elemanın mizanpaja dahil edildiği an ile render için gerekli olan kritik bir kaynağın (font) hazır olduğu an arasındaki senkronizasyon eksikliğidir.

Render Akışının Senkronizasyonu

CLS’i sıfırlamak için, ikon elementinin render ağacına dahil edilmesini, bağımlı olduğu font kaynağı tamamen yüklendiği ana kadar ertelemek gerekmektedir. Bu, elemanın layout hesaplamasına sadece nihai ve stabil boyutlarıyla, tek bir seferde girmesini garanti eder.

Bu strateji iki ana bileşenden oluşur:

1. CSS ile Koşullu Render: Başlangıç durumunda, element display: none; özelliği ile layout akışından tamamen çıkarılır. visibility: hidden; veya opacity: 0; gibi alternatifler yetersizdir, çünkü bu özellikler elementi layout’ta tutar ve alanını ayırır; bu da font swap gerçekleştiğinde CLS’in yine de oluşmasına neden olur.
2. JavaScript ile Font Durum Tespiti: CSS Font Loading API (document.fonts) kullanılarak, hedef fontun yüklenme durumu programatik olarak takip edilir ve bu durum, render’ı tetikleyecek bir state değişikliği için kullanılır.

Teknik Implementasyon

CSS Katmanı: Layout’tan Hariç Tutma

CSS, bir “sentinel” (gözcü) sınıfı (.fonts-loaded) aracılığıyla iki durumu yönetmek üzere yapılandırılır: başlangıç (varsayılan) durumu ve font yüklendikten sonraki durum.

/*
 * Başlangıç Durumu: 
 * Element, 'display: none' ile layout akışının ve render tree'nin tamamen dışındadır.
 * Bu, font yüklenene kadar sıfır CLS'i garanti eder.
 * Transition, sadece opacity üzerinde çalışacak şekilde ayarlanır.
 */.material-symbols-outlined {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/*
 * Son Durum (.fonts-loaded aktif olduğunda):
 * Element, 'display: inline-block' ile layout'a dahil edilir.
 * Bu aşamada font zaten yüklü olduğundan, boyutları stabildir ve reflow'a neden olmaz.
 * Opacity 1'e çekilerek element görünür hale getirilir.
 */.fonts-loaded .material-symbols-outlined {
  display: inline-block;
  opacity: 1;
}

/*
 * Başlangıç Durumu: 
 * Element, 'display: none' ile layout akışının ve render tree'nin tamamen dışındadır.
 * Bu, font yüklenene kadar sıfır CLS'i garanti eder.
 * Transition, sadece opacity üzerinde çalışacak şekilde ayarlanır.
 */
.material-symbols-outlined {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/*
 * Son Durum (.fonts-loaded aktif olduğunda):
 * Element, 'display: inline-block' ile layout'a dahil edilir.
 * Bu aşamada font zaten yüklü olduğundan, boyutları stabildir ve reflow'a neden olmaz.
 * Opacity 1'e çekilerek element görünür hale getirilir.
 */
.fonts-loaded .material-symbols-outlined {
  display: inline-block;
  opacity: 1;
}

JavaScript Katmanı: CSS Font Loading API Entegrasyonu

Aşağıdaki async IIFE (Immediately Invoked Function Expression), sayfa yüklenir yüklenmez çalışarak font durumunu izler.

<script>
  (async () => {
    // 'document.fonts.load()' metodu, belirtilen fontun yüklenmesi tamamlandığında
    // resolve olan bir Promise döndürür.
    // Metodun ilk argümanı, fontun stilini ve ailesini belirten bir string'dir ('[style] [weight] [size] [family]').
    // Boyut ('1em') belirtmek API'nin bir gereksinimidir.
    try {
      await document.fonts.load('1em "Material Symbols Outlined"');
      
      // Promise başarıyla resolve olduğunda, fontun kullanılabilir olduğu garanti edilir.
      // Bu noktada, DOM'un kök elementine (.documentElement yani <html>)
      // sentinel sınıfı eklenir. Bu, CSS kurallarını verimli bir şekilde tetikler.
      document.documentElement.classList.add('fonts-loaded');
    } catch (error) {
      // Fontun yüklenememesi (örn. network hatası) durumunda hata yönetimi.
      console.error('Material Symbols font could not be loaded, CLS mitigation failed.', error);
    }
  })();
</script>

<script>
  (async () => {
    // 'document.fonts.load()' metodu, belirtilen fontun yüklenmesi tamamlandığında
    // resolve olan bir Promise döndürür.
    // Metodun ilk argümanı, fontun stilini ve ailesini belirten bir string'dir ('[style] [weight] [size] [family]').
    // Boyut ('1em') belirtmek API'nin bir gereksinimidir.
    try {
      await document.fonts.load('1em "Material Symbols Outlined"');
      
      // Promise başarıyla resolve olduğunda, fontun kullanılabilir olduğu garanti edilir.
      // Bu noktada, DOM'un kök elementine (.documentElement yani <html>)
      // sentinel sınıfı eklenir. Bu, CSS kurallarını verimli bir şekilde tetikler.
      document.documentElement.classList.add('fonts-loaded');
    } catch (error) {
      // Fontun yüklenememesi (örn. network hatası) durumunda hata yönetimi.
      console.error('Material Symbols font could not be loaded, CLS mitigation failed.', error);
    }
  })();
</script>

Bu entegrasyon, Material Symbols ikonlarından kaynaklanan CLS sorununa karşı güçlü bir çözüm sunar. İkon elementinin mizanpaja dahil edilmesi, kritik render kaynağı olan font dosyasının mevcudiyetine programatik olarak bağlanmıştır. Element, yalnızca nihai ve değişmez geometrisi bilindiğinde render akışına dahil edildiğinden, font fallback’i ve sonrasındaki swap işleminden kaynaklanan re-layout ve mizanpaj kayması tamamen ortadan kaldırılır.

Bu yöntem, Core Web Vitals metriklerine duyarlı, performans odaklı uygulamalarda asenkron kaynak bağımlılıklarının neden olduğu render sorunlarını yönetmek için en ideal yöntemdir.