Mengoptimalkan (mengurangi) permintaan font web

8

Halaman muka saya saat ini menggunakan 5 font web - Saya menginginkannya menjadi 6 karena dukungan yang buruk untuk Helvetica Neue. Salah satu font adalah ikon 'FontAwesome', 4 lainnya hanya digunakan untuk satu atau dua kata (yaitu saya memiliki judul yang bertuliskan "Optimasi" ditulis dalam huruf yang terlihat seperti komputer lama).

2 font ini tersedia melalui Google dan saya hanya meminta surat-surat yang diperlukan (dan itu bekerja dengan baik). Namun, 2 lainnya berasal dari openfontlibrary.org, dan hanya tersedia dalam satu format. Yang bukan masalah besar (toh saya akan membutuhkannya dengan aman sehingga salinan lokal lebih baik), quickie dengan generator font-face @ Fontsquirrel.com dan saya memilikinya dalam berbagai format, dan CSS untuk boot.

Dan kemudian saya menguji waktu buka halaman saya ... ugh. Saya menganggap mungkin bagi saya untuk menyalin salinan lokal saya, ada yang punya pengalaman di bidang ini?

optimization fonts adam-asdf
sumber

Jawaban:

3

Menggunakan font web non-standar memiliki dampak kinerja yang signifikan pada waktu pemuatan halaman dibandingkan dengan hanya menggunakan font sistem aman web. Ini adalah masalahnya terlepas dari apakah Anda menggunakan JavaScript atau @ font-face .

Orang harus selalu dengan hati-hati menganalisis apakah font web non-standar harus digunakan.

Beberapa pertanyaan untuk diri Anda sendiri ketika mempertimbangkan untuk menggunakan font web non-standar:

  • Apakah Anda menggunakannya hanya untuk menunjukkan bahwa Anda bisa dan tahu caranya?
  • Apakah server bertujuan untuk mengeksekusi desain yang lebih baik dan memberikan pengalaman pengguna yang lebih baik?
  • Apakah metode yang digunakan untuk mengimplementasikan font-browser yang kompatibel?
  • Bisakah gambar mencukupi, terutama jika hanya beberapa kata pada satu halaman atau hanya beberapa halaman?
  • Apakah font tersebut cukup berbeda dari font yang aman untuk web sehingga layak digunakan sementara?
  • Jika font digunakan sebagai teks isi, apakah mudah dibaca, atau font dirancang untuk header?

Pastikan Anda setidaknya memahami dasar - dasar tipografi dan bagaimana hal itu berdampak pada desain Anda, dan gunakan itu untuk keuntungan Anda.

tacotuesday
sumber
Terima kasih atas jawaban terinci tetapi saya akan mengakui sedikit frustrasi dengan jawaban sejauh ini. Saya menyadari itu memengaruhi waktu muat; Saya tahu tentang tipografi dan font yang aman untuk web. Saya menyadari bahwa saya dapat menggunakan gambar (atau sprite gambar) dan teks alternatif. Namun, itu adalah pilihan terakhir bagi saya. Saya bisa menggunakan font stack yang sangat aman tapi itu mengalahkan tujuan memiliki font web (dan bahkan pengganti memerlukan koneksi HTTP). Kemudian Anda masuk ke SEO, masalah aksesibilitas penyesuaian ukuran font, terjemahan, pengaturan untuk tunanetra, dll. Jika masuk akal , saya lebih suka mengoptimalkan font web saya.
adam-asdf
Jika Anda telah membaca artikel pertama yang saya tautkan, Anda akan menemukan informasi tentang cara-cara untuk meningkatkan waktu pemuatan halaman saat menggunakan font web non-standar.
tacotuesday
Maaf, kewalahan oleh jumlah tautan, saya akan melakukannya sekarang.
adam-asdf
Anda benar, maaf atas ketidaksabaran saya (ini sebenarnya adalah tautan kedua yang diberikannya). Detail hosting-sendiri, TypeKit, Google, font-squirrel (entah bagaimana saya rindu memikirkan mencoba opsi lanjutan dari generator font-@), dan bahkan analisis metode yang berbeda di browser yang berbeda. Bagi mereka yang datang di ujung jalan ini, itu menjawab semua pertanyaan saya.
adam-asdf
Terima kasih telah memberi tahu saya bahwa itu adalah tautan kedua. Saya mencampuradukkannya di pos. Sudah diperbaiki sekarang, jadi itu adalah tautan pertama. Anda juga mungkin ingin melihat Cufon dan sIFR, jika Anda belum melakukannya. Juga, banyak jawaban saya dimaksudkan untuk pembaca masa depan, sehingga mereka berpikir sedikit sebelum mengikuti kerumunan dalam hal menggunakan font web.
tacotuesday
6

4 lainnya hanya digunakan untuk satu atau dua kata

