Google Fonts Performansını Optimize Etme

Google Yazı Tiplerinin popüler olduğunu söylemek doğru olur. Yazarken, web'de 29 trilyondan fazla kez görüntülendiler ve nedenini anlamak kolay - koleksiyon, web sitenizde ücretsiz olarak kullanabileceğiniz 900'den fazla güzel yazı tipine erişmenizi sağlar. Google Yazı Tipleri olmadan, kullanıcınızın cihazında yüklü bir avuç “sistem yazı tipi” ile sınırlı kalırsınız.

Sistem yazı tipleri veya 'Web Güvenli Yazı Tipleri', işletim sistemlerinde en yaygın olarak önceden yüklenmiş yazı tipleridir. Örneğin Arial ve Georgia, Windows, macOS ve Linux dağıtımlarıyla paketlenmiştir.

Tüm iyi şeyler gibi, Google Yazı Tiplerinin de bir maliyeti vardır. Her yazı tipi, görüntülenebilmeleri için web tarayıcısının indirmesi gereken bir ağırlık taşır. Doğru kurulumla, ek yükleme süresi fark edilmez. Ancak, yanlış anlayın ve kullanıcılarınız herhangi bir metin görüntülenmeden önce birkaç saniye bekleyebilir.

Google Yazı Tipleri Zaten Optimize Edildi

Google Fonts API, tarayıcıya font dosyalarını sağlamaktan fazlasını yapmakla kalmaz, aynı zamanda dosyaları en optimize biçimde nasıl teslim edebileceğini görmek için akıllı bir kontrol gerçekleştirir.

Roboto'ya bakalım, GitHub bize normal varyantın 168 kb ağırlığında olduğunu söylüyor.

Ancak API'den aynı yazı tipi varyantını talep edersem bu dosya bana sağlanır. Hangisi sadece 11kb. Nasıl olabilir?

Tarayıcı API'ye bir istekte bulunduğunda, Google önce tarayıcının hangi dosya türlerini desteklediğini kontrol eder. Çoğu tarayıcının WOFF2'yi desteklediği gibi Chrome'un en son sürümünü kullanıyorum, bu nedenle yazı tipi bana bu yüksek oranda sıkıştırılmış biçimde sunuluyor.

Kullanıcı aracımı Internet Explorer 11 olarak değiştirirsem, yazı tipi bana bunun yerine WOFF biçiminde sunulur.

Son olarak, kullanıcı aracımı IE8 olarak değiştirirsem, yazı tipini EOT (Gömülü OpenType) biçiminde alıyorum.

Google Fonts, her yazı tipi için 30'dan fazla optimize edilmiş varyant sağlar ve her platform ve tarayıcı için en uygun varyantı otomatik olarak algılar ve sunar.

— Ilya Grigorik, Web Yazı Tipi Optimizasyonu

Bu, Google Fonts'un harika bir özelliğidir, kullanıcı aracısını kontrol ederek, bunları destekleyen tarayıcılara en performanslı biçimleri sunarken, eski tarayıcılarda yazı tiplerini tutarlı bir şekilde görüntülemeye devam edebilirler.

Tarayıcı Önbelleğe Alma

Google Yazı Tiplerinin bir başka yerleşik optimizasyonu, tarayıcı önbelleğe almadır.

Google Fonts'un her yerde bulunan yapısı nedeniyle, tarayıcının her zaman tam font dosyalarını indirmesi gerekmez. Örneğin SmashingMagazine, 'Mija' adlı bir yazı tipi kullanır, tarayıcınız bu yazı tipini ilk kez görüyorsa, metin görüntülenmeden önce onu tamamen indirmesi gerekir, ancak bu yazı tipini kullanarak bir web sitesini bir sonraki ziyaretinizde , tarayıcı önbelleğe alınmış sürümü kullanır.

Google Fonts API'si daha yaygın olarak kullanılmaya başlandıkça, sitenizi veya sayfanızı ziyaret edenlerin tarayıcı önbelleklerinde tasarımınızda kullanılan tüm Google fontları olması muhtemeldir.

— SSS, Google Yazı Tipleri

Google Fonts tarayıcı önbelleği, önbellek daha erken temizlenmedikçe bir yıl sonra sona erecek şekilde ayarlanmıştır.

Not: Mija bir Google Yazı Tipi değildir, ancak önbelleğe alma ilkeleri satıcıya özel değildir.

Daha Fazla Optimizasyon Mümkün

Google, yazı tipi dosyalarının dağıtımını optimize etmek için büyük çaba sarf etse de, sayfa yükleme süreleri üzerindeki etkiyi azaltmak için uygulamanızda yapabileceğiniz optimizasyonlar vardır.

1. Yazı Tipi Ailelerini Sınırlayın

En kolay optimizasyon, daha az yazı tipi ailesi kullanmaktır. Her yazı tipi, sayfa ağırlığınıza 400 kb'ye kadar ekleyebilir, bunu birkaç farklı yazı tipi ailesiyle çarpabilir ve yazı tipleriniz birdenbire tüm sayfanızdan daha ağır olabilir.

Biri başlıklar için diğeri içerik için olmak üzere ikiden fazla yazı tipi kullanmamanızı tavsiye ederim. Yazı tipi boyutu, ağırlık ve rengin doğru kullanımı ile tek bir yazı tipiyle bile harika bir görünüm elde edebilirsiniz.

2. Varyantları Hariç Tut

Google Yazı Tiplerinin yüksek kalite standardı nedeniyle, yazı tipi ailelerinin çoğu, mevcut yazı tipi ağırlıklarının tam yelpazesini içerir:

• İnce (100)
• İnce İtalik (100i)
• Işık (300)
• Açık İtalik (300i)
• Normal (400)
• Normal İtalik (400i)
• Orta (600)
• Orta İtalik (600i)
• Kalın (700)
• Kalın İtalik (700i)
• Siyah (800)
• Siyah İtalik (800i)

Bu, 12 varyantın tümünü gerektirebilecek gelişmiş kullanım durumları için harikadır, ancak normal bir web sitesi için bu, yalnızca 3 veya 4'e ihtiyacınız olduğunda 12 varyantın tümünü indirmek anlamına gelir.

Örneğin, Roboto yazı tipi ailesi ~144 kb ağırlığındadır. Bununla birlikte, yalnızca Normal, Normal İtalik ve Kalın türevlerini kullanırsanız, bu sayı ~ 36 kb'ye düşer. %75 tasarruf!

Google Yazı Tiplerini uygulamak için varsayılan kod şöyle görünür:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Bunu yaparsanız, yalnızca 'normal 400' varyantını yükleyecektir. Bu, tüm açık renkli, kalın ve italik metinlerin doğru görüntülenmeyeceğini gösterir.

Bunun yerine tüm yazı tipi türevlerini yüklemek için URL'deki ağırlıkları şu şekilde belirtmemiz gerekir:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

Bir web sitesinin İnce (100) ile Siyah (900) arasında bir yazı tipinin tüm çeşitlerini kullanması nadirdir, en uygun strateji yalnızca kullanmayı planladığınız ağırlıkları belirtmektir:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Bu, özellikle birden çok yazı tipi ailesi kullanıldığında önemlidir. Örneğin, başlıklar için Lato kullanıyorsanız, yalnızca kalın varyantı (ve muhtemelen kalın italik) istemek mantıklıdır:

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. İstekleri Birleştirin

Yukarıda üzerinde çalıştığımız kod parçacığı, HTTP isteği olarak adlandırılan Google sunucularına ( fonts.googleapis.com ) bir çağrı yapar. Genel olarak konuşursak, web sayfanızın yapması gereken daha fazla HTTP isteği, yüklenmesi daha uzun sürer.

İki yazı tipi yüklemek istiyorsanız, şöyle bir şey yapabilirsiniz:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Bu işe yarar, ancak tarayıcının iki istekte bulunmasına neden olur. Bunları aşağıdaki gibi tek bir istekte birleştirerek optimize edebiliriz:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

Tek bir isteğin tutabileceği yazı tipi ve varyant sayısı konusunda bir sınır yoktur.

4. Kaynak İpuçları

Kaynak ipuçları, web sitesi performansını artırabilen modern tarayıcılar tarafından desteklenen bir özelliktir. İki tür kaynak ipucuna bakacağız: 'DNS Önceden Getirme' ve 'Ön Bağlantı'.

Not: Bir tarayıcı modern bir özelliği desteklemiyorsa, onu yok sayar. Böylece web sayfanız normal şekilde yüklenecektir.

DNS Önceden Getirme

DNS önceden getirme, tarayıcının, sayfa yüklenmeye başlar başlamaz Google'ın Fonts API'siyle ( fonts.googleapis.com ) bağlantıyı başlatmasına olanak tanır. Bu, tarayıcı bir istekte bulunmaya hazır olduğunda, işin bir kısmının zaten yapılmış olduğu anlamına gelir.

Google Yazı Tipleri için DNS önceden getirmeyi uygulamak için, bu tek astarı web sayfalarınıza <head> eklemeniz yeterlidir:

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

ön bağlantı

Google Fonts yerleştirme koduna bakarsanız, tek bir HTTP isteği gibi görünüyor:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Ancak, bu URL'yi ziyaret edersek, farklı bir URL'ye, https://fonts.gstatic.com'a yönelik üç istek daha olduğunu görebiliriz. Her yazı tipi varyantı için bir ek istek.

Bu ek isteklerle ilgili sorun, tarayıcının https://fonts.googleapis.com/css yapılan ilk istek tamamlanana kadar bunları yapma işlemlerine başlamamasıdır. Preconnect'in devreye girdiği yer burasıdır.

Preconnect, önceden getirmenin geliştirilmiş bir versiyonu olarak tanımlanabilir. Tarayıcının yükleyeceği belirli URL'de ayarlanır. Yalnızca bir DNS araması yapmak yerine, TLS anlaşmasını ve TCP anlaşmasını da tamamlar.

DNS Önceden Getirme gibi, tek satır kodla uygulanabilir:

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

Sadece bu kod satırını eklemek, sayfa yükleme sürenizi 100 ms'ye kadar azaltabilir. Bu, önce tamamlanmasını beklemek yerine, bağlantıyı ilk istekle birlikte başlatarak mümkün olur.

5. Yazı Tiplerini Yerel Olarak Barındırın

Google Yazı Tipleri, size yazı tiplerini izin istemeden kullanma, değiştirme ve dağıtma özgürlüğü veren bir 'Libre' veya 'özgür yazılım' lisansı kapsamında lisanslanmıştır. Bu, istemiyorsanız Google'ın barındırma hizmetini kullanmanız gerekmediği anlamına gelir - yazı tiplerini kendiniz barındırabilirsiniz!

Tüm yazı tipi dosyaları Github'da mevcuttur. Tüm yazı tiplerini içeren bir zip dosyası da mevcuttur (387MB).

Son olarak, kullanmak istediğiniz yazı tiplerini seçmenizi sağlayan bir yardımcı hizmet vardır, ardından bunun için gereken dosyaları ve CSS'yi sağlar.

Yazı tiplerini yerel olarak barındırmanın bir dezavantajı vardır. Fontları indirdiğinizde o anda olduğu gibi kaydediyorsunuz. İyileştirilirler veya güncellenirlerse, bu değişiklikleri almazsınız. Buna karşılık, Google Fonts API'sinden yazı tipi talep ederken, size her zaman en güncel sürüm sunulur.

lastModified parametresini not edin. Yazı tipleri düzenli olarak değiştirilir ve geliştirilir.

6. Yazı Tipi Ekranı

Tarayıcının Google Fonts'u indirmesinin zaman aldığını biliyoruz, ancak metne hazır olmadan önce ne oluyor? Uzun bir süre, tarayıcı metnin olması gereken yerde "FOIT" (Görünmez Metin Flaşı) olarak da bilinen boş alan gösterecekti.

Önerilen Kaynak : “FOUT, FOIT, FOFT”, Chris Coyier

Hiçbir şey göstermemek son kullanıcı için sarsıcı bir deneyim olabilir, daha iyi bir deneyim, başlangıçta bir sistem yazı tipini yedek olarak göstermek ve ardından yazı tiplerini hazır olduklarında "değiştirmek" olacaktır. Bu, CSS font-display özelliği kullanılarak mümkündür.

font-display: swap; @font-face bildirimine göre, tarayıcıya Google Font kullanılabilir olana kadar yedek fontu göstermesini söyleriz.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

2019'da Google, yazı tipi gösterimi için destek ekleyeceğini duyurdu: takas. Yazı tipi URL'sine fazladan bir parametre ekleyerek bunu hemen uygulamaya başlayabilirsiniz:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Text Parametresini Kullanın

Google Fonts API'sinin az bilinen bir özelliği de text parametresidir. Nadiren kullanılan bu parametre, yalnızca ihtiyacınız olan karakterleri yüklemenize olanak tanır.

Örneğin, benzersiz bir yazı tipi olması gereken bir metin logonuz varsa, yalnızca logoda kullanılan karakterleri yüklemek için text parametresini kullanabilirsiniz.

Şu şekilde çalışır:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Açıkçası, bu teknik çok özeldir ve yalnızca birkaç gerçekçi uygulaması vardır. Ancak, bunu kullanabilirseniz, yazı tipi ağırlığını %90'a kadar azaltabilir.

Not: text parametresini kullanırken, varsayılan olarak yalnızca "normal" yazı tipi ağırlığı yüklenir. Başka bir ağırlık kullanmak için bunu URL'de açıkça belirtmelisiniz.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Toplama

Google Fonts kullanan ilk 1 milyon web sitesinin tahminen %53'üyle, bu optimizasyonların uygulanması büyük bir etki yaratabilir.

Yukarıdakilerden kaç tanesini denediniz? Bana yorum bölümünde bildirin.