Web yazı tiplerini optimize etme

Önceki modüllerde, HTML, CSS, JavaScript ve Google Ads'in ve medya kaynakları. Bu modülde, web sitenizi optimize etmek için yazı tipleri.

Web yazı tipleri, hem yükleme süresinde hem de oluşturma süresinde sayfa performansını etkileyebilir. Büyük yazı tipi dosyalarının indirilmesi zaman alabilir ve Öncelikle Zengin İçerikli Boyama (FCP), yanlış font-display değeri ise bir sayfanın Cumulative Layout Shift'ine katkıda bulunan istenmeyen düzen kaymaları (CLS) başlıklı makaleyi inceleyin.

Web yazı tiplerini optimize etmeden önce, yazı tiplerinin yardımcı olabilir, böylece CSS'nin web sitenizin güvenliğini nasıl engellediğini bazı durumlarda gereksiz web yazı tiplerinin geri alınmasını sağlar.

Discovery

Bir sayfanın web yazı tipleri bir stil sayfasında @font-face kullanılarak tanımlanır beyan:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Önceki kod snippet'i, "Open Sans" adlı bir font-family ve tarayıcıya ilgili web yazı tipi kaynağını nerede bulacağını bildirir. Korumak için tarayıcı, belirlenene kadar web yazı tipini indirmez. olması gerekir.

h1 {
  font-family: "Open Sans";
}

Tarayıcı, önceki CSS snippet'inde "Open Sans" yazı tipi dosyasını indirir bu işlem, sayfanın HTML'sindeki <h1> öğesini ayrıştırır.

preload

@font-face beyanlarınız harici bir stil sayfasında tanımlanmışsa tarayıcı ancak stil sayfasını indirdikten sonra bunları indirmeye başlayabilir. Bu, web yazı tiplerini geç keşfedilen kaynaklar yapar, ancak web yazı tiplerini daha erken keşfedin.

preload kullanarak web yazı tipi kaynakları için erken bir istek başlatabilirsiniz yönergesini inceleyin. preload yönergesi, web yazı tiplerinin erken aşamalarda keşfedilebilir olmasını sağlar sayfa yüklendiğinde tarayıcı beklemeden bunları hemen indirmeye başlar indirme işlemini ve ayrıştırmayı bitirmek için stil sayfasının indirilmesini sağlar. preload yönergesi sayfada yazı tipi gerekene kadar beklemez.

<!-- The `crossorigin` attribute is required for fonts—even
     self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>

Satır içi @font-face bildirimleri

Satır içi satır öğeleri ile yazı tiplerini sayfa yükleme işlemi sırasında daha erken bulunabilir hale getirebilirsiniz <head> içindeki @font-face bildirimleri de dahil olmak üzere oluşturma önleyici CSS <style> öğesini kullanarak HTML'nizi değiştirin. Bu durumda, tarayıcı harici bir bağlantı yüklenmesi gerekmeyeceğinden, yükleme sırasında web yazı tipleri stil sayfasını indirin.

@font-face beyanı satır içine almak, preload kullanımına kıyasla daha avantajlıdır (tarayıcı, yalnızca mevcut yazı tipini oluşturmak için gerekli yazı tiplerini sayfasını ziyaret edin. Bu, kullanılmayan yazı tiplerini indirme riskini ortadan kaldırır.

İndir

Web yazı tiplerini keşfettikten ve geçerli sayfanın özellikleri için bunlara uygun olduklarından emin olduktan sonra tarayıcı bunları indirebilir. Web yazı tiplerinin sayısı, kodlamaları, ve dosya boyutları bir web yazı tipinin ne kadar hızlı yüklendiğini indirilip oluşturulur.

Web yazı tiplerinizi kendi kendinize barındırın

Web yazı tipleri, Google Fonts gibi üçüncü taraf hizmetler üzerinden yayınlanabilir veya kendi kaynağınızda barındırılabilir. Üçüncü taraf bir hizmet kullanırken web sayfa başlatılmadan önce sağlayıcının alan adıyla bir bağlantı açması gerekir gerekli web yazı tiplerini indirme. Bu, keşif ve sonraki aşamalarda yaşanan indirme.

Bu ek yük, preconnect kaynak ipucu kullanılarak azaltılabilir. Şunu kullanarak: preconnect, tarayıcıya çapraz kaynakla bağlantı açmasını söyleyebilirsiniz daha kısa sürede düzenlemenizi sağlar:

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Önceki HTML snippet'i, tarayıcının web sunucusuyla bağlantı kurup fonts.googleapis.com ve fonts.gstatic.com ağına CORS bağlantısı. Biraz Google Fonts gibi yazı tipi sağlayıcıları, farklı CSS ve yazı tipi kaynaklarını sunar kaynaklar.

Verilerinizi kendiniz barındırarak üçüncü taraf bağlantısı ihtiyacını ortadan kaldırabilirsiniz: Web yazı tipleri. Çoğu durumda, kendi kendini barındıran web yazı tipleri, bunları indirmekten daha hızlıdır. çok kolaylaşır. Kendi bünyesinde barındıran web yazı tiplerini kullanmayı düşünüyorsanız sitenizin İçerik Yayınlama Ağı (CDN), HTTP/2 veya HTTP/3 kullanıyorsa ve web sitenizde ihtiyacınız olan web yazı tipleri için doğru önbelleğe alma üstbilgileri.

Yalnızca WOFF2 ve WOFF2 kullanın

WOFF2 geniş tarayıcı desteğinden ve en iyi sıkıştırmadan% 30'a kadar daha iyi yararlanır WOFF'tan daha iyidir. Küçültülmüş dosya boyutu, indirme sürelerinin daha hızlı olmasını sağlar. WOFF2 biçimi, genellikle farklı cihazlarda tam uyumluluk için izin verir.

Web yazı tiplerinizi alt gruplara taşıyın

Web yazı tipleri genellikle gerekli olan çok çeşitli glifleri içerir temsil eder. Eğer sayfa yalnızca tek bir dilde içerik sunuyorsa (veya tek bir alfabe kullanıyorsa) alt ayarları yaparak web yazı tiplerinizin boyutunu küçültebilirsiniz. Bu genellikle proje yöneticisinin Bir sayı veya bir unicode kod noktası aralığı belirtmek.

Bir alt küme, orijinal web'de bulunan karakterleri içeren azaltılmış bir kümedir yazı tipi dosyası ekleyin. Örneğin, sayfanızda tüm karakterler yerine Latin alfabesindeki belirli bir alt karakter seti içerir. Gereken alt kümeye bağlı olarak, glifler, yazı tipi dosyasının boyutunu önemli ölçüde küçültebilir.

Google Fonts gibi bazı web yazı tipi sağlayıcıları, alt yazı tiplerini sorgu dizesi parametresinin kullanımı. Örneğin, https://fonts.googleapis.com/css?family=Roboto&subset=latin URL'si bir içeren ve yalnızca Latin alfabesini kullanan Roboto web yazı tipini içeren stil sayfası.

Web yazı tiplerinizi kendiniz barındırmaya karar verdiyseniz sonraki adım, glifanger veya alt yazı tipi gibi araçları kullanarak bu alt kümeleri kendiniz barındırabilirsiniz.

Ancak kendi web yazı tiplerinizi barındırma kapasitesine sahip değilseniz Ek bir text belirterek Google Fonts tarafından sağlanan web yazı tipleri alt kümesi yalnızca şunun için gerekli olan unicode kod noktalarını içeren sorgu dizesi parametresi: sitenizi ziyaret edin. Örneğin, sitenizde yalnızca "Hoş geldiniz" ifadesi için gereken az sayıda karaktere ihtiyaç duyarsa, bunları söz konusu alt kümeyi aşağıdaki URL aracılığıyla Google Fonts üzerinden isteyebilirsiniz: https://fonts.googleapis.com/css?family=Monoton&text=Welcome Bu Tek bir yazı tipi için gereken web yazı tipi verisi miktarını önemli ölçüde azaltır alt yazılar eklemenin uygun olup olmadığını kontrol edin.

Yazı tipi oluşturma

Tarayıcı bir web yazı tipini keşfedip indirdikten sonra, yazı tipini oluşturulur. Varsayılan olarak tarayıcı indirene kadar kullanılan bir web yazı tipidir. Tarayıcının metin oluşturma sürecini ayarlayabilirsiniz. ve web'e kadar hangi metnin gösterileceğini veya gösterilmeyeceğini yazı tipi, font-display CSS özelliği kullanılarak tamamen yüklendi.

block

font-display için varsayılan değer block. block ile tarayıcı belirtilen web yazı tipini kullanan metinlerin oluşturulmasını engeller. Farklı biraz farklı davranır. Chromium ve Firefox, şunun için oluşturmayı engelliyor: en fazla 3 saniye önce bitmelidir. Safari süresiz olarak engelliyor yazı tipi yüklenene kadar bekleyin.

swap

swap, en çok kullanılan font-display değeridir. swap engellenmiyor görüntüler ve metni hemen bir yedek içinde görüntüler, sonra da belirtilen web yazı tipi. Bu sayede, beklemeden içeriğinizi hemen gösterebilirsiniz indirin.

Ancak swap dezavantajı, yedek CSS'nizde belirtilen web yazı tipi ve web yazı tipi, satır açısından büyük farklılıklar gösterir. ve diğer yazı tipi metriklerini görebilirsiniz. Bu durum, aşağıdaki durumlarda web sitenizin CLS'sini etkileyebilir: bir web yazı tipi kaynağını hemen yüklemek için preload ipucunu kullanma veya diğer font-display değerlerini dikkate almazsanız.

fallback

font-display için fallback değeri, iki veya daha fazla block ve swap. swap işlevinin aksine, tarayıcı bir yazı tipinin oluşturulmasını engeller ancak yalnızca çok kısa bir süre için yedek metinle değiştirilir. block özelliğinden farklı olarak, Ancak engelleme süresi son derece kısadır.

fallback değeri, web yazı tipinin Web yazı tipi, sayfanın üst kısmında hemen kullanılan yazı tipidir. ilk oluşturma. Ancak ağlar yavaşsa yedek metin görünür engelleme süresi sona erdikten sonra ilk olarak ve ardından web yazı tipi geldiğinde.

optional

optional, en katı font-display değeri olup yalnızca web'i kullanır yazı tipi kaynağı 100 milisaniye içinde indirilirse. Bir web yazı tipi uzunsa sayfada kullanılmaz ve tarayıcı web yazı tipi indirilirken geçerli gezinme için kullanılacak yedek yazı karakteri arka planda ve tarayıcı önbelleğine yerleştirilir.

Sonuç olarak, sonraki sayfada gezinmeler için web yazı tipini hemen kullanabilirsiniz, zaten indirilmiş. font-display: optional, görülen düzen kaymasını önlüyor Ancak, yazı tipi swap ile çok geç gelirse, bazı kullanıcılar ilk sayfada gezinme.

Yazı tipi demoları

Bilginizi test etme

Tarayıcı bir web yazı tipi kaynağını ne zaman indiriyor (olmadığı varsayılarak bir preload yönergesiyle getirilir mi?)

Referans bir stil sayfasında bulunur bulunmaz.
Tekrar deneyin.
Sayfanın CSSOM'si oluşturulduğunda ve web yazı tipinin gerekli.
Doğru!

Web içeriği yayınlamak için gerekli tek (ve en verimli) biçim nedir? yazı tiplerini nasıl kullanabilirim?

WOFF2
Doğru!
WOFF
Tekrar deneyin.
TTF
Tekrar deneyin.
EOT
Tekrar deneyin.

Sıradaki: Koda bölünmüş JavaScript

Kullanabileceğiniz yazı tipi optimizasyonunu anladığınızda, bir sonraki modüle geçecek ve bu modülün sonunda ilk sayfa yükleme hızını ayarlayabilirsiniz. Bu da uygulamanın JavaScript ile kod bölme. Bunu yaparak bant genişliği ve CPU aşamasında mümkün olduğunca düşük çekişme olup olmadığını, Kullanıcıların etkileşim kurma olasılığının yüksek olduğu zaman dilimleridir.