İhtiyacınız olmayabilecek tüm biçimsel varyantları içeren "tam" WebFont ve kullanılmayan tüm glifler, kolayca çok megabaytlık indirme ile sonuçlanabilir. Bu gönderide, ziyaretçilerin yalnızca kullanacakları içeriği indirmeleri için WebFonts öğelerinin yüklenmesini nasıl optimize edeceğinizi öğreneceksiniz.
Tüm varyantları içeren büyük dosyalarla ilgili sorunu çözmek için @font-face CSS kuralı, yazı tipi ailesini bir kaynak koleksiyonuna bölmenize olanak tanıyacak şekilde özel olarak tasarlanmıştır. Unicode alt kümeleri ve farklı stil varyantları bunlara örnek verilebilir.
Bu bildirimler sayesinde tarayıcı, gerekli alt kümeleri ve varyantları anlar ve metni oluşturmak için gereken minimum sayıda grubu indirir. Bu da son derece kolaydır. Ancak dikkatli olmazsanız kritik oluşturma yolunda bir performans sorunu da oluşturabilir ve metin oluşturma gecikebilir.
Varsayılan davranış
Yazı tiplerinin geç yüklenmesi, metnin oluşturulmasını geciktirebilecek önemli bir gizli etki içerir. Tarayıcının, metni oluşturmak için hangi yazı tipi kaynaklarına ihtiyacı olduğunu bilmeden önce DOM ve CSSOM ağaçlarına bağlı olan oluşturma ağacını oluşturması gerekir. Sonuç olarak, yazı tipi istekleri diğer kritik kaynaklardan çok sonra gecikebilir ve tarayıcının metin oluşturması, kaynak alınana kadar engellenebilir.
- Tarayıcı, HTML dokümanını ister.
- Tarayıcı, HTML yanıtını ayrıştırmaya ve DOM'u oluşturmaya başlar.
- Tarayıcı CSS, JS ve diğer kaynakları keşfedip istekleri gönderir.
- Tarayıcı, CSS içeriğinin tamamı alındıktan sonra CSSOM'yi oluşturur ve oluşturma ağacını oluşturmak için bunu DOM ağacıyla birleştirir.
- Yazı tipi istekleri, oluşturma ağacında, belirtilen metni sayfada oluşturmak için hangi yazı tipi varyantlarının gerekli olduğunu belirttikten sonra gönderilir.
- Tarayıcı düzeni gerçekleştirir ve içeriği ekrana boyar.
- Yazı tipi henüz kullanılamıyorsa tarayıcı herhangi bir metin pikseli oluşturmayabilir.
- Yazı tipi kullanıma sunulduktan sonra, tarayıcı metin piksellerini boyar.
Oluşturma ağacı oluşturulduktan kısa bir süre sonra sayfa içeriğinin ilk boyaması arasındaki "yarış" ve yazı tipi kaynağı isteği, tarayıcının sayfa düzenini oluşturup metin çıkarmadığı "boş metin sorununu" oluşturur.
WebFonts'u önceden yükleyerek ve tarayıcıların kullanılamayan yazı tipleriyle nasıl davrandığını kontrol etmek için font-display kullanarak yazı tipinin yüklenmesinden kaynaklanan boş sayfaları ve düzen kaymalarını önleyebilirsiniz.
WebFont kaynaklarınızı önceden yükleme
Sayfanızın önceden bildiğiniz bir URL'de barındırılan belirli bir WebFont'a ihtiyaç duyma olasılığı yüksekse kaynak önceliklendirmeden yararlanabilirsiniz.
<link rel="preload"> kullanıldığında, CSSOM'nin oluşturulmasını beklemek zorunda kalmadan WebFont için kritik oluşturma yolunun başlarında istek tetiklenir.
Metin oluşturma gecikmesini özelleştirin
Önceden yükleme, bir sayfanın içeriği oluşturulduğunda WebFont'un kullanılabilir olma ihtimalini artırsa da herhangi bir garanti sunmaz.
Henüz kullanılamayan bir font-family kullanan metin oluşturulurken tarayıcıların nasıl davrandığını da göz önünde bulundurmanız gerekir.
Yazı tipi yüklenirken görünmeyen metin olmaması başlıklı makalede, varsayılan tarayıcı davranışının tutarlı olmadığını görebilirsiniz.
Ancak, font-display kullanarak modern tarayıcılara nasıl davranmalarını istediğinizi söyleyebilirsiniz.
Bazı tarayıcıların uyguladığı mevcut yazı tipi zaman aşımı davranışlarına benzer şekilde font-display, bir yazı tipi indirme işleminin ömrünü üç ana döneme ayırır:
- İlk dönem, yazı tipi bloku dönemidir. Bu süre zarfında yazı tipi yüzü yüklenmezse yazı tipini kullanmaya çalışan tüm öğeler görünmez bir yedek yazı tipi yüzüyle oluşturulmalıdır. Yazı tipi yüzü, engelleme süresi boyunca başarıyla yüklenirse yazı tipi yüzü normal şekilde kullanılır.
- Yazı tipi değiştirme süresi, yazı tipi bloku döneminden hemen sonra gerçekleşir. Bu süre zarfında yazı tipi yüzü yüklenmezse yazı tipini kullanmaya çalışan tüm öğeler yedek yazı tipi yüzüyle oluşturulmalıdır. Yazı tipi yüzü, değiştirme döneminde başarıyla yüklenirse yazı tipi yüzü normal şekilde kullanılır.
- Yazı tipi hata süresi, yazı tipi değiştirme döneminden hemen sonra gerçekleşir. Bu süre başladığında yazı tipi yüzü henüz yüklenmediyse başarısız yükleme olarak işaretlenir ve normal yazı tipi yedeğine neden olur. Aksi takdirde, yazı tipi yüzü normal şekilde kullanılır.
Bu dönemleri anlamak, yazı tipinizin indirilip indirilmediğine veya ne zaman indirildiğine bağlı olarak nasıl oluşturulması gerektiğine karar vermek için font-display özelliğini kullanabileceğiniz anlamına gelir.
font-display özelliğiyle çalışmak için mülkü @font-face kurallarınıza ekleyin:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: auto; /* or block, swap, fallback, optional */
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
url('/fonts/awesome-l.woff') format('woff'),
url('/fonts/awesome-l.ttf') format('truetype'),
url('/fonts/awesome-l.eot') format('embedded-opentype');
unicode-range: U+000-5FF; /* Latin glyphs */
}
font-display şu anda aşağıdaki değer aralığını desteklemektedir:
autoblockswapfallbackoptional
Yazı tiplerini önceden yükleme ve font-display özelliği hakkında daha fazla bilgi için aşağıdaki yayınlara bakın:
- Yazı tipi yüklenirken görünmeyen metin olmaması
- font-display kullanarak yazı tipi performansını kontrol etme
- İsteğe bağlı yazı tiplerini önceden yükleyerek düzen kaymasını ve görünmez metnin (FOIT) yanıp sönmesini önleyin
Font Upload API
<link rel="preload"> ve CSS font-display birlikte kullanıldığında, çok fazla ek yük getirmeden yazı tipi yükleme ve oluşturma üzerinde size yüksek düzeyde kontrol sunar.
Ancak ek özelleştirmelere ihtiyacınız varsa ve JavaScript'in çalıştırılmasından kaynaklanan ek yük ödemek istiyorsanız başka bir seçeneğiniz daha vardır.
Font Upload API, CSS yazı tipi yüzlerini tanımlamak ve değiştirmek, indirme ilerleme durumunu izlemek ve varsayılan geç yükleme davranışını geçersiz kılmak için bir komut dosyası arayüzü sağlar. Örneğin, belirli bir yazı tipi varyantının gerekli olduğundan eminseniz bunu tanımlayabilir ve tarayıcıya yazı tipi kaynağını hemen getirmesini söyleyebilirsiniz:
var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});
// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
// apply the font (which may re-render text and cause a page reflow)
// after the font has finished downloading
document.fonts.add(font);
document.body.style.fontFamily = "Awesome Font, serif";
// OR... by default the content is hidden,
// and it's rendered after the font is available
var content = document.getElementById("content");
content.style.visibility = "visible";
// OR... apply your own render strategy here...
});
Ayrıca, yazı tipi durumunu (check() aracılığıyla) kontrol edip indirme işleminin ilerleme durumunu izleyebileceğiniz için sayfalarınızda metin oluşturmak üzere özel bir strateji de tanımlayabilirsiniz:
- Yazı tipi hazır olana kadar tüm metin oluşturma işlemlerini bekletebilirsiniz.
- Her yazı tipi için özel bir zaman aşımı süresi uygulayabilirsiniz.
- Oluşturma engelini kaldırmak için yedek yazı tipini kullanabilir ve yazı tipi kullanıma sunulduktan sonra istenen yazı tipini kullanan yeni bir stil yerleştirebilirsiniz.
En önemlisi de, sayfadaki farklı içerikler için yukarıdaki stratejileri bir arada kullanabilirsiniz. Örneğin, yazı tipi kullanılabilir hale gelene kadar bazı bölümlerde metin oluşturmayı geciktirebilir, yedek bir yazı tipi kullanabilir ve yazı tipi indirme işlemi bittikten sonra yeniden oluşturabilirsiniz.
Doğru şekilde önbelleğe almanın kullanılması zorunludur
Yazı tipi kaynakları genellikle sık güncelleme almayan statik kaynaklardır. Sonuç olarak, maksimum kullanım süresinin uzun olması ideal olarak uygundur. Tüm yazı tipi kaynakları için hem bir koşullu ETag başlığı hem de optimum Önbellek Denetimi politikası belirttiğinizden emin olun.
Web uygulamanız Service Worker kullanıyorsa yazı tipi kaynaklarını önbellek öncelikli stratejiyle sunmak çoğu kullanım durumu için uygundur.
Yazı tiplerini localStorage veya IndexedDB kullanarak depolamamalısınız. Bunların her birinin kendi performans sorunları vardır.
Tarayıcının HTTP önbelleği, yazı tipi kaynaklarını tarayıcıya sunmak için en iyi ve en sağlam mekanizmayı sağlar.
WebFont yükleme kontrol listesi
<link rel="preload">,font-displayveya Font Loading API'yi kullanarak yazı tipi yüklemesini ve oluşturmayı özelleştirin: Varsayılan geç yükleme davranışı, metnin oluşturulmasını geciktirebilir. Bu web platformu özellikleri, belirli yazı tipleri için bu davranışı geçersiz kılmanıza ve sayfadaki farklı içerikler için özel oluşturma ve zaman aşımı stratejileri belirtmenize olanak tanır.- Yeniden doğrulama ve optimum önbellek politikalarını belirleyin: Yazı tipleri, nadiren güncellenen statik kaynaklardır. Yazı tiplerinin, farklı sayfalar arasında verimli bir şekilde yeniden kullanılabilmesi için sunucularınızın uzun ömürlü bir maksimum zaman damgası ve yeniden doğrulama jetonu sağladığından emin olun. Hizmet çalışanı kullanılıyorsa önbellek öncelikli bir strateji uygundur.
Lighthouse ile WebFont yükleme davranışı için otomatik test
Lighthouse, web yazı tipi optimizasyonuyla ilgili en iyi uygulamaları takip ettiğinizden emin olma sürecini otomatikleştirmeye yardımcı olabilir.
Aşağıdaki denetimler, sayfalarınızın zaman içinde web yazı tipi optimizasyonuyla ilgili en iyi uygulamaları izlemeye devam ettiğinden emin olmanıza yardımcı olabilir: