Yazı Tipi Yükleme Stratejisi: Hızlı yazı tipleri için teknikler ve UX'i etkilemez.

Güzel web sitesi ... ama neden mektuplar yavaşça yükseliyor? Müşterilerin hemen "basmasına" neden olan sorunlar

Hiç bulundun mu? Güzel tasarlanmış web sitesine giriyorsunuz. Bunun yerine, bir mesaj olması veya garip yüzün (temel bir sistem yazı tipi gibi) birinci ve başka bir saniye göstermesi gereken boş alana oturup bakmak zorunda kaldı, tasarıma göre "yanıp sönen" güzel bir yazı tipine dönüştü ... ilk hisiniz nedir? "Web sitesi çok yavaş." "Bak, profesyonel yapma", değil mi? Bu sorun küçük bir mesele değil. Birçok kişinin göz ardı edebileceği kullanıcı deneyiminin (kullanıcı deneyimi) ve dönüşüm oranı "gerçek katil" dir. İlk 3 saniyeden müşterileri bilmeden kaybedebilirsiniz. Sadece "yazı tipi" hikayesi yüzünden

İllüstrasyonlar istemi: Web sitesi ekranından önceki karşılaştırma görüntüleri Bir tarafı FOIT simgeleri ile boş bir alan gösterir ve diğer taraf, tasarıma (Fout) kullanıcıdan tahrişli görünen yüzle eşleşmeyen temel yazı tiplerini gösterir.

Perde arkasında: Yazı tipi neden web sitemizi "tökezliyor" yapıyor?

Bu sorunun kalbi, kullanıcı web sitenizi açtığında tarayıcı yöntemi neden olur. Tarayıcı bir web sayfası oluşturmak için HTML kodunu okumaya başlar. "Web yazı tipi" (her kullanıcının cihazına yüklenmemiş özel bir yazı tipi) kullanmam gereken komutu bulduğumda, hemen yeni bir görev almak gibi: "Önce durun! Önce yazı tipi dosyasını sunucudan indirmem gerekiyor. Mesajı buradan göstermek için!"

"İndirmeyi Durdur" süreci Bu, web geliştiricilerinin iyi bildiği 2 klasik sorundur:

• FOIT (görünmez metin flaşı): veya "harfler kaybolur", tarayıcının önce tüm metni "gizlemeyi" seçtiği belirtileridir. Doğru yazı tipi dosyasını indirene kadar bekleyin. Ve sonra kullanıcının bir an için boş bir alan olarak görmesine neden olan sonuçları gösterin
• Fout (Döşemesiz metin flaşı): Veya "Garip Yüzler", tarayıcıların daha önce sistemde bulunan yazı tipi yazı tipiyle metin göstermeyi seçtikleri belirtilerdir. Kullanıcıların içeriği hemen okuması ve bunun yerine bu yazı tipini kullanmak için doğru web yazı tipi anahtarını indirmeleri için. "Yanıp sönmeye" veya sinir bozucu düzen kaymasına neden olur

Bu semptomların her ikisi de, web sitenizin oluşturulması gereken bir sorun yaşadığına dair bir uyarı işaretidir, bu da çözülmesi gereken bir şeydir. Oluşturma engelleme kaynaklarının nasıl çözüleceğini anlamak, web hızını artırmak için önemli olan ilk adımdır.

İllüstrasyonlar istemi: Basit Infographic Tarayıcının çalışma sürecini gösterin: 1. html -> 2'yi okuyun. Komutlara bakın. Web yazı tipini kullanın -> 3. Render'ı durdurun ve sunucuya isteği gönderin -> 4. İndirme dosyasını bekleyin -> 5. Metni göster.

Bırak ... düşündüğünüzden daha hasar gördü! "Yavaş İndirme Yazı Tipi" nin iş üzerindeki etkisi

Yavaş indirme problemleri sadece güzellik değildir. Ancak iş hedeflerinizi doğrudan etkiler:

• Kullanıcı deneyimini kırın (kötü UX): Kimse beklemeyi sevmez. "Gecikme" veya "seğirme" hissi web sitenizin güvenilmez görünmesini sağlar. Ve ilk görüşteki kullanıcılar için sinirlilike neden olmak
• Çekirdek Web Vitals Abyss: , kümülatif düzen kaymasını (CLS) doğrudan etkileyen ciddi düzen hareketine neden olur . Ana mesajınız ekrandaki en büyük ise FOIT sorunu en büyük memnun boya (LCP) Tüm bunlar Google'ın SEO sıralamalarını kullandığı önemli bir faktördür.
• Kitap oranı artıyor: Kullanıcı web sitesinin yavaş ve düşmanca olduğunu hissettiğinde. Onların bastırma ve rakiplere kaçma fırsatı derhal yükselecek.
• Dönüşüm oranı azaldı: Müşterinin "ücretli" düğmesine basmak üzere olduğunu düşünün, ancak mesajlar ve düğmeler, tereddüt ve istikrarsızlığı hemen iten veya ileri geri hareket ettiren. Ve bu kayıp satışlar anlamına gelebilir

Sonunda, "Font" adı verilen küçük bir sorun, Google'daki sıralamayı, müşterilerin güvenini ve gelirini kaybetmenize neden olabilir. Bu gelişme değerli bir yatırımdır. UX/UI tasarımına dikkat etmek İyi bir kalp, bu sorunları önlemeye yardımcı olmanın anahtarıdır.

İllüstrasyonlar istemi: Etkiyi gösteren 3 grafik görüntü: ilk "hemen çıkma oranı" işaret etti, ikinci çubuk "çekirdek Web Vitals puan" puan düşüyor, üçüncü "dönüşüm oranı" listelendi.

Oyunu düzeltmek için oyunu açın! Fontları hızlı bir şekilde indirir, bir roket ekleyin ve UX'e dost olun.

İyi haber şu ki, bu sorunla verimli bir şekilde başa çıkmanın bir yolu var. Ve çoğu buradan başlamaya çalıştığınız kadar karmaşık değil:

• En kolay nihai set: `` font-display: swap`
  Bu, başlamanın en kolay ve en etkili yoludur. Sadece kod ekliyor. Google yazı tiplerinden yazı tipini aradığımızda veya kendi kodumuza `font-display: swap; "Önce temel yazı tiplerini gösterin. Beklemeyin. Gerçek yazı tipi bitmişse, o zaman geçiş" Bu yöntem FOIT sorunundan derhal kurtulmaya yardımcı olur ve kullanıcıların içeriği daha hızlı okumasına izin verir.
