Merhaba arkadaşlar, bugün başımı çok ağrıtan bir sorundan ve en temiz çözümünden bahsedeceğim. Özellikle Google Fonts veya Typekit gibi harici font kullandığımız projelerde, font yüklenene kadar yazıların görünmemesi (FOIT) veya anlık sistem fontuyla gözüküp sonra değişmesi (FOUT) kullanıcı deneyimini ciddi anlamda bozuyordu. Hem de Lighthouse skorlarını düşürüyordu. İşte bu iki canavarla nasıl başa çıktığımı anlatacağım.
Karşılaştığım Sorun ve Lighthouse Skor Düşüşü
Bir e-ticaret projesinde, başlıklar için harika bir Google Font kullanmıştım. Ancak sayfa açılışında, yaklaşık 1-2 saniye boyunca yazılar tamamen görünmüyordu! Sonra aniden beliriyorlardı. Bu, FOIT (Flash of Invisible Text) denen olaydı. Lighthouse'ta 'Ensure text remains visible during webfont load' uyarısını alıyordum ve Performance skorum bundan dolayı düşüyordu. Kullanıcı, içeriği göremeyince hemen çıkma oranı artıyordu. Bu sorunu çözmek şarttı.
Çözüm: `font-display: swap` ve Preload
Araştırmalarım sonucu, CSS'teki `@font-face` kuralına eklenebilen `font-display` özelliğinin tam da bu iş için yaratıldığını öğrendim. `swap` değeri, tarayıcıya "Font henüz yüklenmediyse, hemen sistem fontunu göster, font yüklenince de onunla değiştir" talimatını veriyor. Böylece kullanıcı içeriği anında görüyor (FOUT), font geldiğinde de güzel görünüme kavuşuyor.
İşte basit bir kullanım örneği:
Ancak sadece `swap` yetmez! Fontun mümkün olan en hızlı şekilde yüklenmesi için, özellikle kritik fontları (logo, başlık fontu) `<link rel="preload">` ile ön yüklemek gerekiyor. Bu, tarayıcıya "Bu font çok önemli, onu diğer kaynaklardan önce yükle" demenin yoluydu.
Sonuçlar ve Performans Artışı
Bu iki taktiği uyguladıktan sonraki sonuçlar inanılmazdı. FOIT sorunu tamamen ortadan kalktı. Kullanıcılar içeriği anında görmeye başladı. Lighthouse performans skorum, özellikle First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) metriklerinde gözle görülür bir iyileşme yaşadı. Artık o can sıkıcı uyarıyı da almıyordum.
Elbette, FOUT (font değişimi) yaşanıyor ama bu, görünmez yazıdan katbekat iyi bir deneyim. Ayrıca, `font-display: optional` veya `block` gibi başka değerler de var, ancak benim deneyimlerime göre `swap` en dengeli ve kullanışlı olanı.
Siz projelerinizde harici font kullanırken FOIT/FOUT sorunuyla karşılaştınız mı? Lighthouse skorunuzu yükseltmek için `font-display` dışında farklı hangi yöntemleri denediniz? Benimle paylaşın, tartışalım!
Karşılaştığım Sorun ve Lighthouse Skor DüşüşüBir e-ticaret projesinde, başlıklar için harika bir Google Font kullanmıştım. Ancak sayfa açılışında, yaklaşık 1-2 saniye boyunca yazılar tamamen görünmüyordu! Sonra aniden beliriyorlardı. Bu, FOIT (Flash of Invisible Text) denen olaydı. Lighthouse'ta 'Ensure text remains visible during webfont load' uyarısını alıyordum ve Performance skorum bundan dolayı düşüyordu. Kullanıcı, içeriği göremeyince hemen çıkma oranı artıyordu. Bu sorunu çözmek şarttı.
Çözüm: `font-display: swap` ve PreloadAraştırmalarım sonucu, CSS'teki `@font-face` kuralına eklenebilen `font-display` özelliğinin tam da bu iş için yaratıldığını öğrendim. `swap` değeri, tarayıcıya "Font henüz yüklenmediyse, hemen sistem fontunu göster, font yüklenince de onunla değiştir" talimatını veriyor. Böylece kullanıcı içeriği anında görüyor (FOUT), font geldiğinde de güzel görünüme kavuşuyor.
İşte basit bir kullanım örneği:
CSS:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.woff2) format('woff2');
}Ancak sadece `swap` yetmez! Fontun mümkün olan en hızlı şekilde yüklenmesi için, özellikle kritik fontları (logo, başlık fontu) `<link rel="preload">` ile ön yüklemek gerekiyor. Bu, tarayıcıya "Bu font çok önemli, onu diğer kaynaklardan önce yükle" demenin yoluydu.
HTML:
<!-- Google Fonts link etiketinin hemen üstüne ekliyorum -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">Bu iki taktiği uyguladıktan sonraki sonuçlar inanılmazdı. FOIT sorunu tamamen ortadan kalktı. Kullanıcılar içeriği anında görmeye başladı. Lighthouse performans skorum, özellikle First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) metriklerinde gözle görülür bir iyileşme yaşadı. Artık o can sıkıcı uyarıyı da almıyordum.
Elbette, FOUT (font değişimi) yaşanıyor ama bu, görünmez yazıdan katbekat iyi bir deneyim. Ayrıca, `font-display: optional` veya `block` gibi başka değerler de var, ancak benim deneyimlerime göre `swap` en dengeli ve kullanışlı olanı.
Siz projelerinizde harici font kullanırken FOIT/FOUT sorunuyla karşılaştınız mı? Lighthouse skorunuzu yükseltmek için `font-display` dışında farklı hangi yöntemleri denediniz? Benimle paylaşın, tartışalım!