Kurangi pekerjaan font yang diminta tiap rute
Inventarisasi permintaan font saat cache dingin pada beranda, halaman konversi, tampilan masuk, dan template dengan sistem desain berbeda. Catat keluarga, bobot, gaya, berkas, asal, ukuran transfer, dan selector. Aturan @font-face yang dideklarasikan tidak otomatis memicu unduhan; browser biasanya mengambil face ketika layout saat ini menggunakannya. Itu membuat bobot dan gaya global yang tidak terpakai layak dihapus terlebih dahulu.
Gunakan tipografi kustom di tempat yang benar-benar membawa nilai merek, seringkali pada judul display, dan pertimbangkan stack sistem untuk teks badan ketika desain mengizinkan. Jangan anggap font variabel selalu lebih kecil: ia bisa menggantikan beberapa berkas statis tapi dapat lebih besar daripada satu face statis. Bandingkan aset terkompresi yang benar-benar diminta oleh rute.
Hapus keluarga, bobot, italic, dan font ikon yang tidak memiliki penggunaan tingkat-rute yang telah diuji.
Periksa bahwa lisensi mengizinkan pengiriman web, subsetting, dan self-hosting sebelum mengubah build.
Gunakan WOFF2 dan subset tanpa menghilangkan karakter yang diperlukan
Mulailah dengan WOFF2 sebagai baseline untuk browser modern. Recommendation W3C menjelaskan WOFF2 sebagai paket web-font yang dirancang untuk kompresi lebih baik dan dekompresi cepat, dan telah diimplementasikan di browser utama. Pertahankan format lain hanya untuk kebutuhan browser-legacy yang terdokumentasi; selain itu fallback yang dirancang baik adalah jalur kompatibilitas yang lebih aman.
Subsetting membuat berkas lebih kecil yang berisi glyph atau bentuk karakter terpilih. unicode-range dapat mengaitkan subset ke rentang karakter sehingga browser memilih berkas yang relevan saat mencocokkan teks. Bangun subset dari halaman nyata dan bahasa yang Anda dukung, termasuk tanda baca, mata uang, nama, teks hukum, dan skrip yang dimasukkan pengguna. Glyph yang hilang adalah masalah ketepatan, bukan penghematan byte yang dapat diterima.
Uji halaman terlokalisasi yang representatif dan input formulir, bukan hanya contoh desain berbahasa Inggris.
Pastikan unicode-range tiap subset dan rentang weight/style cocok dengan berkas yang dideploy.
Rancang fallback dan kebijakan font-display bersama-sama
Font fallback adalah yang dilihat pengguna ketika face kustom belum siap. Pilih untuk proporsi yang mirip, lalu bandingkan judul nyata, tombol multilini, navigasi, tabel, formulir, dan string terlokalisasi yang panjang. Lebar yang berbeda mengubah pembungkusan; ascent, descent, atau line-gap yang berbeda mengubah tinggi blok. Keduanya dapat memindahkan konten yang sudah terlihat di halaman.
font-display menentukan perilaku rendering saat face tidak tersedia. optional memiliki periode block yang sangat kecil dan tanpa periode swap, sehingga cocok untuk teks badan ketika fallback yang stabil lebih diutamakan pada kunjungan pertama. swap menampilkan fallback segera dan kemudian bisa menerapkan web font, tetapi gunakan hanya di tempat penggantian yang terlambat tidak menyebabkan reflow yang mengganggu. Block atau fallback harus digunakan karena alasan desain yang diuji, bukan sebagai nilai default global. CSS size-adjust dapat membantu menyetel metrik fallback, tetapi verifikasi secara visual tiap skrip dan viewport yang didukung.
Jangan jadikan teks pembayaran, pemulihan, akun, keselamatan, atau navigasi bergantung pada font kustom yang terlambat.
Huruf fallback dapat menyampaikan makna yang salah; ikon SVG umumnya lebih aman untuk simbol antarmuka.
Perbaiki penemuan, tapi batasi preload dan nilai aliran data
Face yang dideklarasikan hanya dalam stylesheet eksternal mungkin ditemukan setelah stylesheet tersebut diunduh dan diurai. CSS kritis awal yang mudah dipelihara dapat mengekspos deklarasi yang diperlukan lebih cepat; jangan inline biner font, yang memperbesar dokumen. Untuk origin pihak ketiga, preconnect dapat membuka koneksi lebih awal. Permintaan font adalah sumber daya CORS, jadi pengiriman lintas-origin dan preload memerlukan penanganan crossorigin yang benar.
Preload adalah override prioritas, bukan sakelar kecepatan menyeluruh. Itu bisa bersaing dengan pekerjaan kritis lain dan dapat mengunduh face yang tidak dibutuhkan rute; ia juga melewati pemilihan unicode-range. Perbaiki penemuan yang terlambat dulu, lalu preload paling banyak satu berkas first-view yang terbukti menggunakan URL tepat, as=font, dan crossorigin. Google Fonts menyatakan permintaan API menyertakan alamat IP pengunjung, URL yang diminta, header HTTP, dan referer; ia juga menyatakan API-nya tidak mengatur atau mencatat cookie dan tidak menggunakan informasi yang dikumpulkan untuk profil atau iklan tertarget. Self-hosting menghentikan Google menerima data untuk pemuatan tersebut. Evaluasi pengiriman, pemberitahuan privasi, yurisdiksi, kontrak, dan nasihat yang memenuhi syarat bila perlu.
Bandingkan jejak (trace) cache-dingin dan pastikan berkas yang dipreload dikonsumsi pada rute tersebut.
Pertimbangkan setup koneksi, kemampuan cache dan CDN, pemeliharaan aset, dan aliran data pengunjung.
Versi aset font dan pertahankan konfigurasi CSS fallback yang telah diuji.
Uji perilaku render dan jalankan font sebagai dependensi ketangguhan
Dengan cache dingin, gunakan alat jaringan browser untuk memeriksa rantai permintaan CSS-ke-font, timing, origin, caching, dan kegagalan. Ulangi pada koneksi terbatas, lalu throttle atau blok font. Keberhasilan berarti teks terbaca, kontrol dapat digunakan, simbol akurat, dan layout koheren sebelum face kustom muncul. Uji layout sempit dan desktop yang realistis, string panjang, kesalahan, teks persetujuan, harga, dan setiap skrip yang didukung.
Di Chromium, rekam reload di panel Performance dan periksa track Layout Shifts; DevTools dapat mengidentifikasi elemen yang bergerak dan menganimasikan shift tersebut. Pemanggilan font adalah penyebab yang dikenal, tetapi elemen yang bergerak tidak selalu akar masalah, jadi korelasikan trace dengan penerapan font. Layout Instability API bersifat Chromium-only, yang membuat pemeriksaan visual lintas-browser menjadi penting. Sertakan aset font, perilaku CORS, kebijakan cache, fallback, dan rollback dalam tinjauan rilis. Mode degradasi yang dimaksud adalah teks yang terbaca, bukan konten kosong atau navigasi rusak.
Cache hangat dapat menyembunyikan permintaan awal dan masalah rendering.
Ulangi pemeriksaan ketika berkas, copy CMS, template, penyedia, atau aturan CDN berubah.