Web yazı tipini optimize etme kılavuzu
Tipografi iyi web tasarımı için çok önemlidir – okunabilirlik, okunabilirlik, erişilebilirlik ve iyi yapılmış marka görüntüleme, mesajınızı başarılı bir şekilde iletmede çok önemlidir. Webfont, tüm bunlara izin verir, metnin seçilmesine, aranmasına ve büyütülmesine izin verirken, aynı zamanda ekran boyutu ve çözünürlüğüne bakılmaksızın tutarlı ve keskin bir oluşturma sağlar. Ancak, bu gelişmiş kullanıcı deneyimi bir performans ücreti alınabilir: kullandığınız her yazı tipi, sitenize erişirken ziyaretçilerin indirmesi gereken ek kaynaklardır ve sayfanızı yüklemek için gereken süreyi ekler.
Ancak bir web yazı tipi kullanmak, sayfanızın yavaş olması gerektiği anlamına gelmez. Aslında, yazı tipinin nasıl yüklendiği ve sitenize uygulandığı konusunda akıllıca bir strateji ile optimize edilen yazı tiplerini kullanmak, toplam sayfa boyutunu azaltmaya ve sayfanın hızını artırmaya yardımcı olabilir. Dahası, web yazı tipini optimize etmek, çekirdek web verilerinin – özellikle metrik CL’lerin değerini artıracaktır. Web yazı tipi nedir? Web’de kullanılan iki temel yazı tipi türü vardır:
Web-Safe Yazı Tipi: Bu, New Roman, Arial ve Courier Times da dahil olmak üzere, daha önce cihaza yüklenmiş standart bir yazı tipidir.
WebFonts: Bu kararsız bir yazı tipidir ve görüntülenmeden önce tarayıcı tarafından indirilmelidir.
Sıradan gözler için Webfont, en azından ABD için İngilizce konuşmacılar için bir alfabe harfleri koleksiyonudur. Ancak daha derin araştırıyorlar ve aslında bir uçan makinelerin bir koleksiyonudur ve her uçan makine, sadece İngilizce değil, birçok dilde harfleri veya sembolleri tanımlayan bir vektör biçimidir.
İki değişken belirli yazı tipi dosyalarının boyutunu belirler: her uçan makinenin vektör yolu karmaşıklığı ve belirli bir yazı tipindeki uçan makinelerin sayısı. Örneğin, Latin, Yunanistan ve Sirilic dahil 897 glif içeren açık sans, popüler web yazı tipleri. Açık sans yüzlerce uçan makine içerir. Web yazı tipi barındırma ve gönderme Web yazı tipi kullanmayı seçtiğinizde, bir yerde saklanmalıdır. Web yazı tiplerini yayınlamak için iki seçenek vardır:
Üçüncü taraf barındırma: Adobe TypeKit, Fonts.com veya Google Fonts gibi yazı tipi hizmetlerini kullanma.
Bu seçeneklerin her birine eşlik eden avantajlar ve dezavantajlar vardır. Üçüncü taraf çözümleri kullanmak daha kolay hazırlanmış olsa da, bu, performans ve güvenlik üzerinde veya hizmet düşse bile kontrolünüz olmadığı anlamına gelir. 2015 yılında Tykpekit sunucusu bozulduğunda, dünyadaki siteler Arial ve Georgia’dan memnun olmaya zorlandı.
Ancak kesintiler hakkında endişelenmiyorsanız – TypeKit sadece dört saat boyunca düşer – hız veya nakliye, üçüncü taraf barındırma kendi barındırma yazı tipi kaynaklarınızla uğraşmak istemiyorsanız seçiminiz olabilir. Web yazı tiplerinin yazı tipi optimizasyonunu optimize etmek için ipuçları karmaşık bir konudur ve yazı tipi teslimatını optimize etmenin birçok farklı yolu vardır. Yazı tipinizi tam olarak nasıl optimize ettiğiniz, barındırma tercihlerinize, site tasarımınıza ve sunucunuza, teknik özelliklerinize ve yazı tipi performansınızı ne kadar iyileştirmek istediğinize bağlı olacaktır.
Yazı tipinizi optimize etmeye başlamadan önce, tam olarak kaç yazı tipini kullandığınızı bilmek iyidir. Bunu yapmanın kolay yolu, web sitenizi GTMetrix veya Pingdom gibi hız test araçlarıyla çalıştırmaktır, böylece üretilen şelale grafiğini analiz edebilir ve HTTP isteğinizi görebilirsiniz. Bazen eklentiler ve temalar, farkında olmadığınız yazı tiplerini kullanabilir. Yazı tipi teslimatınızı optimize etmek için atabileceğiniz bazı adımlar. 1. CSS @Font-Face kuralları için tarayıcı desteği olan yazı tiplerinin kullanımını denetleyin ve izleyin. HTTP arşivine göre, web sayfalarının% 67’si artık özel yazı tipleri kullanıyor, ortalama bir web sitesi ile dört isteği var. Grud tam olarak kaç yazı tipinin çok fazla olduğunu biliyor, ancak genel kurallar üç kişinin ve en iyisinin sabitlenmesi İki – biri başlığınız için, diğeri vücut kopyası için. Sadece kullandığınız web yazı tipi sayısını en aza indirmekle kalmaz, toplam HTTP istek sayısını azaltmaya yardımcı olur, aynı zamanda daha ince ve tutarlı bir site tasarımı da sağlar. Örneğin Lingscars’ı ele alalım. Gözlerimi çizmek istememi sağlayan birçok saçma yazı tipi ve öğesi var. Neyse ki, bu sadece daha hızlı yüklenmesi için güvenli bir web yazı tipi kullanır.
Eğimli, kalın ve diğer ağırlıklar gibi varyasyonları dikkate almak da önemlidir. Yazı tiplerinin her varyasyonu dosya boyutuna ağırlık katar, bu nedenle kullanmayı planlamadığınız şeyi eklemekten kaçınmaya çalışın. 2. Yazı Tipi Kaynakları Alt Sitenizde çeviri sağlamadığınız sürece, en iyisi minimum karakter setini korumaktır. Bu, yalnızca ihtiyacınız olan dil için karakter göndermek anlamına gelir. Google web perf öğretmeni Ilya Grigorik tarafından açıklandığı gibi, birçok yazı tipi, belirli sayfalar için gerekli karakterleri göndermek için alt küme veya hatta birkaç Unicode aralığına bölünebilir. @Font-face kullanarak, üç farklı formda belirlenebilen aralık değerlerinin aralığını belirlemek için Unicode Aralık Tanımlayıcısını kullanabilirsiniz: tek kod noktası (örneğin, U+416): Bir karakteri gösterir.
Aralık aralığı (örneğin U+400-4FF): Karakter aralığının başlangıç ve bitiş kodunu gösterir.
Joker aralığı (örneğin, u+4 ??) 😕 Karakter onaltılık basamağı gösterir.
Örneğin, harika yazı tipi ailesini Latin ve Japon alt kümesine bölme şekliniz, her biri tarayıcı tarafından kullanıcının ihtiyaçlarına göre indirilecek:
@font-face {font-family: ‘harika yazı tipi’; yazı tipi tarzı: normal; yazı tipi-ağırlık: 400; Src: local (‘harika yazı tipi’), url (‘/fonts/awesome-l.woff2’) biçimi (‘woff2’), url (‘/fonts/awesome-l.woff’) biçimi (‘woff’),, Url (‘/fonts/awesome-l.ttf’) biçimi (‘truetype’), url (‘/fonts/awesome-l.eot’) biçimi (‘gömülü-optype’); Unicode-Range: U+000-5ff; / * Latin glifleri */} @font-face {font-family: ‘harika yazı tipi’; yazı tipi tarzı: normal; yazı tipi-ağırlık: 400; Src: local (‘harika yazı tipi’), url (‘/fonts/awesome-jp.woff2’) biçimi (‘woff2’), url (‘/fonts/awesome-jp.woff’) biçimi (‘woff’),,, Url (‘/fonts/awesome-jp.ttf’) biçimi (‘truetype’), url (‘/fonts/awesome-jp.eot’) biçimi (‘gömülü-optype’); Unicode-Range: U+3000-9fff, u+ff ?? / * Japon glifleri */} Grigoric, alt kümeyi tanımlarken yazı tiplerinin yeniden kullanımını optimize etmek önemlidir. Örneğin, her sayfada örtüşmekten farklı bir karakter koleksiyonu indirmeyin. Bu, Latince, Kiril, vb. Gibi komut dosyalarına dayalı alt küme yapmak için iyi bir uygulamadır.
Google’ın webfontunun tek amacı sitenizin başlığını görüntülemekse, burada ipucu: yalnızca başlıkta kullanılan belirli karakterleri indirin. Bunu, Google yazı tipi URL’sinin sonunda indirmek istediğiniz belirli harfleri ekleyerek yapabilirsiniz.
Örneğin, Montserrat kullanarak blog kelimesini yüklemek istiyorsanız, aşağıdakileri kullanarak yapmalısınız:
>
Bu bağlantı, Google yazı tipi CDN’ye diğer tüm karakterleri yok sayarken sadece büyük B ve küçük harf L, O ve G göndermesini söyler. Her tarayıcıya optimize edilmiş bir yazı tipi biçimi sağlayın Web’de kullanılan dört yazı tipi kapsayıcı formatı vardır: EOT, TTF, WOFF ve WOFF2.
Gömülü Açık Tür (EOT): Microsoft, şimdi yalnızca IE tarayıcısı tarafından kullanılan bu biçimi tasarladı.
True Type Font (TTF): 1980’lerin sonlarından beri kısmi IE desteği olan bir format.
Web Açık Yazı Tipi Biçimi (WOFF): 2009 yılında geliştirilen ve temel olarak ek sıkıştırma ve meta verilere sahip truetype olan bir format. Geniş desteğe sahipti, ancak birkaç eski tarayıcıda mevcut değil.
Web Açık Yazı Tipi Biçimi (WOFF2): WOFF’de, dosya boyutunda ortalama% 30’luk azaltma sağlayan bir artış. Destek hala birçok tarayıcı sürecindedir.
Ne yazık ki, tüm tarayıcılarda işlev gören tek bir format yoktur, bu da birkaç format göndermeniz gerektiği anlamına gelir. Hangi formatın kullanılacağına tam olarak karar verirken, tarayıcıyı görüntülemek için Google Analytics’inizi kontrol edin ve hangi cihazların ziyaretçileriniz arasında en popüler olduğunu kontrol edin.
Ziyaretçileriniz modern tarayıcının çoğunu kullanıyorsa, aşağıdakiler gibi yalnızca iki format belirleyebilirsiniz:
@font-face {font-family: ‘Montserrat’; SRC: Local (‘Montserrat’), Local (‘Montserrat’), URL (‘Fonts/Montserrat.woff2’) biçimi (‘woff2’), url (‘fonts/montserrat.woff’) biçimi (‘woff’); }
İlk format olan WOFF2, size ekstra sıkıştırma avantajı sağlar. Bu tarayıcı WOFF2’yi desteklemiyor, Woff’a geri döndü, bu da tüm ana tarayıcıların en son sürümünde destekle birlikte iyi sıkıştırmaya sahip. Bununla birlikte, Opera Mini, IE8 ve Android tarayıcısına daha uzun bir destek eksikliği vardır. Bu bir endişe olsa da, bu tarayıcı otomatik olarak güvenli bir web yazı tipini varsayılan olarak olacaktır. 4. SRC listesindeki Local () ‘ye öncelik verin Site ziyaretçilerinin daha önce bilgisayarlarına yüklenmiş bir web güvenli yazı tipine sahip olmasını beklerseniz bile, zaten belirli web yazı tiplerine sahip olup olmadıklarını tahmin etmek imkansızdır. Örneğin beni al. Bilgisayarımda bir düzine webfontum var, bu yüzden web sitesini ziyaret ettiğimde, zaten sahip olduğum webfont’u indirmek zorunda kalırsam mantıklı değil. Başka bir dezavantaj, yazı tipi tarayıcıya yüklendiğinde boş alan (görünmez metin flaşı, yani foit) veya yanıp sönen içerik metni) görüntülenir. Bu, bilgisayarlarına yerel olarak yazı tipleri yükleyen kullanıcılar için kesinlikle gereksizdir. Bu konuda nasıl çalışılır oldukça basittir: Yazı tipinin zaten kullanıcı sisteminde olup olmadığını kontrol etmek için local () kullanın. Yerel (‘yazı tipi adı’
) İlk olarak SRC listesinde, mevcut yazı tipleri için HTTP isteklerinin yapılmamasını sağlarsınız. 5. Yazı tipi isteğini varsayılan olarak daha önce girin, @font-face tembel yükleme yazı tipleri. Bu, sayfanızın içeriği yüklenene kadar gecikmiş yazı tipleri isteğinin olduğu anlamına gelir. Bu, hız ve performans kadar iyi bir şeydir ve ilerici iyileştirme tekniklerini takdir ederseniz. Ancak kullanıcı deneyimi bir öncelikse ve Blaring Foit deneyimini sevmiyorsanız, örneğin başlık metniniz gibi belirli yazı tipleri için bu davranışı değiştirmek isteyebilirsiniz. Yükleme ve oluşturma yazı tiplerini , fonts-display veya yangın yükleme yazı tiplerini kullanarak ayarlayabilirsiniz. Tarayıcıya yazı tipinin yakında ihtiyaç duyulacağını söyleyin, ancak nasıl kullanılacağını söylemez. Nasıl kullanılır: html:
CSS:
@font-face {font-family: ‘harika yazı tipi’; yazı tipi tarzı: normal; yazı tipi-ağırlık: 400; Src: local (‘harika yazı tipi’), url (‘/fonts/awesome-l.woff2’) biçimi (‘woff2’),/ * önceden yüklenir */url (‘/fonts/awesome-l.woff’) Biçim (‘woff’), url (‘/fonts/awesome-l.ttf’) formatı (‘truetype’), url (‘/fonts/awesome-l.eot’) format (‘gömülü-optype’); Unicode-Range: U+000-5ff; / * Latin glifleri */}
Genel olarak, @font-yüz bildiriminizi tüm etiketlerinin üzerine yerleştirmek en iyisidir. Yazı tipi ekranının nasıl kullanılacağı hakkında daha fazla bilgi edinmek için, kitle için ‘Font-Display’ CSS-Tricks’e bakın. 6. Doğru önbellek bir zorunluluktur, çünkü yazı tipleri sık sık güncellenmeyen statik kaynaklardır, yazı tipleri tarayıcıda yerel olarak önbellek olabilir, bu nedenle kullanıcıların bir sonraki sitenize eriştiklerinde yazı tiplerinizi tekrar indirmeleri gerekmez. Bu şekilde, kullanıcının tarayıcısı tarafından indirilmesi gereken veri miktarı ve HTTP isteklerinin sayısı azalır. Google’ın Web Temel Bilgileri Kılavuzu, sunucunuzun sitenizdeki farklı sayfalar arasında yazı tiplerinin yeniden kullanılmasını sağlamak için uzun ömürlü bir yaşam damgası ve yeniden doğrulama jetonları vermesini önerir. Her yazı tipinin kendi performansında bir dizi sorunu olduğu için localStorage veya indexedDB’yi kullanarak depolama yazı tiplerinden de kaçınmalısınız. Önbellek tarayıcısının yalnızca kendi etki alanınızdan veya CDN’nizden hizmet verdiğiniz yazı tiplerine uygulanabileceğini unutmayın – Google Font, vb. Üçüncü taraflardan sunulan yazı tipi tarayıcısı önbelleği üzerinde kontrolünüz yoktur.
Sonuç Daha önce de belirttiğim gibi, webfont optimizasyonu çok karmaşık bir konudur.Daha iyi yazı tipleri üretmek için uygulayabileceğiniz birçok teknik var ve bu makale sadece yüzeyini çiziyor.Bu nedenle, daha fazla bilgi edinmenizi ve hangi optimizasyon yönteminin sizin ve web siteniz için en uygun olduğunu öğrenmenizi öneririm.Web yazı tipini optimize ederek, çekirdek web’in önemli veri puanlarından biri olan kümülatif düzen kaymasını da artıracaksınız.İşte bazı ek web yazı tipi optimizasyonu kaynakları.
Webfont’un Seçenekleri ve Hızı – Varvy.com
Web yazı tipinin optimizasyonu – Nerdwallet
Vaka çalışması – Web yazı tipi performansını analiz etmek – Keycdn
WordPress’te Web Font Optimizasyon Kılavuzu – Kinsta
Kaç yazı tipi kullanıyorsunuz?Web yazı tipinin optimizasyonunu düşündünüz mü?Aşağıda bir yorum bırakın!