Apakah itu pernyataan literal?
Jika demikian, mengapa Anda repot-repot menanamkan font ini sama sekali, menjadi himpunan bagian atau tidak? Anda seharusnya tidak mengoptimalkan dalam hal ini, hanya menghapus . Buat gambar dari teks yang Anda butuhkan dan gunakan teknik penggantian teks favorit Anda. Anda menambahkan permintaan HTTP dan mengunduh waktu ke situs Anda demi beberapa kata .

Su '
sumber
Itu telah terpikir oleh saya, saya hanya merasa seolah-olah saya mengatakan saya dapat kode dengan beberapa font web CSS3 dan desain responsif melalui permintaan media mungkin bijaksana.
adam-asdf
Saya perhatikan Anda sangat menghormati komunitas ini (dan pengalaman praktis yang tampak). Apa yang saya lihat? Saya tahu permintaan http membutuhkan waktu, tetapi beri saya sesuatu untuk membuat keputusan ... apakah kita berbicara 2 detik atau 2 mikrodetik? Saya praktis tetapi memiliki latar belakang dalam desain saya berorientasi estetika. Tolong beri saya cara untuk membuat keputusan.
adam-asdf
1
@ Su 'sepenuhnya benar. Setiap situs berbeda sejauh HTTPRequests, semuanya benar-benar tergantung pada rute antara klien dan server Anda. Seseorang yang menggunakan Dial-up (masih) atau koneksi satelit akan mengalami waktu muat yang lebih lama daripada seseorang di DSL atau T1. Estetika yang baik sangat penting, tetapi struktur dan optimalisasi yang baik sama pentingnya. Meminimalkan margin waktu muat adalah praktik yang umum, sehingga membatasi jumlah HTTPRequests ke situs Anda. Membuat gambar kata-kata akan mengurangi waktu buka dan pengguna Anda tidak akan tahu apa-apa. Lihatlah ke dalam CSS Sprite juga.
Christopher
@Christopher Saya senang Anda menyebutkan sprite, saya rasa Anda bisa mengatakan saya sedang mencari cara untuk membuat versi sprite kustom yang tersedia secara lokal di webfonts.
adam-asdf
@ user1332729 Mudah, lakukan seperti yang disarankan Su '(Buat gambar kata-kata) dan terapkan prinsip CSS Sprite untuknya. Bang, ada yang dioptimalkan yang benar-benar bisa Anda dapatkan tanpa melalui format gambar. Apa yang Anda maksud tersedia secara lokal? Untuk Anda atau klien Anda?
Christopher
2

Untuk menindaklanjutinya, saya akhirnya menggunakan opsi lanjutan dari generator font-@ untuk subset font saya, jadi saya hanya memuat karakter yang diperlukan.

Salah satu opsi adalah untuk Base64 menyandikan font (yang memungkinkan saya untuk menanamkannya dalam file CSS saya). Jika memori berfungsi, itu Base64 mengkodekan .woffdan .ttffont.

Meskipun saya ingin mendukung sebanyak mungkin pengguna dari sebanyak mungkin browser, saya memutuskan bahwa tidak ada gunanya memperlambat pengguna browser modern dengan data ekstra, yang mungkin berlebihan, jadi saya menggunakan Modernizr (yang menggunakan yep / nope.js) untuk asynchronous memuat CSSfile terpisah dengan referensi ke semua format font sesuai dengan sintaks font font tahan peluru .

Saya bolak-balik di antara Base64 yang menyandikan .wofffont dan memasukkan seluruh deklarasi font di CSSfile primer atau hanya menyertakan Base64 yang .woffdi- encode di dalam primary CSSdan kemudian memasukkan format lain dalam CSSfile yang saya muat secara sinkron melalui Modernizr.load.

Saya lebih suka waktu muat yang cepat daripada estetika sehingga FOUC bukan masalah besar tapi saya akan perhatikan bahwa sebagian besar browser 'berkedip' pada font ketika mereka dimuat (yang setelah font yang disandikan Base64 di CSStelah dimuat) async.

Di sisi positifnya, setelah font dimuat dan disimpan dalam cache (tajuk kedaluwarsa yang lama diatur di server) 'blink' dihilangkan dan saya dapat memuat set font yang diperluas sehingga pengguna yang berbicara bahasa lain (dan menggunakan Google translate widget yang disertakan) masih akan melihat teks bergaya.

Karena ini adalah situs saya sendiri, saya dapat bereksperimen tetapi sebagian besar melakukannya untuk "pamer", saya lebih konservatif dengan situs klien.

Teknik lain yang saya terapkan adalah meletakkan semua .svgfont ke dalam satu file dan mengidentifikasi masing-masing dengan ID sendiri daripada memiliki masing-masing dalam file yang terpisah sebagai penghasil @ font-face.

adam-asdf
sumber