Yükleme hızını iyileştirmek için web yazı tiplerini önceden yükleyin

Garima Mimani
Garima Mimani

Bu codelab'de, biçimlendirilmemiş metin Flash'ı (FOUT) kaldırmak için rel="preload" kullanarak web yazı tiplerini nasıl önceden yükleyeceğiniz gösterilmektedir.

Ölçüm

Herhangi bir optimizasyon eklemeden önce ilk olarak web sitesinin nasıl performans gösterdiğini ölçün.

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  3. Lighthouse sekmesini tıklayın.
  4. Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
  5. Rapor oluştur düğmesini tıklayın.

Oluşturulan Lighthouse raporunda, Maksimum kritik yol gecikmesi bölümünde kaynakların getirme sırası gösterilir.

Web yazı tipleri kritik istek zincirinde bulunur.

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 yavaş yüklenir. Bu, kritik kaynaklar (CSS, JS) indirilene kadar yüklenmeyecekleri anlamına gelir.

Uygulamada getirilen kaynakların sırası aşağıda verilmiştir:

Web yazı tipleri geç yüklenir.

Web yazı tiplerini önceden yükleme

FOUT'ten kaçınmak için hemen gerekli olan web yazı tiplerini önceden yükleyebilirsiniz. Bu uygulamanın 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 söyler ve kaynak kuyruğuna öncelik verilmesine yardımcı olur.

crossorigin özelliği, yazı tipi farklı bir alandan 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.

Pacifico-Bold, sayfa başlığında kullanıldığı için daha da hızlı getirmek için bir ön yükleme etiketi ekledik. Pacifico.woff2 yazı tipi, sayfanın altındaki metnin stilini belirlediği için önceden yüklenmesi önemli değildir.

Uygulamayı yeniden yükleyin ve Lighthouse'u tekrar çalıştırın. Maksimum kritik yol gecikmesi bölümünü kontrol edin.

Pacifico-Bold web yazı tipi önceden yüklenir ve kritik istek zincirinden kaldırılır

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.

Pacifico-Bold web yazı tipi önceden yüklenir.

Ön yükleme sayesinde tarayıcı, bu dosyayı daha önce indirmesi gerektiğini bilir. Doğru şekilde kullanılmazsa ön yüklemenin, kullanılmayan kaynaklar için gereksiz istekler göndererek performansa zarar verebileceğini unutmayın.