Merhaba arkadaşlar, bugün performans optimizasyonu yaparken gözüme çarpan ve birçok projede göz ardı ettiğimiz bir dış bağımlılıktan bahsedeceğim: Google Fonts. Bir projede Lighthouse audit çalıştırdığımda, "Eliminate render-blocking resources" uyarısını görünce kafayı yemiştim. Kaynak, sitenin ilk açılışında fontları çekmek için yapılan DNS sorgusu ve harici istekti. İşte bu bağımlılığı nasıl kaldırdığımı anlatacağım.
Sorunun Kökeni: Harici Font Bağımlılığı
Normalde fontu şöyle ekliyoruz değil mi? Bu kod, fontu Google'ın sunucularından çekmek için bir CSS isteği ve bir de öncesinde DNS sorgusu oluşturuyor. Sayfa yüklenirken bu işlemler bitene kadar render işlemi beklemek zorunda kalabiliyor. Ayrıca, kullanıcının Google servislerine erişim problemi varsa (örneğin belli bölgelerde) fontlar hiç yüklenmeyebiliyor ve fallback fontlara geçiş yapılıyor. Bu da tasarım bütünlüğünü bozuyor.
Çözüm: Fontları Yerelleştirme (Self-Hosting)
Çözüm aslında basit: Font dosyalarını (.woff2, .woff) kendi sunucuma indirip, oradan servis etmek. Böylece harici bir DNS sorgusu ve istek kalmıyor. Tüm font assets'lerim kendi CDN'imden veya sunucumdan geliyor. İşlem adımları şöyle:
1. İstediğiniz font ailesini Google Fonts'ta seçin.
2. "Download family" butonu ile tüm font dosyalarını (genellikle .woff2 formatı yeterli) bilgisayarınıza indirin.
3. Bu dosyaları projenizin uygun bir dizinine atın (örneğin: `/public/fonts/` veya `/assets/fonts/`).
CSS ile Yerel Fontu Tanımlama
Artık fontu harici bir link ile değil, kendi yazacağımız bir `@font-face` kuralı ile tanımlayacağız. Burada dikkat edilmesi gereken nokta, font dosyasının projedeki yolunu doğru vermek ve font ağırlığını (weight) ve stili (italic) doğru belirtmek.
İşte benim kullandığım en temiz çözüm örneği. Diyelim ki "Inter" fontunu indirdik ve `woff2` dosyalarımız `public/fonts/` altında.
Buradaki font-display: swap; kritik öneme sahip. Bu özellik, font yüklenene kadar sistem fontunu göstermeye (swap) izin verir, böylece metinler görünmez olmaz (FOIT). Font yüklendiğinde otomatik olarak değiştirilir.
Elde Ettiğimiz Kazanımlar
Bu değişikliği yaptıktan sonra Lighthouse skorlarımda gözle görülür bir iyileşme oldu. Harici bir kaynağa bağımlılık kalmadığı için:
DNS sorgusu ortadan kalktı.
Render engelleyici kaynak (render-blocking resource) uyarısı gitti.
Fontların yüklenme garantisi %100 oldu (kendi sunucunuz çökmemişse tabii
).
GDPR gibi veri gizliliği düzenlemeleri açısından da ekstra bir avantaj sağladı, çünkü kullanıcının Google'a istek göndermesini engellemiş olduk.
Tabii ki font dosyalarının boyutuna dikkat etmek ve sadece ihtiyacımız olan ağırlık ve stilleri eklemek önemli. Aksi takdirde gereksiz dosya boyutu artışı olabilir.
Siz projelerinizde fontları nasıl yönetiyorsunuz? Hiç Google Fonts'un yavaşlığından veya erişilemezliğinden mustarip oldunuz mu? Ya da fontları yerelleştirmenin daha pratik bir yolu var mı? Yorumlarda deneyimlerinizi paylaşın!
Sorunun Kökeni: Harici Font BağımlılığıNormalde fontu şöyle ekliyoruz değil mi? Bu kod, fontu Google'ın sunucularından çekmek için bir CSS isteği ve bir de öncesinde DNS sorgusu oluşturuyor. Sayfa yüklenirken bu işlemler bitene kadar render işlemi beklemek zorunda kalabiliyor. Ayrıca, kullanıcının Google servislerine erişim problemi varsa (örneğin belli bölgelerde) fontlar hiç yüklenmeyebiliyor ve fallback fontlara geçiş yapılıyor. Bu da tasarım bütünlüğünü bozuyor.
Çözüm: Fontları Yerelleştirme (Self-Hosting)Çözüm aslında basit: Font dosyalarını (.woff2, .woff) kendi sunucuma indirip, oradan servis etmek. Böylece harici bir DNS sorgusu ve istek kalmıyor. Tüm font assets'lerim kendi CDN'imden veya sunucumdan geliyor. İşlem adımları şöyle:
1. İstediğiniz font ailesini Google Fonts'ta seçin.
2. "Download family" butonu ile tüm font dosyalarını (genellikle .woff2 formatı yeterli) bilgisayarınıza indirin.
3. Bu dosyaları projenizin uygun bir dizinine atın (örneğin: `/public/fonts/` veya `/assets/fonts/`).
CSS ile Yerel Fontu TanımlamaArtık fontu harici bir link ile değil, kendi yazacağımız bir `@font-face` kuralı ile tanımlayacağız. Burada dikkat edilmesi gereken nokta, font dosyasının projedeki yolunu doğru vermek ve font ağırlığını (weight) ve stili (italic) doğru belirtmek.
İşte benim kullandığım en temiz çözüm örneği. Diyelim ki "Inter" fontunu indirdik ve `woff2` dosyalarımız `public/fonts/` altında.
CSS:
/ Inter Regular /
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter-regular.woff2') format('woff2');
}
/ Inter Bold /
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/inter-bold.woff2') format('woff2');
}
/ Inter Italic /
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter-italic.woff2') format('woff2');
}Buradaki font-display: swap; kritik öneme sahip. Bu özellik, font yüklenene kadar sistem fontunu göstermeye (swap) izin verir, böylece metinler görünmez olmaz (FOIT). Font yüklendiğinde otomatik olarak değiştirilir.
Elde Ettiğimiz KazanımlarBu değişikliği yaptıktan sonra Lighthouse skorlarımda gözle görülür bir iyileşme oldu. Harici bir kaynağa bağımlılık kalmadığı için:
DNS sorgusu ortadan kalktı.
Render engelleyici kaynak (render-blocking resource) uyarısı gitti.
Fontların yüklenme garantisi %100 oldu (kendi sunucunuz çökmemişse tabii
).GDPR gibi veri gizliliği düzenlemeleri açısından da ekstra bir avantaj sağladı, çünkü kullanıcının Google'a istek göndermesini engellemiş olduk.
Tabii ki font dosyalarının boyutuna dikkat etmek ve sadece ihtiyacımız olan ağırlık ve stilleri eklemek önemli. Aksi takdirde gereksiz dosya boyutu artışı olabilir.
Siz projelerinizde fontları nasıl yönetiyorsunuz? Hiç Google Fonts'un yavaşlığından veya erişilemezliğinden mustarip oldunuz mu? Ya da fontları yerelleştirmenin daha pratik bir yolu var mı? Yorumlarda deneyimlerinizi paylaşın!