• Kontrolü geliştirin:
  Google yazı tipleri gibi harici bir sunucudan yazı tipini çağırmak yerine kendi kendine ev sahibi web yazı tipleri. Yazı tipi dosyalarını indirebiliriz. (Fort'u kullanmayı öneririz. Woff2 en küçük boyuttur) kendi sunucumuzda tutmak için. Bu, tarayıcının daha hızlı çalışmasına izin vererek harici etki alanına (DNS arama) bağlantının azaltılmasına yardımcı olur. Ve önbelleklemeyi tam olarak kontrol edebiliriz
• 
  Web'in üst kısmındaki ana konunun yazı tipi (H1) gibi çok önemli yazı tipleri için kritik yazı tiplerini önceden yükleyin "Bu yazı tipini hazırlamak için acele edin ve indirin. Çünkü acilen kullanmanız gerekiyor!" Bu yöntem yazı tiplerini en önemli şekilde daha hızlı kullanmaya hazır hale getirecektir.
• Yalnızca gerekli seçin: Yazı Tipleri Yazı
  Tipi Dosyası Altma Dünyadaki tüm diller için harfler olabilir. Bu da dosyaları gereksiz yere büyük yapar. "Altma", gerçekten kullanmamız gereken karakterleri (İngilizce ve Tayland gibi) küçük bir dosyaya kesme tekniğidir. Yükü daha hızlı hale getirir, Google yazı tiplerinden , dili seçtiğimizde temel bilgileri otomatik olarak alt belirleme eğilimindedir.

Bu teknikleri seçmek, web sitenizin çok daha hızlı indirmesine yardımcı olacaktır. Çekirdek Web Vitals, özellikle Inp üzerinde doğrudan iyi bir etkiye sahip olan Web.dev'in en iyi font yükleme uygulamalarından incelenebilir .

İllüstrasyonlar istemi: Güzel Infographic, simgeli 4 ana tekniği gösterir: 1. CSS simgesi simgesi `swap ', 2. yazı tipi, roket` `prelad' simgesi '

Gerçek Şeyden Örnekler: E-ticaret web sitesi yazı tipini ayarlayarak satışları döndürdüğünde.

Online kahve çekirdekleri satan "Aroma Fasulye" şirketi, bir marka oluşturmak için vintage bir yazı tipi kullanan güzel bir web sitesi var. Ancak büyük bir sorunla karşılaştılar. "Ödeme sayfasından ayrılma oranı anormal." Ekip, ödeme sayfasında birçok web yazı tipinin kullanıldığını ve FOIT'nin "onay düğmesini onaylamasına" neden olduğunu ve finansal miktarın özetinin bir an için kaybolduğunu buldu. Karışıklık yaratın ve müşteriler için kendinden emin değilsiniz.

Görevden sonra: Geliştirme ekibi 3 ana teknik kullanılarak çözüldü.

1. `` & Ekran = swap` geç olmak için tüm yazı tiplerini değiştirin
2. Kendi ev sahibi. Ürünün fiyatı ve ödeme düğmesi ile kullanılan ana yazı tipi.
3. Düğmenin yazı tipine komutlar ekleyin. "Siparişi onaylayın"

Somut Sonuçlar: İyileştirmeden sadece bir hafta sonra CLS skorunun%70'den daha iyi olduğunu buldular. Bu daha önce Pagespeed Insights'ta uyarılmıştı ve en önemlisi "ödeme sayfasında sepet terk edilmesi%25 azaldı" ve bu da önemli genel satışlarla sonuçlandı. Bu, yazı tipleri gibi küçük şeylerin iyileştirilmesinin gerçekten büyük bir iş etkisi yaratabileceğinin bir kanıtıdır.

İllüstrasyonlar istemi: Sol cep telefonundaki ön ve sonra ödeme sayfası fiyatı ve eksik düğmeyi gösterir. Yükleme simgesi, mükemmel web sayfasını gösteren sağda (sonra) dönüyor. Yükselen satış grafiğine sahip metin ve düğmeyi temizleyin

Bu senin gözlerin! Kontrol Listesi 4 Adım Fontları daha hızlı indirmek için Web'i yükseltin.

Web sitenizi daha hızlı hale getirmeye hazır mısınız? Beklemek zorunda değilsin! Bu kolay kontrol listesini takip etmeye çalışın.

1. Mevcut durumu kontrol edin: Google PagePeed Insights'a gidin ve web sitenizi URL koyun. Eğer haklı olduğunuzu fark ederseniz "webfont yükü sırasında metnin görünür kalmasını sağlamak" önerilerini arıyorum!
2. Ekranı artırın = swap` (Hızlı Kazan): Google yazı tiplerini kullanıyorsanız, yazı tipini çağırmak ve `` & ekran = swap` url'de biten `` '' 'koduna geri dönün. Bu en kolay ve en hızlı düzenleme.
3. (Gelişmiş için) Kendi kendine yük:
   • Yazı tipi dosyasını indirin. Telif hakkıyla korunan kaynaklardan istediğiniz .woff2 soyadı.
   • Yazı tipi dosyalarınızı ana bilgisayarınıza yükleyin.
   • Yazı tipini çalıştırmak için 'font-display: swap; ``
   • En önemli yazı tipi için `` `` `` `` ``
4. Ölçün ve takdir edin: Pagespeed Insights'a tekrar geri dönün ve yeni çalıştırın. Tavsiyenin gittiğini göreceksiniz. Ve genel puan daha iyi!

Verimliliğin iyileştirilmesi sadece yazı tipi değildir. yeni format resimleri kullanma sürdürülebilir web tasarımının bir parçası olan sürdürülebilir bir web sitesi oluşturmak

İllüstrasyonlar istemi: Her bir öğede simgeli 4 öğeli (büyüteç, kodlar, roketler, grafikler) ve ucuz bir kene -yeşil işaretine sahip kontrol listesi görüntüleri.

İnsanların merak etme eğiliminde olan sorular (SSS) yazı tipi yüklemesindeki tüm sorunları temizler.

S1: `` font-display: swap` ve `` isteğe bağlı '' arasında kullanmalı mıyım?
C: Çoğu web sitesi için `` swap '' en iyi seçenektir. Kullanıcının içeriği hemen temel yazı tipleri ile göreceğini ve `` isteğe bağlı '' ile daha güçlü bir anlamı daha güçlü bir şekilde göreceğini garanti ettiğinden, yazı tipi kısa bir sürede (yaklaşık 100 ms) yüklenmezse, her şey üzerinde gerçekten önemli hızlar için uygun olan tasarıma uygun olmayan tasarımla eşleşmeyebilecek temel yazı tipini kullanacak.

S2: Google Fonts CDN'ini kullanmaktan daha hızlı ev sahipliği yapan yazı tipi?
C: Her zaman değil, daha iyi "kontrol". Google yazı tipleri güçlü bir CDN'ye sahiptir ve tüm dünyaya yayılır. Yükü çok hızlı hale getirir, ancak web sitesinden gelen çağrı, hala Google sunucusuna DNS aramasını yapmak zorundayız. Kendine ev sahipliği bu adımı kesecek. Ancak kendi sunucunuzun hızlı olduğundan ve yeterince iyi bir önbellekleme olduğundan emin olmalısınız.

S3: Bir web sitesinde birkaç ağırlıktan fazla olmayan bir web yazı tipine sahip olmalı mı?
C: O kadar az o kadar iyi! Prensibe göre sadece 1-2 yazı tipi ailesini sınırlamaya çalışın (konular için 1, içerik için 1 gibi) ve yalnızca normal (400), Bold (700) gibi gerekli ağırlıkları seçin. Bir sayfada 5-6 yazı tipi kullanmak muazzam indirmeler oluşturur.

S4: Web'deki her yazı tipini önceden yüklemek gerekli mi?
C: Gerekli değil ve yapılmamalı! Ön yük, genellikle ana başlığın yazı tipi veya ekranın üst yarısında (katın üstünde) görüntülenen menü olan "önemli ve hemen kullanılması gereken" yazı tipleri için uygundur. Ön yük. Her şey tarayıcının çok çalışmasına neden olacak ve olumsuz bir etkisi olabilir.

İllüstrasyonlar istemi: Temiz ve anlaşılması kolay görünen soru simgesi cevap.

Özet: "Yazı Tipi" nin web sitenizin bir engeline izin vermeyin.

Hikayenin "yazı tipi yüklemesi" nin kullanıcı deneyimi, çekirdek web canlıları, SEO sıralaması üzerinde doğrudan bir etkisi olduğunu gördük ve en önemli şey, kullanıcılarının eksik veya yanıp sönme (Fout) sorunuyla karşılaşmasına izin veren işinizin "geliri" olduğunu gördük.

Ancak iyi haber, bu sorunu çözmek çok zor değil. `` Font-display: swap` kullanmak gibi basit tekniklerle başlayarak çok fazla fark yaratabilir. Ve maksimum verimliliğe ihtiyacınız varsa, kendi kendine barınma ve ön yük kazandırırsanız. Önemli yazı tipleri, web sitenizi rakiplerin üzerinde öne çıkacak şekilde yükseltmeye yardımcı olacaktır.

Bunu yapma zamanı! Yazı tipleri nedeniyle güzel web sitenizin kırılmasını beklemeyin. 10 dakika almaya çalışın. Web sitenizi PagePeed Insights ile kontrol edin ve bugün düzenlemeye başlayın. Bugünün yatırımı, gelecekte büyüme için istikrarlı bir temel oluşturmaktır!

Web sitenizin verimliliğini her boyutta artırmaya yardımcı olmak için kullanıcı deneyimi tasarımını (UX/UI) anlayan uzmanlara ihtiyacınız varsa Bugün Vision X Brain ekibine danışın! Web sitenize hızlı yardımcı olmaya ve muhteşem iş sonuçları yaratmaya hazırız.

İllüstrasyonlar istemi: Yazı tipi simgelerini gösteren grafikler, "Web sitenizin potansiyelinin kilidini aç!"

‍