Bu codelab'de, kaldırmak için rel="preload" kullanılarak web yazı tiplerinin nasıl önceden yükleneceği gösterilmektedir
biçimlendirilmemiş metin flash (FOUT).
Ölçüm
Herhangi bir optimizasyon eklemeden önce ilk olarak web sitesinin nasıl performans gösterdiğini ölçün.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından,
Tam ekran
. - Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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 raporu, Maksimum kritik yol gecikmesi altında kaynakların getirme sırasını gösterir.
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. Genellikle, web yazı tipleri geç yüklenir. Bu nedenle, kritik kaynaklar (CSS, JS) indirilene kadar yüklenmezler.
Uygulamada getirilen kaynakların sırası aşağıda verilmiştir:
Web yazı tiplerini önceden yükleme
FOUT'tan kaçınmak için gerekli olan web yazı tiplerini hemen önceden yükleyebilirsiniz. Bu uygulama için Link öğesini dokümanın 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 bildirir ve kaynak sırasının önceliklendirilmesine yardımcı olur.
crossorigin özelliği, yazı tipi farklı bir alandan gelebileceği için kaynağın CORS isteğiyle getirilmesi gerekip gerekmediğini belirtir. Bu özellik olmadan, önceden yüklenmiş yazı tipi tarayıcı tarafından yoksayılır.
Sayfa başlığında Pacifico-Bold kullanıldığından, sayfayı daha kısa sürede getirmek için bir önceden yükleme etiketi ekledik. Ekranın alt kısmındaki metnin stil özelliklerini ayarladığından, Pacifico.woff2 yazı tipini önceden yüklemek ö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. Uygulamanın daha önceki bölümlerinde alınır.
Önceden yükleme ile tarayıcı bu dosyayı daha önce indirmesi gerektiğini bilir. Doğru kullanılmazsa önceden yüklemenin kullanılmayan kaynaklar için gereksiz isteklerde bulunarak performansı olumsuz etkileyebileceğini unutmayın.