Yazı tipleri genellikle uzun yükleme sürelerine sahip büyük dosyalardır. Bazı tarayıcılar, yazı tipi yüklenene kadar metni gizler. Bu durum, görünmez metnin (FOIT) yanıp sönmesine neden olur.
Lighthouse yazı tipi görüntüleme denetimi nasıl başarısız oluyor?
Lighthouse görünmez metin yanıp sönebilen yazı tipi URL'lerini işaretler:
![Lighthouse metninin ekran görüntüsü, web yazı tipi yüklemeleri denetimi sırasında görünür durumda kalmalıdır](https://developer.chrome.com/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=5&hl=tr)
Görünmez metin nasıl gösterilmez?
font-display
API, bir yazı tipinin font-face
stilinde kullanıldığında nasıl görüntüleneceğini belirtir. Özel yazı tipi hazır değilse aşağıdaki font-display
değerleri, tarayıcıya bir sistem yazı tipini kullanmasını bildirecektir:
swap
optional
fallback
CSS Örneği
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Google Yazı Tipleri Örneği
Google Fonts URL'nizin sonuna &display=swap
/&display=optional
/&display=fallback
parametresini ekleyin:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
Ertelenmiş yazı tiplerinden kaynaklanan düzen kaymalarını önleme
Bir sistem yazı tipinin geçici olarak gösterilmesi, FOIT'in yerini biçimlendirilmemiş metin (FOUT) ile değiştirir. Bu, içeriği daha erken oluşturarak FCP&LCP'yi iyileştirir ancak özel yazı tipi geçici sistem yazı tipinin yerini aldığında FOIT ve FOUT CLS üzerinde aynı etkiye sahip olur.
Yazı tipi yüklemesinin CLS etkisi, font-display: optional
ile birlikte ön yüklemeler kullanılarak azaltılabilir.
Bununla birlikte, önceden yüklemeleri aşırı kullanmak yük metriklerini olumsuz etkileyebilir. Yazı tiplerinin önceden yüklenmesinin herhangi bir performans regresyonuna yol açmadığından emin olmak için A/B testi yapmanızı öneririz.
Yığına özel kılavuz
Drupal
Temanızda özel yazı tipleri tanımlarken @font-display
değerini belirtin.
Magento
Özel yazı tipleri tanımlarken @font-display
değerini belirtin.
Kaynaklar
- Web yazı tipi yüklemesi sırasında metnin görünür kalmasını sağlama denetimi için kaynak kodu
- Yükleme sırasında görünmeyen metin olmaması
- Yazı tipi ekranlarıyla yazı tipi performansını kontrol etme
- Yükleme hızını iyileştirmek için web yazı tiplerini önceden yükleme (codelab)
- İsteğe bağlı yazı tiplerini önceden yükleyerek düzen kaymasını ve görünmez metin (FOIT) olarak yanıp sönmesini önleyin