Bu codelab'de, stil uygulanmamış metinlerin yanıp sönmesini (FOUT) önlemek için rel="preload" kullanarak web yazı tiplerini nasıl önceden yükleyeceğiniz gösterilmektedir.
Ölçüm
Öncelikle, herhangi bir optimizasyon eklemeden önce web sitesinin performansını ölçün.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a
basın. - Geliştirici Araçları'nı açmak için `Ctrl+Üst Karakter+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun işaretli olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
Oluşturulan Lighthouse raporu, Maksimum kritik yol gecikmesi bölümünde kaynakların getirilme 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 önceliklendirilen 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. Yani kritik kaynaklar (CSS, JS) indirilene kadar yüklenmezler.
Uygulamada getirilen kaynakların sırası şu şekildedir:
Web yazı tiplerini önceden yükleme
FOUT'u önlemek için hemen gerekli olan 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 alandan gelebileceğinden kaynağın CORS isteğiyle getirilip getirilmeyeceğini belirtir. Bu özellik olmadan, önceden yüklenen yazı tipi tarayıcı tarafından yoksayılır.
Pacifico-Bold, sayfa başlığında kullanıldığından daha hızlı getirilmesi için bir önceden yükleme etiketi ekledik. Pacifico.woff2 yazı tipini önceden yüklemek önemli değildir çünkü bu yazı tipi, ekranın alt kısmındaki metni biçimlendirir.
Uygulamayı yeniden yükleyin ve Lighthouse'u 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. Uygulamada daha önce alınır.
Önceden yükleme sayesinde tarayıcı, bu dosyayı daha önce indirmesi gerektiğini bilir. Doğru kullanılmadığı takdirde önceden yüklemenin, kullanılmayan kaynaklar için gereksiz istekler göndererek performansa zarar verebileceğini unutmayın.