Önceki modüllerde HTML, CSS, JavaScript ve medya kaynaklarını nasıl optimize edeceğinizi öğrendiniz. Bu modülde, web yazı tiplerini optimize etme yöntemlerini keşfedin.
Web yazı tipleri, sayfa performansını hem yükleme hem de oluşturma sırasında etkileyebilir.
Büyük yazı tipi dosyalarının indirilmesi biraz zaman alabilir ve İlk Anlamlı İçerik Boyama (FCP) değerini olumsuz etkileyebilir. Yanlış font-display
değeri ise sayfanın CLS (Kümülatif Düzen Kayması) değerine katkıda bulunan istenmeyen düzen kaymalarına neden olabilir.
Web yazı tiplerinin nasıl optimize edilebileceğini tartışmadan önce, tarayıcı tarafından nasıl keşfedildiklerini bilmek faydalı olabilir. Böylece, CSS'nin belirli durumlarda gereksiz web yazı tiplerinin alınmasını nasıl engellediğini anlayabilirsiniz.
Discovery
Bir sayfanın web yazı tipleri, @font-face
bildirimi kullanılarak bir stil sayfasında tanımlanır:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Yukarıdaki kod snippet'i, "Open Sans"
adlı bir font-family
tanımlar ve tarayıcıya ilgili web yazı tipi kaynağının nerede bulunacağını söyler. Tarayıcı, bant genişliğini korumak için web yazı tipini, geçerli sayfanın düzeninin bu yazı tipine ihtiyacı olduğu belirlenene kadar indirmez.
h1 {
font-family: "Open Sans";
}
Yukarıdaki CSS snippet'inde tarayıcı, sayfanın HTML'sindeki bir <h1>
öğesini ayrıştırırken "Open Sans"
yazı tipi dosyasını indirir.
preload
@font-face
beyanlarınız harici bir stil sayfasında tanımlanmışsa tarayıcı, bunları yalnızca stil sayfasını indirdikten sonra indirmeye başlayabilir.
Bu durum, web yazı tiplerini geç keşfedilen kaynaklar haline getirir. Ancak tarayıcının web yazı tiplerini daha erken keşfetmesine yardımcı olmanın yolları vardır.
preload
yönergesini kullanarak web yazı tipi kaynakları için erken istek başlatabilirsiniz. preload
yönergesi, web yazı tiplerinin sayfa yükleme sırasında erken keşfedilmesini sağlar ve tarayıcı, stil sayfasının indirilip ayrıştırılmasının tamamlanmasını beklemeden bunları hemen indirmeye başlar. preload
yönergesi, yazı tipi sayfada 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
beyanları
<style>
öğesini kullanarak HTML'nizin <head>
bölümüne @font-face
bildirimleri de dahil olmak üzere oluşturmayı engelleyen CSS'yi satır içi yaparak yazı tiplerinin sayfa yükleme sırasında daha erken keşfedilmesini sağlayabilirsiniz. Bu durumda tarayıcı, harici bir stil sayfasının indirilmesini beklemesi gerekmediğinden web yazı tiplerini sayfa yükleme sürecinde daha erken keşfeder.
@font-face
bildirimlerinin satır içi olarak kullanılması, preload
ipucunu kullanmaya göre daha avantajlıdır. Çünkü tarayıcı yalnızca mevcut
sayfayı oluşturmak için gereken yazı tiplerini indirir. Bu sayede, kullanılmayan yazı tiplerinin indirilmesi riski ortadan kalkar.
İndir
Web yazı tipleri keşfedildikten ve mevcut sayfanın düzeni için gerekli oldukları doğrulandıktan sonra tarayıcı bunları indirebilir. Web yazı tiplerinin sayısı, kodlaması ve dosya boyutu, web yazı tiplerinin tarayıcı tarafından ne kadar hızlı indirileceğini ve oluşturulacağını önemli ölçüde etkileyebilir.
Web yazı tiplerinizi kendiniz barındırma
Web yazı tipleri, Google Fonts gibi üçüncü taraf hizmetler aracılığıyla sunulabilir veya kaynağınızda kendi bünyenizde barındırılabilir. Üçüncü taraf hizmeti kullanırken web sayfanızın, gerekli web yazı tiplerini indirmeye başlamadan önce sağlayıcının alanına bağlantı açması gerekir. Bu durum, web yazı tiplerinin bulunmasını ve indirilmesini geciktirebilir.
Bu ek yük, preconnect
kaynak ipucu kullanılarak azaltılabilir. preconnect
kullanarak tarayıcıya, kaynaklar arası bağlantıyı normalde yapacağından daha erken açmasını söyleyebilirsiniz:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Yukarıdaki HTML snippet'i, tarayıcıya fonts.googleapis.com
ile bağlantı ve fonts.gstatic.com
ile CORS bağlantısı kurması için ipucu veriyor. Google Fonts gibi bazı yazı tipi sağlayıcılar, CSS ve yazı tipi kaynaklarını farklı kaynaklardan sunar.
Web yazı tiplerinizi kendiniz barındırarak üçüncü taraf bağlantısı ihtiyacını ortadan kaldırabilirsiniz. Çoğu durumda, web yazı tiplerini kendi sunucunuzda barındırmak, bunları kaynaklar arası bir kaynaktan indirmekten daha hızlıdır. Web yazı tiplerini kendiniz barındırmayı planlıyorsanız sitenizin içerik yayınlama ağı (CDN), HTTP/2 veya HTTP/3 kullandığını ve web siteniz için ihtiyaç duyduğunuz web yazı tipleri için doğru önbelleğe alma üstbilgilerini ayarladığını kontrol edin.
Yalnızca WOFF2 kullanın.
WOFF2, geniş tarayıcı desteğine ve en iyi sıkıştırmaya sahiptir. WOFF'tan% 30'a kadar daha iyi sıkıştırma sağlar. Dosya boyutunun küçülmesi, indirme sürelerini kısaltır. WOFF2 biçimi, modern tarayıcılarda tam uyumluluk için genellikle tek başına yeterlidir.
Web yazı tiplerinizi alt kümeye ayırma
Web yazı tipleri genellikle farklı dillerde kullanılan çok çeşitli karakterleri temsil etmek için gereken çok çeşitli farklı glifler içerir. Sayfanızda yalnızca tek bir dilde içerik yayınlanıyorsa veya tek bir alfabe kullanılıyorsa alt küme oluşturma yoluyla web yazı tiplerinizin boyutunu küçültebilirsiniz. Bu işlem genellikle bir sayı veya Unicode kod noktaları aralığı belirtilerek yapılır.
Alt küme, orijinal web yazı tipi dosyasında bulunan gliflerin azaltılmış bir kümesidir. Örneğin, sayfanız tüm glifleri sunmak yerine Latin karakterleri için belirli bir alt grubu sunabilir. Gerekli alt kümeye bağlı olarak, gliflerin kaldırılması yazı tipi dosyasının boyutunu önemli ölçüde azaltabilir.
Google Fonts gibi bazı web yazı tipi sağlayıcılar, sorgu dizesi parametresi kullanarak alt kümeleri otomatik olarak sunar. Örneğin, https://fonts.googleapis.com/css?family=Roboto&subset=latin
URL'si yalnızca Latin alfabesini kullanan Roboto web yazı tipine sahip bir stil sayfası sunuyor.
Web yazı tiplerinizi kendiniz barındırmaya karar verdiyseniz bir sonraki adım, glyphanger veya subfont gibi araçları kullanarak bu alt kümeleri kendiniz oluşturup barındırmaktır.
Ancak kendi web yazı tiplerinizi kendiniz barındırma olanağınız yoksa Google Fonts tarafından sağlanan web yazı tiplerini, yalnızca web siteniz için gerekli Unicode kod noktalarını içeren ek bir text
sorgu dizesi parametresi belirterek alt kümeye ayırabilirsiniz. Örneğin, sitenizde yalnızca "Hoş geldiniz" ifadesi için gereken az sayıda karakteri içeren bir görüntüleme web yazı tipi varsa aşağıdaki URL'yi kullanarak Google Fonts üzerinden bu alt kümeyi isteyebilirsiniz:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome
. Bu, web sitenizde tek bir yazı tipi için gereken web yazı tipi verilerinin miktarını önemli ölçüde azaltabilir. Ancak bu kadar kapsamlı bir alt küme oluşturma işlemi web sitenizde faydalı olmayabilir.
Yazı tipi oluşturma
Tarayıcı bir web yazı tipini keşfedip indirdikten sonra yazı tipi oluşturulabilir. Tarayıcı, varsayılan olarak indirilmeyen web yazı tiplerini kullanan metinlerin oluşturulmasını engeller. Tarayıcının metin oluşturma davranışını ayarlayabilir ve font-display
CSS özelliğini kullanarak web yazı tipi tamamen yüklenene kadar hangi metnin gösterileceğini veya gösterilmeyeceğini yapılandırabilirsiniz.
block
font-display
için varsayılan değer block
'dir. block
ile tarayıcı, belirtilen web yazı tipini kullanan metinlerin oluşturulmasını engeller. Farklı tarayıcılar biraz farklı şekilde davranır. Chromium ve Firefox, geri dönüşüm kullanmadan önce en fazla 3 saniye boyunca oluşturmayı engeller. Safari, web yazı tipi yüklenene kadar süresiz olarak engeller.
swap
swap
, en yaygın kullanılan font-display
değeridir. swap
, oluşturmayı engellemez ve belirtilen web yazı tipi değiştirilmeden önce metni hemen bir yedek yazı tipiyle gösterir. Bu sayede, web yazı tipinin indirilmesini beklemeden içeriğinizi hemen gösterebilirsiniz.
Ancak swap
'nın dezavantajı, yedek web yazı tipi ile CSS'nizde belirtilen web yazı tipi satır yüksekliği, karakter aralığı ve diğer yazı tipi metrikleri açısından büyük farklılıklar gösteriyorsa düzen kaymasına neden olmasıdır. Web yazı tipi kaynağını mümkün olan en kısa sürede yüklemek için preload
ipucunu kullanmaya özen göstermezseniz veya diğer font-display
değerlerini dikkate almazsanız bu durum web sitenizin CLS'sini etkileyebilir.
fallback
font-display
için fallback
değeri, block
ile swap
arasında bir uzlaşma niteliğindedir. swap
'dan farklı olarak tarayıcı, yazı tipinin oluşturulmasını engeller ancak yedek metni yalnızca çok kısa bir süre için değiştirir. block
'dan farklı olarak engelleme süresi çok kısadır.
fallback
değerinin kullanılması, web yazı tipinin hızlı bir şekilde indirildiği ve sayfanın ilk oluşturulmasında hemen kullanılan yazı tipinin web yazı tipi olduğu hızlı ağlarda iyi sonuç verebilir. Ancak ağlar yavaşsa engelleme süresi geçtikten sonra önce yedek metin gösterilir ve web yazı tipi geldiğinde bu metinle değiştirilir.
optional
optional
en katı font-display
değeridir ve yalnızca 100 milisaniye içinde indirilirse web yazı tipi kaynağını kullanır. Bir web yazı tipinin yüklenmesi bu süreden uzun sürerse sayfada kullanılmaz. Tarayıcı, web yazı tipi arka planda indirilip tarayıcı önbelleğine yerleştirilirken mevcut gezinme için yedek yazı tipini kullanır.
Bu nedenle, web yazı tipi daha önce indirildiği için sonraki sayfa gezinmelerinde hemen kullanılabilir. font-display: optional
, swap
ile görülen düzen kaymasını önler ancak bazı kullanıcılar, web yazı tipi ilk sayfa gezinme işleminde çok geç gelirse bu yazı tipini görmez.
Yazı tipi demoları
Bilginizi test etme
Tarayıcı, web yazı tipi kaynağını ne zaman indirir (preload
yönergesiyle getirilmediği varsayılır)?
Web yazı tiplerini tüm modern tarayıcılarda yayınlamak için gereken tek (ve en verimli) biçim nedir?
Sonraki: JavaScript'i kodlara bölme
Yazı tipi optimizasyonu hakkında bilgi edindiğinize göre artık bir sonraki modüle geçebilirsiniz. Bu modülde, kullanıcılarınız için ilk sayfa yükleme hızını iyileştirme potansiyeli yüksek olan bir konu ele alınmaktadır: Kod bölme yoluyla JavaScript'in yüklenmesini ertelemek. Bunu yaparak, sayfanın başlangıç aşamasında (kullanıcıların sayfayla etkileşime geçme olasılığının yüksek olduğu bir süre) bant genişliği ve CPU çekişmesini mümkün olduğunca düşük tutabilirsiniz.