E-Bülten listemize abone olun.

ABONE OL

Web Fontları Kullansak Sayfa Hızımız Etkilenir mi?

Son dönem web tasarım trendleri içerisinde web tipografi olarak adlandırılan dışarıdan çağrılan fontlarla kullanıcı arayüzündeki tipografiyi özelleştirmek ve tarayıcının desteklediği font setinden bağımsızlığını ilan etmek çok moda oldu. (Sarkastik bir yaklaşım kullanmıyorum; bizler de aynı yolun yolcusuyuz.) Eğer siz de “Peki bu modanın beraberinde getirdiği katma değerin bir de marjinal maliyeti var mı?” diye düşünenlerdenseniz, işte bu yazımız tam sizler için…

Sizlere muhtemelen çok teknik gelebilecek bir yazı yazmak yerine, yaşanmış bir vakadan yola çıkarak kendi projelerinizde değerlendirebileceğiniz ipuçları sunmanın daha doğru bir yol olduğunu düşündüm.

SHERPA Blog her hafta e-postanızda. Ücretsiz abone olmak için tıklayın.

Geçtiğimiz aylarda hizmet sağladığımız firmalardan bir tanesinin web uygulamasında sayfa yüklenme sürelerinden, kullandığı web-font sisteminden kaynaklanan bir anomali olduğunu tespit ettik. Anomalinin kaynağını araştırmak adına font sağlayıcının knowledge-base’inde göz kurutucu bir yolculuk yaşadıktan sonra sistemin font sağladığı müşteri projeleriyle yaptığı el sıkışma stilinin, istisnasız her sayfa görüntülenmesi (pageview) esnasında tekrar tekrar gerçekleştiğini ve font sağlayıcı firmanın teknik standartları gereği, bu adımda hiçbir cache’lemeye de izin verilmediğini gördük. Durduk. Soğuk suyu içtik. Zira bu durum, site ziyaretçisinin bağlantı tipinden başlayan bir dizi (çok teknik) parametreye bağlı onlarca potansiyel durumda, sitenin font yükleme süreçlerinde standart sayfa yükleme süresinin dışında istatistikler sunabileceğini işaret ediyordu. Derhal, projenin teknik ekibiyle durum değerlendirmesi yaptık ve problemin her hangi bir trajik etkiye mahal verecek duruma gelmeden çözümlenmesi yönünde atılacak adımları, yanıt arayacağımız sorulardan başlayarak listeledik.

  1. Küçük bir testle hipotezimizi doğrulayabilir miyiz?
  2. Font sağlayıcı ile temasa geçip, durumu anlatıp, çözüm talep edebilir miyiz?
  3. Font sağlayıcının sunduğu font seti başka bir font sağlayıcı sunuyor mu?
    • Evet – O font sağlayıcının el sıkışma yöntemi nedir?
    • Hayır – Font değişikliğinin markanın görsel çizgisine etkisi nedir?
  4. Fontların gecikmeli yüklenmesinin önüne geçebileceğimiz başka bir hack yöntemi var mı?

İlk sorunun yanıtını almak basitti. Korktuğumuz durum, korku dolu sinyaller vermeye başladı. İkinci adımda beklediğimiz sürelerde yanıt gelmeyince, hemen üçüncü adımı attık ve seçilen font’un, sağlayıcıya özel lisanslanmış bir font olduğunu anlayınca, font değişikliğini tartışmaya başladık. Paralelde, font sağlayıcının diğer font sağlayıcılarla olan performans karşılaştırmasına dair bir araştırma yürüttük ve şu makaleden ciddi anlamda bilgi edindik.

Okudukça, daha da okuyasımız geldi ve font sağlayıcımızın el sıkışma yönteminin arkasındaki anomalinin çok detaylı teknik bir analizini bulduk. Bu analiz en büyük korkumuz olan “Font yükleme şekli, sayfa yükleme süresine direkt etki eder.” hipotezini doğruluyordu. Aynı makale içerisinde, kullandığımız font sağlayıcının;

  1. Local server’dan yüklenen CSS dosyalarının data URI yerine yine aynı local server’a indirilmiş olan font dosyalarına linklenmesinin
  2. Redirection’ın browser tarafından cache’lenerek çözümlenebilmesinin
  3. İlk isteğin Javascript arayıcılığıyla yapılarak, CSS dosya yükleme tipini asenkron bir kurguya dönüştürebileceği, bu sayede CSSOM yapılanmasının önüne set çekmeyebileceğinin mümkün olduğunu gördük.

Lakin font sağlayıcı bu adımların hiçbirini atmaya yanaşmadı.

Ya daha fazla risk alarak, hem optimum kullanıcı deneyiminin önünde yüksek bentli bir baraj oluşturarak sayfa yüklenme hızının kontrolümüz dışında olmasını kabul edecek, ya da font sağlayıcı ve dolayısıyla fontu değiştirerek potansiyel bir bounce rate artırıcı unsuru ortadan kaldıracaktık.

Biz ikinci adımı attık.

Sonuç: sitenizde yaşatmayı kullanıcı deneyimi, o kullanıcının projenin arayüzünde göreceği font’un hangi teknoloji ile görüntülenebilir kılacağına kadar bağlıdır. Her seçim bir kaybediştir 🙂 Font seçiminizi finalize etmeden önce mutlaka bu fontu sağlayıcısının nasıl bir entegrasyon şart koştuğunu inceleyin.

Aşağıdakiler de bu konuda daha fazla okumak isteyenler için bizim hediyemizdir.

Esen kalın…
http://www.quora.com/Is-there-a-typeface-similar-to-Gotham-that-is-available-for-use-with-font-face
http://www.kevinpaxman.com/using-gotham-on-the-web/
http://izeni.com/blog/why-you-cant-use-gotham/
http://www.codeproject.com/Articles/462209/Using-custom-font-without-slowing-down-page-load