Ön Uç Performans Kontrol Listesi 2021 – Smashing Magazine

0
11

Web yazı tipi teslimi optimize edilmiş mi?
Sormaya değer ilk soru, ilk başta UI sistem yazı tiplerini kullanmaktan kurtulup kaçamayacağımızdır – sadece çeşitli platformlarda doğru görünüp görünmediklerini iki kez kontrol etmemiz gerekiyor. Durum böyle değilse, sunduğumuz web yazı tiplerinin glifler ve kullanılmayan ekstra özellikler ve ağırlıklar içermesi ihtimali yüksektir. Tip dökümhanemizden web yazı tiplerini alt küme yapmasını isteyebiliriz veya açık kaynak yazı tiplerini kullanıyorsak, bunları Glyphhanger veya Fontsquirrel ile kendi başımıza alt küme haline getirebiliriz. En uygun web yazı tipi alt kümelerini oluşturmak için sayfanızı statik olarak analiz eden ve ardından bunları sayfalarımıza enjekte eden bir komut satırı aracı olan Peter Müller’in alt yazı tipiyle tüm iş akışımızı otomatik hale getirebiliriz.

WOFF2 desteği harika ve WOFF’u desteklemeyen tarayıcılar için yedek olarak kullanabiliriz – veya belki de eski tarayıcılara sistem yazı tipleri sunulabilir. Web yazı tipi yükleme için çok, çok, çok seçenek vardır ve Zach Leatherman’ın “Yazı Tipi Yükleme Stratejileri için Kapsamlı Kılavuz” stratejilerinden birini seçebiliriz (kod parçacıkları, Web yazı tipi yükleme tarifleri olarak da mevcuttur).

Muhtemelen bugün dikkate alınması gereken daha iyi seçenekler, ön yüklü Kritik FOFT ve “Uzlaşma” yöntemidir. Her ikisi de web fontlarını adım adım teslim etmek için iki aşamalı bir oluşturma kullanır – önce sayfayı web fontuyla hızlı ve doğru bir şekilde oluşturmak için gereken küçük bir üst alt küme ve ardından ailenin geri kalanını eşzamansız olarak yükleyin. Aradaki fark, “Uzlaşma” tekniğinin çoklu dolguyu yalnızca font yükleme etkinlikleri desteklenmiyorsa eşzamansız olarak yüklemesidir, bu nedenle varsayılan olarak çoklu dolguyu yüklemeniz gerekmez. Hızlı bir kazanmaya mı ihtiyacınız var? Zach Leatherman, yazı tiplerinizi sıraya koymak için 23 dakikalık hızlı bir eğitim ve örnek olay incelemesine sahiptir.

Genel olarak, fontları önceden yüklemek için önyükleme kaynağı ipucunu kullanmak iyi bir fikir olabilir, ancak işaretlemenize kritik CSS ve JavaScript bağlantısından sonra ipuçlarını ekleyin. Önyüklemeyle, bir öncelik bulmacası vardır, bu nedenle rel = “preload” öğelerini DOM’a harici engelleme komut dosyalarından hemen önce enjekte etmeyi düşünün. Andy Davies’e göre, “bir komut dosyası kullanılarak enjekte edilen kaynaklar, komut dosyası çalıştırılıncaya kadar tarayıcıdan gizlenir ve bu davranışı, tarayıcının ön yükleme ipucunu keşfetmesini geciktirmek için kullanabiliriz.” Aksi takdirde, yazı tipi yüklemesi size ilk oluşturma zamanında mal olur.

Her şey kritik olduğunda, hiçbir şey kritik değildir. her aileden yalnızca bir veya en fazla iki yazı tipini önceden yükleyin. (Resim kredisi: Zach Leatherman – slayt 93) (Büyük önizleme)

Seçici olmak ve en önemli dosyaları seçmek iyi bir fikirdir, örneğin, oluşturma için kritik olanlar veya görünür ve rahatsız edici metin yeniden akışlarından kaçınmanıza yardımcı olacaklar. Genel olarak, Zach her aileden bir veya iki yazı tipinin önceden yüklenmesini tavsiye eder – daha az kritiklerse bazı yazı tipi yüklemesini geciktirmek de mantıklıdır.

@ Font-face kuralında bir font-familyasını tanımlarken local () değerini (isme göre yerel bir fontu ifade eder) kullanmak oldukça yaygın hale geldi:

