Ö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?)
Web içeriği yayınlamak için gerekli tek (ve en verimli) biçim nedir? yazı tiplerini nasıl kullanabilirim?
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.