Önceki modüllerde HTML, CSS, JavaScript ve medya kaynaklarını nasıl optimize edeceğinizi öğrendiniz. Bu modülde, web yazı tiplerini optimize etmek için yararlanabileceğiniz bazı yöntemleri öğreneceksiniz.
Web yazı tipleri, hem yükleme süresi hem de oluşturma süresinde sayfa performansını etkileyebilir.
Büyük yazı tipi dosyalarının indirilmesi uzun sürebilir ve First Contentful Paint (FCP) bu durumdan olumsuz yönde etkilenir. Yanlış font-display değeri ise sayfanın Cumulative Layout Shift (CLS) sorununa yol açan istenmeyen düzen kaymalarına neden olabilir.
Web yazı tiplerini optimize etmeden önce bunların tarayıcı tarafından nasıl keşfedildiğini 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, bir @font-face bildirimi kullanılarak 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ı nerede bulacağını bildirir. Bant genişliğini korumak amacıyla, geçerli sayfanın düzeninin buna ihtiyaç duyduğunu belirleyene kadar tarayıcı, web yazı tipini indirmez.
h1 {
font-family: "Open Sans";
}
Önceki CSS snippet'inde tarayıcı, "Open Sans" yazı tipi dosyasını sayfanın HTML'sinde bir <h1> öğesini ayrıştırırken indirir.
preload
@font-face beyanlarınız harici bir stil sayfasında tanımlanmışsa tarayıcı bunları ancak stil sayfasını indirdikten sonra indirmeye başlayabilir.
Bu, web yazı tiplerinin sonradan keşfedilebilecek kaynaklar olmasını sağlar, ancak tarayıcının web yazı tiplerini daha erken keşfetmesine yardımcı olacak 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üklenmesinin başlarında keşfedilebilmesini sağlar ve tarayıcı, stil sayfasının indirme ve ayrıştırma işleminin bitmesini beklemeden bunları indirmeye başlar. preload yönergesi, sayfada yazı tipi gerekli olana 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
Oluşturmayı engelleyen CSS'yi (@font-face bildirimleri dahil) <style> öğesini kullanarak HTML'nizin <head> bölümüne satır içine alarak 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 beklemeye gerek olmadığı için web yazı tiplerini sayfa yüklenirken daha erken keşfeder.
Tarayıcı yalnızca geçerli sayfayı oluşturmak için gerekli yazı tiplerini indirdiğinden @font-face bildirimlerini satır içine almak, preload ipucunu kullanmaya göre daha avantajlıdır. Bu, kullanılmayan yazı tiplerinin indirilmesi riskini ortadan kaldırır.
İndirin
Tarayıcı, web yazı tiplerini keşfedip geçerli sayfanın düzenine göre gerekli olduklarından emin olduktan sonra bunları indirebilir. Web yazı tiplerinin sayısı, kodlamaları ve dosya boyutları, bir web yazı tipinin tarayıcı tarafından indirilip oluşturulma hızını önemli ölçüde etkileyebilir.
Web yazı tiplerinizi kendiniz barındırın
Web yazı tipleri, Google Fonts gibi üçüncü taraf hizmetler aracılığıyla sunulabilir veya kaynağınızda kendiliğinden barındırılabilir. Üçüncü taraf hizmeti kullanırken, gerekli web yazı tiplerini indirebilmek için web sayfanızın sağlayıcının alanına bir bağlantı açması gerekir. Bu da web yazı tiplerinin bulunmasını ve sonradan indirilmesini geciktirebilir.
Bu ek yük, preconnect kaynak ipucu kullanılarak azaltılabilir. preconnect kullanarak tarayıcıya, normalde olduğundan daha önce çapraz kaynak ile bağlantı açmasını söyleyebilirsiniz:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Önceki HTML snippet'i, tarayıcıya fonts.googleapis.com ve fonts.gstatic.com ile CORS bağlantısı kurması için ipucu verir. Google Fonts gibi bazı yazı tipi sağlayıcılar, farklı kaynaklardan CSS ve yazı tipi kaynakları sunar.
Web yazı tiplerinizi kendiniz barındırarak üçüncü taraf bağlantısına olan ihtiyacı ortadan kaldırabilirsiniz. Çoğu durumda, kendi kendine barındırılan web yazı tipleri, bunları çapraz kaynaklardan indirmekten daha hızlıdır. Web yazı tiplerinin barındırılmasını planlıyorsanız sitenizin bir İçerik Yayınlama Ağı (CDN), HTTP/2 veya HTTP/3 kullandığından emin olun ve web siteniz için ihtiyaç duyduğunuz web yazı tipleri için doğru önbelleğe alma başlıklarını ayarlayın.
Yalnızca WOFF2 ve WOFF2 kullanın
WOFF2, geniş tarayıcı desteğine ve en iyi sıkıştırma olanağından yararlanır. WOFF'dan% 30'a kadar daha iyi sıkıştırma sunar. Dosya boyutunun küçülmesi, indirme sürelerinin daha hızlı olmasını sağlar. WOFF2 biçimi genellikle modern tarayıcılarda tam uyumluluk için gereken tek biçimdir.
Web yazı tiplerinizi alt öğeler olarak ayarlama
Web yazı tipleri genellikle farklı dillerde kullanılan çeşitli karakterleri temsil etmek için gerekli olan çok çeşitli glifler içerir. Sayfanız içeriği yalnızca bir dilde sunuyorsa (veya tek bir alfabe kullanıyorsa) alt ayarları kullanarak web yazı tiplerinizin boyutunu azaltabilirsiniz. Bu işlem genellikle bir sayı veya unicode kod noktaları aralığı belirterek yapılır.
Alt küme, orijinal web yazı tipi dosyasına dahil edilen kısaltılmış glif grubudur. Örneğin, sayfanızda tüm glifler yerine, Latin karakterler için belirli bir alt küme sunulabilir. Gereken alt kümeye bağlı olarak, glifleri kaldırmak yazı tipi dosyasının boyutunu önemli ölçüde küçültebilir.
Google Fonts gibi bazı web yazı tipi sağlayıcıları, alt kümeleri bir sorgu dizesi parametresi aracılığıyla otomatik olarak sunar. Örneğin, https://fonts.googleapis.com/css?family=Roboto&subset=latin URL'si yalnızca Latin alfabesinin kullanıldığı Roboto web yazı tipinin bulunduğu bir stil sayfası sunar.
Web yazı tiplerinizi barındırmaya karar verirseniz bir sonraki adım, bu alt kümeleri glifanger veya alt yazı tipi gibi araçlar kullanarak kendiniz oluşturmak ve barındırmaktır.
Ancak kendi web yazı tiplerinizi kendiniz barındırma kapasiteniz yoksa yalnızca web siteniz için gerekli olan unicode kod noktalarını içeren ek bir text sorgu dizesi parametresi belirterek Google Fonts tarafından sağlanan web yazı tiplerini alt gruplara ayırabilirsiniz. Örneğin, sitenizde "Hoş geldiniz" ifadesi için az sayıda karakter gerektiren bir görüntülü web yazı tipi varsa şu URL'yi kullanarak Google Fonts aracılığıyla bu alt kümeyi isteyebilirsiniz:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Bu tür ekstrem alt ayarlar web sitenizde faydalı
olabiliyorsa bu, web sitenizdeki tek bir yazı tipi için gereken web yazı tipi verisi miktarını önemli ölçüde azaltabilir.
Yazı tipi oluşturma
Tarayıcı bir web yazı tipini bulup indirdikten sonra oluşturulabilir. Varsayılan olarak tarayıcı, bir web yazı tipi kullanan metinlerin indirilene kadar oluşturulmasını engeller. font-display CSS mülkünü kullanarak tarayıcının metin oluşturma davranışını ayarlayabilir ve web yazı tipi tam olarak yüklenene kadar hangi metnin gösterileceğini veya gösterilmemesi gerektiğini yapılandırabilirsiniz.
block
font-display için varsayılan değer block değeridir. block ile tarayıcı, belirtilen web yazı tipini kullanan metinlerin oluşturulmasını engeller. Farklı tarayıcılar biraz farklı davranır. Chromium ve Firefox, yedek kullanmadan önce
oluşturmayı en fazla 3 saniye süreyle engeller. Safari, web yazı tipi yüklenene
kadar süresiz olarak engelleme yapar.
swap
swap, en yaygın olarak kullanılan font-display değeridir. swap, oluşturmayı engellemez ve metni, belirtilen web yazı tipiyle değiştirilmeden önce hemen bir yedek içinde gösterir. Böylece, web yazı tipinin indirilmesini beklemeden
içeriğinizi hemen gösterebilirsiniz.
Bununla birlikte, swap ürününün olumsuz tarafı, CSS'nizde belirtilen yedek web yazı tipi ve web yazı tipinin satır yüksekliği, aralık aralığı ve diğer yazı tipi metrikleri bakımından büyük ölçüde farklılık göstermesi durumunda düzen kaymasına neden olmasıdır. Bir web yazı tipi kaynağını mümkün olan en kısa sürede yüklemek için preload ipucunu kullanmazsanız veya diğer font-display değerlerini dikkate almazsanız bu, web sitenizin CLS'sini etkileyebilir.
fallback
font-display için fallback değeri, block ile swap arasında bir uzlaşmadır. swap işlevinin aksine tarayıcı, bir yazı tipinin oluşturulmasını engeller ancak
yedek metni yalnızca çok kısa bir süre için değiştirir. Ancak block hedefinin aksine engelleme süresi son derece kısadır.
fallback değerinin kullanılması, web yazı tipinin hızlı bir şekilde indirilmesi durumunda web yazı tipinin, sayfanın ilk oluşturma sırasında hemen kullanılan yazı tipi olduğu hızlı ağlarda iyi sonuç verir. Bununla birlikte, ağlar yavaşsa yedek metin ilk olarak engelleme süresi sona erdikten sonra görülür ve ardından web yazı tipi geldiğinde değiştirilir.
optional
optional, en katı font-display değeridir ve web yazı tipi kaynağını yalnızca 100 milisaniye içinde indirirse kullanır. Bir web yazı tipinin yüklenmesi daha uzun sürerse sayfada kullanılmaz ve tarayıcı mevcut gezinme için yedek yazı tipini kullanır. Bu sırada web yazı tipi arka planda indirilir ve tarayıcı önbelleğine yerleştirilir.
Bunun sonucunda, web yazı tipi daha önce indirildiği için sonraki sayfada gezinmelerde bu yazı tipi hemen kullanılabilir. font-display: optional, swap ile görülen düzen kaymasını önler, ancak bazı kullanıcılar ilk sayfada gezinmede çok geç gelen web yazı tipini görmez.
Yazı tipi demoları
Bilginizi test etme
Tarayıcı, bir web yazı tipi kaynağını ne zaman indirir (preload yönergesiyle getirilmediği varsayılır)?
Web yazı tiplerini tüm modern tarayıcılara sunmak için gerekli olan tek (ve en verimli) biçim nedir?
Sıradaki: Kod bölmeli JavaScript
Yazı tipi optimizasyonunu öğrendikten sonra bir sonraki modüle geçebilirsiniz. Bu modül, kullanıcılarınız için ilk sayfa yükleme hızını iyileştirme potansiyeli yüksek ve JavaScript'in yüklenmesini kod bölme yoluyla erteleme konusunu ele almaktadır. Böylece, kullanıcıların etkileşimde bulunma olasılığının çok yüksek olduğu bir sayfanın başlatma aşamasında bant genişliği ve CPU yükünü mümkün olduğunca düşük tutabilirsiniz.