Lighthouse font-display değerini otomatik olarak kontrol edemedi hatası

Google PageSpeed analizinde Lighthouse’un verdiği “font-display değerini otomatik olarak kontrol edemedi” hatası, genellikle sayfanızda kullanılan fontların font-display özelliği ile ilgili bir sorunu işaret eder. Bu özellik, fontların ne zaman ve nasıl yüklenip görüntüleneceğini kontrol eder ve optimizasyon açısından önemli bir rol oynar. Lighthouse, sayfanızda kullanılan fontların doğru şekilde yönetildiğini kontrol eder ve bu hatayı verirken, fontlarınızın font-display değeri ile ilgili bir eksiklik veya yanlış yapılandırma olduğunu belirtiyor olabilir.

font-display nedir?

font-display CSS özelliği, web fontlarının nasıl yükleneceğini ve nasıl görüntüleneceğini belirler. Bu özellik, özellikle fontların yüklenmesi sırasında kullanıcı deneyimini iyileştirmeyi amaçlar. Aşağıdaki değerler kullanılabilir:

1. auto: Varsayılan değerdir. Tarayıcı, fontun nasıl yüklenmesi gerektiğini kendi kararına bırakır.
2. block: Font hemen yüklenene kadar (genellikle 3 saniye) metin görünmez olur ve font yüklendikten sonra görünür hale gelir.
3. swap: Font yüklenene kadar sistem fontu veya geçici bir font gösterilir. Font yüklendikten sonra, font hızlıca değiştirilir.
4. fallback: Font yüklendikten sonra, önceki fontu değiştirmez. Font yüklenene kadar geçici bir font kullanılır.
5. optional: Fontun yüklenmesi, kullanıcı deneyimi için kritik değilse, fontun yüklenip yüklenmeyeceğini tarayıcıya bırakır.

“font-display değerini otomatik olarak kontrol edemedi” hatası nasıl düzeltilir?

Bu hatanın birkaç olası nedeni ve çözümü olabilir:

• Fontlara font-display özelliği ekleyin: Web sitenizde kullanılan fontların her biri için font-display özelliği eklediğinizden emin olun. Örneğin, fontlarınız şu şekilde yükleniyorsa:

@font-face {
font-family: 'MyCustomFont';
src: url('path-to-font.woff2') format('woff2'),
url('path-to-font.woff') format('woff');
font-display: swap; /* Buraya font-display değeri ekleyin */
}

Burada, font-display: swap; değeri kullanarak fontun yüklenmesi tamamlanana kadar sistem fontunun görünmesini sağlıyoruz.

• Google Fonts Kullanıyorsanız: Eğer Google Fonts kullanıyorsanız, font-display özelliğini eklemek için bağlantıyı aşağıdaki gibi değiştirebilirsiniz:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Burada display=swap parametresi, font yüklenene kadar geçici bir font gösterileceğini belirtir.

• Fontları dışarıdan yüklerken doğru yapılandırma yapın: Eğer fontları bir CDN ya da başka bir dış kaynaktan yüklüyorsanız, kaynakların doğru şekilde yüklendiğinden ve font-display özelliğinin her font için belirtildiğinden emin olun.
• Dinamik Yüklenen Fontlar: Eğer JavaScript kullanarak fontları dinamik olarak yükliyorsanız, font-display değerini bu yükleme işlemiyle uyumlu hale getirecek şekilde yapılandırmayı unutmayın.
• Lighthouse’u yeniden çalıştırın: Değişikliklerinizi yaptıktan sonra, Lighthouse raporunu tekrar çalıştırarak hatanın çözülüp çözülmediğini kontrol edin.

Lighthouse’un “font-display değerini otomatik olarak kontrol edemedi” hatasını çözmek için fontlarınızda font-display özelliğini uygun bir şekilde kullanmanız gerekmektedir. Genellikle bu hatayı çözmek için font-display: swap; kullanmak en iyi çözümdür, çünkü bu, fontlar yüklenene kadar sistem fontunun gösterilmesini ve daha sonra fontların doğru şekilde yüklenmesini sağlar.