/ * Uyarı! İyi bir fikir değil! * / @ font-face {font-family: Open Sans; src: local (‘Open Sans-Regular’), local (‘OpenSans-Regular’), url (‘opensans.woff2’) format (‘woff2’), url (‘opensans.woff’) format (‘woff’); }

Fikir makul: Open Sans gibi bazı popüler açık kaynaklı fontlar, bazı sürücüler veya uygulamalarla önceden yüklenmiş olarak geliyor, bu nedenle font yerel olarak mevcutsa, tarayıcının web fontunu indirmesi gerekmez ve yerel fontu görüntüleyebilir. yazı tipi hemen. Bram Stein’ın belirttiği gibi, “yerel bir yazı tipi bir web yazı tipinin adıyla eşleşse de, büyük olasılıkla aynı yazı tipi değildir. Çoğu web yazı tipi” masaüstü “sürümünden farklıdır. Metin farklı şekilde oluşturulabilir, bazı karakterler düşebilir diğer yazı tiplerine dönerseniz, OpenType özellikleri tamamen eksik olabilir veya satır yüksekliği farklı olabilir. “

Ayrıca, yazı karakterleri zaman içinde geliştikçe, yerel olarak yüklenen sürüm, karakterlerin çok farklı göründüğü web yazı tipinden çok farklı olabilir. Bu nedenle, Bram’e göre, yerel olarak yüklenmiş yazı tiplerini ve web yazı tiplerini @ font-face kurallarında asla karıştırmamak daha iyidir. Google Yazı Tipleri, Roboto için Android istekleri dışında tüm kullanıcılar için CSS sonuçlarında local () ‘ı devre dışı bırakarak aynı şeyi yaptı.

Kimse içeriğin görüntülenmesini beklemekten hoşlanmaz. Yazı tipi görüntüleme CSS tanımlayıcısı ile, yazı tipi yükleme davranışını kontrol edebilir ve içeriğin hemen (yazı tipi görüntüleme ile: isteğe bağlı) veya hemen (3 saniyelik bir zaman aşımı ile, yazı tipi başarıyla indirildiği sürece) okunabilir olmasını sağlayabiliriz. font-display: takas). (Bundan biraz daha karmaşık.)

Ancak, metin yeniden akışlarının etkisini en aza indirmek istiyorsanız Yazı Tipi Yükleme API’sini kullanabiliriz (tüm modern tarayıcılarda desteklenir). Özellikle bu, her yazı tipi için bir FontFace nesnesi oluşturacağımız, ardından hepsini getirmeye çalışacağımız ve ancak o zaman sayfaya uyguladığımız anlamına gelir. Bu şekilde, tüm yazı tiplerini eşzamansız olarak yükleyerek tüm yeniden boyamaları gruplandırıyoruz ve ardından yedek yazı tiplerinden web yazı tipine tam olarak bir kez geçiyoruz. Zach’in 32: 15’ten başlayan açıklamasına ve kod pasajına bir göz atın):

/ * JavaScript kullanarak iki web fontu yükleyin * / / * Zach Leatherman: https://noti.st/zachleat/KNaZEg/the-five-whys-of-web-font-loading-performance#sWkN4u4 * / // Mevcut @ font-face blokları // İki tane oluştur let font = new FontFace (“Noto Serif”, / * … * /); let fontBold = new FontFace (“Noto Serif, / * … * /); // İki yazı tipi yükle let fonts = await Promise.all ([
font.load(),
fontBold.load()
]) // Yeniden boyar ve her iki fontu aynı anda işleyin! fonts.forEach (font => dokümanlar.fonts.add (font));

Adrian Bece, kullanımda olan Font Loading API ile fontların çok erken getirilmesini başlatmak için bölünemez bir boşluk nbsp eklemenizi önerir; gövdenin üst kısmına yerleştirin ve arya görünürlüğü ile görsel olarak gizleyin: gizli ve .hidden sınıfı:


Bu, farklı yükleme durumları için bildirilen farklı yazı tipi ailelerine sahip CSS ile birlikte gelir; değişiklik yazı tipleri başarıyla yüklendikten sonra Yazı Tipi Yükleme API’si tarafından tetiklenir:

gövde: değil (.wf-merriweather – yüklü): değil (.no-js) {font-family: [fallback-system-font]; / * Yedek yazı tipi stilleri * /} .wf-merriweather – yüklendi, .no-js {font-family: “[web-font-name]”; / * Web yazı tipi stilleri * /} / * Erişilebilir gizleme * / .hidden {konum: mutlak; taşma: gizli; klip: rect (0 0 0 0); yükseklik: 1px; genişlik: 1px; kenar boşluğu: -1px; dolgu : 0; sınır: 0;}

Tüm optimizasyonlarınıza rağmen neden merak ettiyseniz, Lighthouse yine de render engelleme kaynaklarını (yazı tiplerini) ortadan kaldırmanızı önerir, aynı makalede Adrian Bece, bir performans asenkron yazı tipi olan Gatsby Omni Font Loader ile birlikte Lighthouse’u mutlu etmek için birkaç teknik sunar. Gatsby için Flash Of Unstyled Text (FOUT) işleme eklentisi.

Şimdi, çoğumuz web yazı tiplerini yüklemek için bir CDN veya üçüncü taraf bir ana bilgisayar kullanıyor olabiliriz. Genel olarak, yapabiliyorsanız tüm statik varlıklarınızı kendi kendinize barındırmak her zaman daha iyidir, bu nedenle Google Yazı Tiplerini kendi kendine barındırmanın zahmetsiz bir yolu olan google-webfonts-helper’ı kullanmayı düşünün. Ve mümkün değilse, Google Yazı Tipi dosyalarına sayfanın kaynağı üzerinden proxy yapabilirsiniz.

Google’ın kutudan oldukça fazla iş çıkardığını belirtmekte fayda var, bu nedenle gecikmeleri önlemek için bir sunucuda biraz ince ayar yapılması gerekebilir (teşekkürler, Barry!)

Bu, özellikle Chrome v86’dan (Ekim 2020’de yayınlandı) beri, yazı tipleri gibi siteler arası kaynaklar, bölümlenmiş tarayıcı önbelleği nedeniyle artık aynı CDN’de paylaşılamayacağı için oldukça önemlidir. Bu davranış, Safari’de yıllardır bir varsayılandı.

Ancak hiç mümkün değilse, Harry Roberts’ın snippet’iyle mümkün olan en hızlı Google Yazı Tiplerine ulaşmanın bir yolu var:


Harry’nin stratejisi, önce yazı tiplerinin kaynağını önceden ısıtmaktır. Ardından, CSS dosyası için yüksek öncelikli, eşzamansız bir getirme başlatırız. Daha sonra, sayfaya ancak geldikten sonra (bir baskı stil sayfası hilesi ile) uygulanan düşük öncelikli, eşzamansız bir getirme başlatırız. Son olarak, JavaScript desteklenmiyorsa, orijinal yönteme geri dönüyoruz.

Ah, Google Yazı Tiplerinden bahsedersek: Google Yazı Tipleri isteklerinin boyutunun% 90’ına kadar, yalnızca ihtiyacınız olan karakterleri & metin ile bildirerek tıraş edebilirsiniz. Artı, yazı tipi görüntüleme desteği yakın zamanda Google Yazı Tiplerine de eklendi, böylece onu kutudan çıkarabiliriz.

Yine de hızlı bir uyarı. Font-display: isteğe bağlı kullanırsanız, web font isteğini erken tetikleyeceğinden (getirilmesi gereken diğer kritik yol kaynaklarınız varsa ağda tıkanıklığa neden olacağından) önyüklemeyi kullanmak da yetersiz olabilir. Daha hızlı çapraz kaynak yazı tipi istekleri için önceden bağlantı kullanın, ancak farklı bir kaynaktan gelen yazı tiplerini önceden yüklemek ağ çekişmesine neden olacağından ön yüklemede dikkatli olun. Tüm bu teknikler, Zach’in Web yazı tipi yükleme tariflerinde ele alınmıştır.

Öte yandan, kullanıcı erişilebilirlik tercihlerinde Hareketi Azalt özelliğini etkinleştirdiyse veya Veri Tasarrufu Modunu etkinleştirdiyse web yazı tiplerini (veya en azından ikinci aşama oluşturmayı) devre dışı bırakmak iyi bir fikir olabilir (bkz.Veri Tasarrufu Başlığı) veya kullanıcının bağlantısı yavaş olduğunda (Network Information API aracılığıyla).

