Google Yazı Tipi Performansını Optimize Etme

İyi web sitesi tasarımları, çarpıcı görüntüler ve yazı tipleriyle süslenir. Ne yazık ki, bu iki web öğesi, birçok web sitesinin can sıkıcı gecikme göstermesinin nedenlerine büyük ölçüde katkıda bulunur. Elbette, yalnızca web yazı tipleri canlandırıcı, beklenmedik ve yeni bir şey sunabilir.

Ancak, bu korkunç fenomeni kontrol altına almanın yolları var. SVG, geliştiricilerin görüntü işlemenin bazı zorluklarını yönetmelerine yardımcı oluyor. En popüler web yazı tipi olan Google Yazı Tipleri için bir sayfanın oluşturulma süresini iyileştirmek, Google Yazı Tipi performansını optimize etmek için mevcut birkaç hileyi uygulamakla ilgilidir.

Google yazı tipleri nelerdir?

Google yazı tipleri, web sitelerinde kullanılmak üzere yazı tiplerini oluşturan özel olarak ayarlanmış glif koleksiyonudur. İnternet üzerinden kullanılmak üzere özel olarak tasarlanmıştır, bu nedenle web yazı tipleri adıdır.

2010 yılında yaklaşık 30 yazı tipiyle Google Web Yazı Tipleri olarak piyasaya sürülen Google Yazı Tipleri, şu anda yaklaşık 17 milyar yazı tipine sahip ve şu anda tüm web sitelerinin yaklaşık %57'sine güç sağlıyor. Tamamen ücretsiz olan Google Fonts, bu yazının yazıldığı tarih itibariyle her saniye yaklaşık 500.000 görüntülenme kaydediyor ve 2010'dan bu yana 37 trilyondan fazla görüntülenme biriktirdi.

Web sitenizde Google yazı tiplerinin kullanılması, Arial ve Georgia gibi çoğunlukla tüm işletim sistemlerinde önceden yüklenmiş olan sistem yazı tipleri veya 'web için güvenli yazı tipleri' ile sınırlı olmaktan kurtulmanıza olanak tanır.

Google yazı tipleri nasıl uygulanır?

Bir web sitesinde Google Fonts uygulaması, kullanıcının font(lar) seçimine atıfta bulunarak uygulama programlama arayüzü (API) kullanılarak yapılır. Google tarafından sunulan bu API, standart CSS bağlantı etiketi veya içe aktarma sözdizimi kullanılarak HTML belgenize yerleştirilebilir. Aşağıda Baloo Chettan 2'yi uygulamaya yönelik API'lere bir örnek verilmiştir.

Standart CSS bağlantı etiketini kullanma

İçe aktarma sözdizimini kullanma
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

HTML belgenizdeki yukarıdaki API'lerden herhangi biriyle, aşağıdaki örnekte görüldüğü gibi, CSS belgenizdeki font ailesini referans alarak kullanabilirsiniz.

yazı tipi ailesi : 'Baloo Chettan 2', el yazısı;

Google Yazı Tipi performansını optimize etmenin önemi

Diğer web yazı tipleri gibi Google Yazı Tiplerini uygulamak ve kullanmak, yazı tiplerini web sitenizin ziyaretçilerine sunmaktan başka önemli bir şey değildir. Unutmayın, kullanıcıların cihazlarında bu yazı tipleri yoktur. Başka bir deyişle, web sitenizin içeriğini görebilmeleri için tarayıcılarının bunları indirmesi gerekir.

Yazı tipi ağırlığı

Her yazı tipi, web sitenizin gecikmesini olumsuz yönde etkilemeye hazır bir ağırlıkla gelir. Örneğin, Google'ın Baloo Chettan 2 yazı tipinin toplam boyutu 720 KB'dir. Bu, tüm Baloo yazı tipi ailesini (19) web sitenizde mevcut tüm diller ve varyantlarla birlikte kullanmanız gerekiyorsa, web sitenizin yüklenmesine yaklaşık 9MB eklemeniz gerektiği anlamına gelir. Tabii ki, bu ideal değil ve web yazı tipi optimizasyonuna yakın bir şey değil. Ancak yanlış anlamak, web sitenizin ziyaretçilerini web sitenizde herhangi bir metin görmeden önce birkaç saniye bekletmek anlamına gelir.

yazı tipi biçimi

Ne yazık ki, bu biçimlerin hiçbiri tüm tarayıcılarda çalışan evrensel bir biçim olarak kabul edilmez.

EOT yalnızca IE tarafından desteklenir. Chrome ve Opera, biçimlerin çoğu için en fazla desteğe sahipken, tüm tarayıcıların yaklaşık yüzde 86'sı WOFF biçimini desteklemektedir. Bu, kullanmak istediğiniz her yazı tipi için tüm yazı tipi biçimlerini eklemenizi gerektirebilir. Buradaki fikir, tüm tarayıcıların her yazı tipini görüntüleyebilmesini sağlayarak tutarlı bir deneyim sağlamaktır.

Bu sorunlar, Google yazı tipi performansını optimize etmek için çok önemli bir ihtiyaç olmasının birçok nedeninin bir parçasıdır.

Google Yazı Tipi performansını optimize etme

Google Yazı Tipi optimizasyonu, Yazı Tipi API'si yerleşiminiz ve istek biçiminizle başlar, işlemeye kadar. İşte Google yazı tiplerinin nasıl optimize edileceğine dair basit püf noktaları.

Google Yazı Tipi kaynaklarını önceden yükleyin

Web yazı tiplerinizi önceden yüklemenizi sağlayan yeni web platformu özelliğini kullanmanız şiddetle tavsiye edilir: <link rel="preload"> . Bu özellik, kaynak bağlantısına erişmeden önce hangi yazı tipi kaynaklarına ihtiyaç duyduğunu bilmek için önce oluşturma ağacını oluşturarak genellikle metin oluşturmayı geciktiren varsayılan tarayıcı davranışını atlamanıza olanak tanır.

<link rel="preload"> , CSSOM'nin oluşturulmasını beklemeden, fontlarınız için yeterince erken bir istek tetiklemek için genellikle HTML'nizin <head> etiketine dahil edilir. Bu özellik, tarayıcıya, nasıl kullanılacağı hakkında herhangi bir bilgi sağlamadan, yalnızca web yazı tiplerinize yakında ihtiyaç duyulacağına dair bir ön bilgi verir.

Ayrıca, tarayıcıyı kaynak URL'sinin nasıl kullanılacağı konusunda bilgilendirmek için önyükleme özelliğinin yanı sıra uygun bir CSS @font-face tanımı kullanmanız önerilir. Bir sonraki noktada bir örneğe bakın.

Birden çok yazı tipi için bir istek kullanın

Google yazı tipi optimizasyonu için başka bir iyi önlem, birden çok yazı tipi isteğini tek bir etikette birleştirmektir. Her yazı tipi için ayrı bir <link> etiketi eklememek, böylece farklı gruplarda birden çok istek göndermemek. Yazı tipi isteklerini birleştirmek için API'deki yazı tiplerini | karakter. Ancak bu, ihtiyaç duyacağınız tüm yazı tiplerini Google Yazı Tipi sayfasında tek seferde seçerek de yapılabilir.

Kötü yazı tipi istekleri biçimi:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Önerilen yazı tipi istekleri biçimi:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

Birden çok yazı tipi isteğini tek bir etikette birleştirerek, tarayıcıyı sunucuya yapılan birkaç yolculuktan kurtarıyoruz ve ayrıca eski tarayıcılara alan başına bir seferde maksimum 2 bağlantıyla yardımcı oluyoruz.

Tüm tarayıcılar için optimize edilmiş yazı tipi biçimleri

Belirli bir yazı tipi biçimini desteklemeyen tarayıcılar bunu görmezden gelir ve işleme ağacındaki bir sonraki adıma atlar. Tutarlı bir deneyim sağlamak için, tüm yazı tipi biçimlerini CSS @ yazı tipi-yüz bildiriminize eklemelisiniz.

Ancak ağırlık azaltılabilir. Bir yazı tipini tanımlayan ayrı grafikler, GZIP gibi uyumlu bir sıkıştırıcı kullanılarak sıkıştırılabilen benzer bilgilerden oluşur. TTF ve EOT biçimleri varsayılan olarak sıkıştırılmış olsa da, sunucularınızın her iki yazı tipi biçimini de sunarken sıkıştırmayı uygulayacak şekilde yapılandırıldığından emin olmanız gerekir.

WOFF2'yi ~%30 dosya boyutu küçültmeyle sunmak için yerleşik sıkıştırmaya sahip olan ve özel ön işleme ve sıkıştırma algoritmalarına başvuran WOFF için en uygun sıkıştırma ayarını kullanın.

CSS @font-face bildirimi örneği
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


src listenizde local() öğesine öncelik verin

Bu Google yazı tipi optimizasyon fikri, varsayılan sistem yazı tiplerini referans almadığınız sürece cep telefonu kullanıcıları için gerçekten geçerli olmasa da, web yazı tiplerini optimize etmek için etkili bir numara olmaya devam ediyor.

Yukarıdaki CSS @font-face bildirimi örneğine bakarsanız, local() öğesinin src: tanımlayıcısında virgülle ayrılmış kaynak değişkenleri listesinin başında geldiğini fark edeceksiniz. Bu önceliklendirme kasıtlıdır ve fikir, yerel olarak mevcut değilse, indirmeyi seçmeden önce kullanıcı tarayıcısını yazı tipi için ilk kaynağa yerel olarak göndermektir.

Bu, tarayıcının kullanıcının bilgisayarına yerel olarak yüklenmiş olan yazı tiplerini indirmeye devam etmemesini ve böylece daha iyi bir web sitesi performansı sağlamasını sağlar.

Yazı tipi oluşturmayı özelleştirin: CSS yazı tipi ekranı

@font-face için yazı tipi görüntüleme tanımlayıcısı ile yazı tipi performansını kontrol etmek, indirmenin ne kadar sürdüğüne bağlı olarak Google Yazı Tiplerinin nasıl oluşturulacağına karar vermenizi sağlar. Başlangıçta, web tarayıcılarının, yazı tiplerinin yüklenmesi çok uzun sürdüğünde ne yapılması gerektiğine ilişkin varsayılan ayarları vardır. Çoğu, geri dönüş yazı tipini kullandıkları bir zaman aşımı süresi belirler, ancak ne yazık ki zaman aşımı süreleri farklıdır.

Yeni tanıtılan font-display özelliği şu anda beş değer aralığını desteklemektedir: auto | blok | takas | geri dönüş | isteğe bağlı

Metni belirli bir yazı tipinde işlemek çok önemliyse, özelliği değeri engelleyecek şekilde ayarlamalısınız. Bunun nedeni, tarayıcının hazır olmadıklarında tercih edilen yazı tipi yüzü yerine yenilmez metni kullanmasına ve indirmeyi bitirir bitirmez değiştirmesine izin vermesidir. Çoğu tarayıcı bu değeri varsayılan ( auto ) değerleri olarak kullanır.

Takas , tercih edilen yazı tipi yüzü hazır olana kadar geçici bir yazı tipi yüzü oluşturmayı göze alabileceğiniz durumlarda kullanılabilir. Takas, engellemeye benzer, ancak sayfa yüklenmeye başlar başlamaz yedek yazı tipini işler ve hazır olur olmaz bunları tercih edilen yazı tipiyle değiştirir. Bu değerin sonsuz takas süresi ve sıfır saniye blok süresi vardır.

