Bu codelab'de, biçimlendirilmemiş metin flaşlarını (FOUT) kaldırmak için rel="preload" kullanarak web yazı tiplerinin nasıl önceden yükleneceği gösterilmektedir.
Ölçüm
Optimizasyon eklemeden önce web sitesinin nasıl performans gösterdiğini ölçün.
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a
basın. - Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
Oluşturulan Lighthouse raporunda Maksimum kritik yol gecikmesi altında kaynakların getiri sırası gösterilir.
Yukarıdaki denetimde web yazı tipleri kritik istek zincirinin bir parçasıdır ve en son getirilir. Kritik istek zinciri, tarayıcı tarafından öncelik verilen ve getirilen kaynakların sırasını temsil eder. Bu uygulamada, web yazı tipleri (Pacfico ve Pacifico-Bold), @font-face kuralı kullanılarak tanımlanır ve kritik istek zincirinde tarayıcı tarafından getirilen son kaynaktır. Web yazı tipleri genellikle geç yüklenir. Diğer bir deyişle, kritik kaynaklar (CSS, JS) indirilene kadar yüklenmezler.
Uygulamada getirilen kaynakların sırası aşağıda verilmiştir:
Web yazı tipleri önceden yükleniyor
FOUT sorununu önlemek için hemen gerekli web yazı tiplerini önceden yükleyebilirsiniz. Bu uygulama için Link öğesini belgenin başına ekleyin:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
as="font" type="font/woff2" özellikleri, tarayıcıya bu kaynağı yazı tipi olarak indirmesini söyler ve kaynak sırasının önceliklendirilmesine yardımcı olur.
crossorigin özelliği, yazı tipi farklı bir alan adından gelebileceği için kaynağın CORS isteğiyle getirilip getirilmeyeceğini belirtir. Bu özellik olmadan, önceden yüklenmiş yazı tipi tarayıcı tarafından yok sayılır.
Sayfa üst bilgisinde Pacifico-Bold kullanıldığından, sayfayı daha da erken getirmek için bir ön yükleme etiketi ekledik. Ekranın alt kısmındaki metni biçimlendirdiği için Pacifico.woff2 yazı tipinin önceden yüklenmesi önemli değildir.
Uygulamayı yeniden yükleyin ve deniz fenerini tekrar çalıştırın. Maksimum kritik yol gecikmesi bölümünü kontrol edin.
Pacifico-Bold.woff2 öğesinin kritik istek zincirinden nasıl kaldırıldığına dikkat edin. Etkinlik, uygulamada daha önce getirilir.
Önceden yükleme ile tarayıcı bu dosyayı daha önce indirmesi gerektiğini bilir. Önceden yüklemenin, doğru şekilde kullanılmadığı takdirde, kullanılmayan kaynaklar için gereksiz isteklerde bulunarak performansa zarar verebileceğini unutmayın.