Kullanıcı veri kaydetme modunu seçtiyse (başka kullanım durumları da vardır) font bildirimlerini tanımlamamak için tercih edilen azaltılmış veri CSS medya sorgusunu da kullanabiliriz. Müşteri İpucu HTTP uzantısındaki Save-Data istek başlığı CSS ile kullanıma izin vermek için açık / kapalı ise medya sorgusu temelde ortaya çıkar. Şu anda yalnızca Chrome ve Edge’de bir bayrak arkasında desteklenmektedir.

Metrikler? Web yazı tipi yükleme performansını ölçmek için, Tüm Metin Görünür ölçüsünü (tüm yazı tiplerinin yüklendiği ve tüm içeriğin web yazı tiplerinde görüntülendiği an), Gerçek İtalik Zamanı ve ilk işlemeden sonra Web Yazı Tipi Yeniden Akım Sayısını göz önünde bulundurun. Açıktır ki, her iki ölçüm de ne kadar düşükse, performans o kadar iyi olur.

Değişken yazı tiplerinden ne haber diye sorabilirsiniz? Değişken yazı tiplerinin önemli bir performans değerlendirmesi gerektirebileceğine dikkat etmek önemlidir. Tipografik seçimler için bize çok daha geniş bir tasarım alanı sağlarlar, ancak bir dizi bireysel dosya talebinin aksine tek bir seri talebin maliyetiyle gelir.

Değişken yazı tipleri, yazı tipi dosyalarının toplam birleşik dosya boyutunu önemli ölçüde azaltırken, bu tek istek yavaş olabilir ve bir sayfadaki tüm içeriğin oluşturulmasını engelleyebilir. Bu nedenle, yazı tipini alt küme yapmak ve karakter kümelerine bölmek hala önemlidir. İyi tarafı, değişken bir yazı tipiyle, varsayılan olarak tam olarak bir yeniden düzenleme elde edeceğiz, bu nedenle yeniden boyamaları gruplandırmak için JavaScript gerekmez.

Peki, o halde kurşun geçirmez bir web yazı tipi yükleme stratejisi ne olur? Yazı tiplerini alt küme haline getirin ve 2 aşamalı oluşturma için hazırlayın, bunları bir yazı tipi görüntüleme tanımlayıcısı ile bildirin, yeniden boyamaları gruplamak ve yazı tiplerini kalıcı bir hizmet çalışanının önbelleğinde saklamak için Yazı Tipi Yükleme API’sini kullanın. İlk ziyarette, harici komut dosyalarını engellemeden hemen önce komut dosyalarının önceden yüklenmesini enjekte edin. Gerekirse Bram Stein’ın Font Face Observer’ına geri dönebilirsiniz. Font yükleme performansını ölçmekle ilgileniyorsanız, Andreas Marschke, Font API ve UserTiming API ile performans izlemeyi araştırıyor.

Son olarak, büyük bir yazı tipini daha küçük dile özgü yazı tiplerine ayırmak için unicode aralığını eklemeyi unutmayın ve geri dönüş ile metin arasındaki boyut tutarsızlıkları nedeniyle düzendeki sarsıcı bir kaymayı en aza indirmek için Monica Dinculescu’nun yazı tipi stili eşleştiricisini kullanın. web yazı tipleri.

Alternatif olarak, bir yedek yazı tipi için bir web yazı tipini taklit etmek için yazı tipi ölçümlerini geçersiz kılmak için @ font-face tanımlayıcıları kullanabiliriz (demo, Chrome 87’de etkinleştirilmiştir). (Ancak, ayarlamaların karmaşık yazı tipi yığınlarında karmaşık olduğunu unutmayın.)

Gelecek parlak görünüyor mu? Aşamalı yazı tipi zenginleştirme ile, sonunda “herhangi bir sayfadaki yazı tipinin yalnızca gerekli kısmını indirebiliriz ve bu yazı tipine yönelik sonraki istekler için, orijinal indirmeyi, ardışık sayfada gerektiği gibi ek glif kümeleriyle dinamik bir şekilde” yama “haline getirebiliriz. “, Jason Pamental’ın açıkladığı gibi. Artımlı Aktarım Demosu zaten mevcut ve devam ediyor.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz