Adamına Göre Muamele Tekniği - Site HIZI

10-06-2021, 21:42:33

Sitenize giren ziyaretçi için, kullandığı sisteme uygun yazı tipi sunmak nasıl olurdu?
Örneğin Apple için San Francisco, Windows için Segoe UI yada Android için Roboto ...

Hepsini tek bir satırlık CSS koduyla yapmak mümkün.

Ayrıca bu teknik, sistem fontlarını çağırdığı için Google Font yada Özel Font ile kıyaslandığında en az %300 performans artışı sağlar.

Çünkü harici bir üçüncü taraf http bağlantısı, yada ekstra bir dosya çağrılmaz.
Sadece kullanılan sistemi tanır ve ziyaretçinin tarayıcısına o sistem içindeki fontu sunar.
Bu çok kısa sürede gerçekleşir ve gecikme minimum seviyeye iner. Böylece siteniz hiç beklenmedik şekilde hızlanabilir. Nasıl mı?

İlk yöntem:

font-family: -apple-system,
 BlinkMacSystemFont,
 "Segoe UI",
 Roboto,
 Oxygen-Sans,
 Ubuntu,
 Cantarell,
 "Helvetica Neue",
 sans-serif;

İkinci yöntem:

font-family: system-ui;

İkisi de aynı işlevi gerçekleştiriyor. Elbette ikincisi daha yalın ve sade.
İlkini paylaşmaktaki amacım, system-ui nasıl çalışıyor ipucu versin istedim.

İşte bu yazı tipi yığını, sisteme göre çözüm sunuyor. Yani adamına göre davranıyor.
Böylece hem kullanıcı deneyimi hemde sitenizin hızı arzuladığınız sonuçlarla uyumlu oluyor.

İnternet sitelerinizin font optimizasyonu için açtığım bu konu, diğer açtıklarımla beraber üçüncü, dördüncü falan olacak.
Çünkü gördüğüm kadarıyla, fontlar nedense küçümseniyor. Gereken özen gösterilmiyor.

Herkes cache ve minify çözümlerine saplanıp kalmışken, sizi bu bataklıktan font optimizasyonu kurtarabilir.
Deneyin ne kadar haklı olduğumu göreceksiniz.

Umarım faydalı olmuştur. Saygılar ve sevgiler...

DostWeb, normalmert, CoLee ve 26 kişi bunu beğendi.

29 kişi bunu beğendi.

10-06-2021, 21:45:39

#2

aLLioni

seviyorum bu adamı

10-06-2021, 21:45:59

#3

wenja

Deeplomap.com

Ben çok beğendim ve faydalı buldum. Eline sağlık

10-06-2021, 21:48:41

#4

oguzhanx

Merhaba,

çok faydalı bir bilgi, teşekkürler. Dediğiniz gibi fontlar çok küçümseniyor, bu tarz bir kullanım performans açısından çok faydalı olacaktır fakat, font değişikliğiyle beraber tasarım bambaşka bir noktaya gidecek ve örnek olarak 25px size verdiğimiz bir başlık normalde tek satır görüntüleniyorken, cihaz - font değişimi ile birlikte iki satıra çıkacak vs. gibi sorunlar olacaktır. Günümüzde tasarım en öncelikli noktalardan bu yola gidilirken sayfaları farklı cihaz ve tarayıcılarda kontrol ederek gitmek gerekli.

10-06-2021, 21:52:09

#5

Misafir

aLLioni adlı üyeden alıntı: mesajı görüntüle

seviyorum bu adamı

Bende sizleri seviyorum. Teşekkürler

wenja adlı üyeden alıntı: mesajı görüntüle

Ben çok beğendim ve faydalı buldum. Eline sağlık

Faydalı olduysa ne mutlu (:

oguzhanx adlı üyeden alıntı: mesajı görüntüle

Merhaba,

çok faydalı bir bilgi, teşekkürler. Dediğiniz gibi fontlar çok küçümseniyor, bu tarz bir kullanım performans açısından çok faydalı olacaktır fakat, font değişikliğiyle beraber tasarım bambaşka bir noktaya gidecek ve örnek olarak 25px size verdiğimiz bir başlık normalde tek satır görüntüleniyorken, cihaz - font değişimi ile birlikte iki satıra çıkacak vs. gibi sorunlar olacaktır. Günümüzde tasarım en öncelikli noktalardan bu yola gidilirken sayfaları farklı cihaz ve tarayıcılarda kontrol ederek gitmek gerekli.

Size hak veriyorum. Fakat bahsettiğiniz durum bütün font dönüşümleri için geçerli.
Google yada özel font olmaksızın font render, CLS sorunu yaratabiliyor.

Bunun çözümü için size-adjust adlı bir CSS kodu var.
Ancak henüz Chrome başta olmak üzere bazı tarayıcılar tarafından desteklenmiyor.
Yakında destekleneceği haberini paylaşmıştım:
https://www.r10.net/google-optimizas...mujde-cls.html

Sabırsızlıkla bekliyoruz.