Takas değeri, metni kaydırarak okuyucu deneyimini yarı yolda bozmamak için gövde metni için ideal değildir. Bunu, şirketin adını veya sloganını bir geri dönüş kullanarak hızlı bir şekilde görüntülemeniz, ancak sonunda markalama amacıyla resmi yazı tipini gerektirmeniz gereken logo metni için kullanabilirsiniz.

Örnek: font-display özelliği değiş tokuşa ayarlandı
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

Takas değeri, HTML belgenizde Google yazı tiplerinin nasıl bağlanacağını göstermek için kullanılan kodun ilk satırlarında (Google Yazı Tipi API'si) uygulandığı görülebilir.

Geri dönüş, takasa benzer ancak sınırlı bir takas süresine sahiptir. Tercih edilen yazı tipi yüzü, genellikle sıfır saniye olan belirli bir süre içinde yüklenmezse, metin sayfanın geri kalan ömrü boyunca yedek yazı tipini koruyacaktır. Bu, gövde metni için iyi bir adaydır; Metni mümkün olduğunca çabuk işler ve kimse okumaya başladığında onu değiştirmez.

İsteğe bağlı değer, geri dönüşün bir kopyasıdır, ancak tarayıcının, kullanıcıların ağ hızını göz önünde bulundurarak web yazı tipi indirmesini başlatıp başlatmamaya karar vermesine olanak tanır. Bağlantının çok zayıf olduğu bir durumda, tarayıcının istekleri sınırlaması ve web yazı tipini indirmek için herhangi bir istek göndermeyerek en çok ihtiyaç duyulan kaynaklara öncelik vermesi gerekir.

Yazı tipi ailesini ve türevlerini sınırlayın

Her yazı tipi ailesi ve varyantı sayfa ağırlığına katkıda bulunduğundan, Google Yazı Tipi optimizasyon sürecinizin bir parçası bu iki öğeyi sınırlamayı içermelidir.

İtalik , normal, kalın vb. gibi çeşitli varyantların mevcudiyeti, bunları indirme işleminize dahil etme 'seçimine' sahip olduğunuz anlamına gelmez. İndirmenizi tam olarak gereken değişkene indirin ve çok fazla dahil etmekten kaçının. Tam bir varyantı indirmek israf olur çünkü ondan yalnızca bir kelime kullanmak istersiniz. Google Yazı Tipleri için bir sonraki optimizasyon hilesinin kullanışlı olduğu yer burasıdır.

Metin parametresini kullanın

Metin parametresi, bilmeniz gereken en iyi Google yazı tipi optimizasyon hilelerinden biridir ve şaşırtıcı bir şekilde çoğu geliştirici bunu kullanmaz. Parametre, yalnızca ihtiyacınız olan karakterleri yüklemenize izin verir.

Aşağıdaki örnekte olduğu gibi, şirket adınızda bir yazı tipi yüzünün yalnızca iki harfini kullanmak istediğinizi varsayalım. C ve N harfleri için farklı yazı tipleri kullandım:

Firma Adı

Yazı tipi yüzünün tamamı yerine yalnızca bu iki harfi yüklemeyi isteyebilirsiniz. Yazı Tipi URL'si aşağıdaki gibi ekstra parametreler içerecektir:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

Sonuç olarak

Google Yazı Tipi optimizasyonu, bir web sitesinin genel performansını iyileştirmek için çok önemli bir stratejidir.

Tipografide iyi tasarımın yanı sıra erişilebilirlik ve okunabilirlik her zaman odaklanılması gereken ana faktörlerdir. Yazı tipi performansını iyileştirmek için yukarıda bahsedilen yöntemlerin tümü, yazı tipi ağırlığını küçültmeye, web yazı tiplerine mümkün olduğunca çabuk erişmeye ve kullanıcı ağı kesintili olduğunda geçerli biçim/alternatifler oluşturmaya odaklanır.

Bu yöntemlerden herhangi birini denediyseniz ve bu makalede bahsedilmeyen herhangi bir web yazı tipi optimizasyon işlemi hakkında lütfen bize bildirin.