Praktik terbaik untuk font
Optimalkan font web untuk Core Web Vitals.
Artikel ini membahas praktik terbaik kinerja untuk font. Ada berbagai cara font web memengaruhi kinerja:
- Render teks tertunda: Jika font web belum dimuat, browser biasanya menunda rendering teks. Dalam banyak situasi, penundaan ini Cat Contentful Pertama (FCP). Dalam beberapa situasi, penundaan ini Cat Contentful Terbesar (LCP).
- Pergeseran tata letak: Praktik pertukaran font berpotensi untuk menyebabkan pergeseran tata letak. Pergeseran tata letak ini terjadi ketika font web dan font cadangannya menggunakan jumlah ruang yang berbeda pada halaman.
Artikel ini dipecah menjadi tiga bagian: pemuatan font, pengiriman font, dan rendering font. Setiap bagian menjelaskan bagaimana aspek tertentu dari siklus hidup font bekerja dan memberikan praktik terbaik yang sesuai.
Pemuatan font #
Sebelum menyelami praktik terbaik untuk memuat font, penting untuk memahami caranya @font-wajah bekerja dan bagaimana ini memengaruhi pemuatan font.
NS @font-wajah deklarasi adalah bagian penting dari bekerja dengan font web apa pun. Minimal, itu menyatakan nama yang akan digunakan untuk merujuk ke font dan menunjukkan lokasi file font yang sesuai.
@font-wajah {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}Kesalahpahaman yang umum adalah bahwa font diminta ketika a @font-wajah deklarasi ditemui—ini tidak benar. Dengan sendirinya, @font-wajah deklarasi tidak memicu unduhan font. Sebaliknya, font diunduh hanya jika direferensikan oleh gaya yang digunakan pada halaman. Misalnya seperti ini:
@font-wajah {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}h1 {
font-family: "Open Sans"
}
Dengan kata lain, dalam contoh di atas, Buka Sans hanya akan diunduh jika halaman berisi
elemen.
Jadi, ketika berpikir tentang pengoptimalan font, penting untuk memberikan stylesheet sebanyak pertimbangan seperti file font itu sendiri. Mengubah konten atau pengiriman stylesheet dapat berdampak signifikan pada saat font tiba. Demikian pula, menghapus CSS yang tidak digunakan dan memisahkan stylesheet dapat mengurangi jumlah font yang dimuat oleh halaman.
Praktik terbaik #
Font biasanya merupakan sumber daya yang penting, karena tanpa font, pengguna mungkin tidak dapat melihat konten halaman. Dengan demikian, praktik terbaik untuk pemuatan font umumnya berfokus pada memastikan bahwa font dimuat sedini mungkin. Perhatian khusus harus diberikan pada font yang dimuat dari situs pihak ketiga karena mengunduh file font ini memerlukan pengaturan koneksi terpisah.
Jika Anda tidak yakin apakah font halaman Anda diminta tepat waktu, periksa Waktu tab di dalam Jaringan panel di Chrome DevTools untuk informasi selengkapnya.
Deklarasi font sebaris #
Sebagian besar situs akan sangat diuntungkan dari deklarasi font sebaris dan gaya kritis lainnya di dokumen utama daripada memasukkannya ke dalam stylesheet eksternal. Ini memungkinkan browser untuk menemukan deklarasi font lebih cepat karena browser tidak perlu menunggu stylesheet eksternal untuk diunduh.
head>
style>
@font-wajah {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}body {
font-family: "Open Sans";
}
style>
head>
Menyisipkan file font itu sendiri tidak disarankan. Menyejajarkan sumber daya besar seperti font kemungkinan akan menunda pengiriman dokumen utama, dan dengan itu, penemuan sumber daya lainnya.
Prakoneksi ke asal pihak ketiga yang penting #
Jika situs Anda memuat font dari situs pihak ketiga, sangat disarankan agar Anda menggunakan prakoneksi petunjuk sumber daya untuk membangun koneksi awal dengan asal pihak ketiga. Petunjuk sumber daya harus ditempatkan di dari dokumen. Petunjuk sumber daya di bawah ini menyiapkan koneksi untuk memuat lembar gaya font.
head>
link rel="preconnect" href="https://fonts.com">
head>Untuk menghubungkan terlebih dahulu koneksi yang digunakan untuk mengunduh file font, tambahkan file terpisah prakoneksi petunjuk sumber daya yang menggunakan lintas asal atribut. Tidak seperti stylesheet, file font harus dikirim melalui a koneksi CORS.
head>
link rel="preconnect" href="https://fonts.com">
link rel="preconnect" href="https://fonts.com" crossorigin>
head>Saat menggunakan prakoneksi petunjuk sumber daya, perlu diingat bahwa penyedia font dapat menyajikan lembar gaya dan font dari asal yang terpisah. Misalnya, begini caranya prakoneksi petunjuk sumber daya akan digunakan untuk Google Font.
head>
link rel="preconnect" href="https://fonts.googleapis.com">
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
head>Google Font menyediakan opsi untuk memuat font melalui tag atau @impor penyataan. NS cuplikan kode termasuk a prakoneksi petunjuk sumber daya dan karena itu kemungkinan akan menghasilkan pengiriman stylesheet yang lebih cepat daripada menggunakan @impor Versi: kapan. Ini tag harus ditempatkan sedini mungkin dalam dokumen.
Hindari menggunakan pramuat untuk memuat font #
Secara umum, menggunakan pramuat petunjuk sumber daya untuk memuat font harus dihindari. Meskipun pramuat sangat efektif untuk membuat font dapat ditemukan di awal proses pemuatan halaman, hal ini menyebabkan hilangnya sumber daya browser dari pemuatan sumber daya lainnya.
Dalam kebanyakan skenario, membuat deklarasi font dan menyesuaikan stylesheet adalah pendekatan yang lebih efektif. Penyesuaian ini lebih dekat untuk mengatasi akar penyebab font yang terlambat ditemukan – daripada hanya memberikan solusi.
Selain itu, menggunakan pramuat sebagai strategi pemuatan font juga harus digunakan dengan hati-hati karena melewati beberapa strategi negosiasi konten bawaan browser. Sebagai contoh, pramuat mengabaikan unicode-range deklarasi, dan jika digunakan dengan hati-hati, hanya boleh digunakan untuk memuat format font tunggal.
Pengiriman font #
Pengiriman font yang lebih cepat menghasilkan rendering teks yang lebih cepat. Selain itu, jika font dikirimkan cukup awal, ini dapat membantu menghilangkan pergeseran tata letak akibat pertukaran font.
Praktik terbaik #
Menggunakan font yang dihosting sendiri #
Di atas kertas, menggunakan font yang dihosting sendiri akan memberikan kinerja yang lebih baik karena menghilangkan pengaturan koneksi pihak ketiga. Namun, dalam praktiknya, perbedaan kinerja antara kedua opsi ini kurang jelas: misalnya, Web Almanak menemukan bahwa situs yang menggunakan font pihak ketiga memiliki render yang lebih cepat daripada font yang menggunakan font pihak pertama.
Jika Anda mempertimbangkan untuk menggunakan font yang dihosting sendiri, konfirmasikan bahwa situs Anda menggunakan a Jaringan Pengiriman Konten (CDN) dan HTTP/2. Tanpa menggunakan teknologi ini, kecil kemungkinan font yang dihosting sendiri akan memberikan kinerja yang lebih baik. Untuk informasi lebih lanjut, lihat Jaringan Pengiriman Konten.
Jika Anda tidak yakin apakah menggunakan font yang dihosting sendiri akan memberikan kinerja yang lebih baik, coba sajikan file font dari server Anda sendiri dan bandingkan waktu transfer (termasuk penyiapan koneksi) dengan font pihak ketiga. Jika Anda memiliki server yang lambat, tidak menggunakan CDN, atau tidak menggunakan HTTP/2, kemungkinan kecil font yang di-hosting sendiri akan lebih berkinerja.
Jika Anda menggunakan font yang dihosting sendiri, sebaiknya Anda juga menerapkan beberapa pengoptimalan file font yang biasanya disediakan oleh penyedia font pihak ketiga secara otomatis—misalnya, subpengaturan font dan kompresi WOFF2. Jumlah upaya yang diperlukan untuk menerapkan pengoptimalan ini akan sedikit bergantung pada bahasa yang didukung situs Anda. Secara khusus, perhatikan bahwa mengoptimalkan font untuk bahasa CJK bisa sangat menantang.
Rentang unicode dan subpengaturan font: @font-wajah sering digunakan bersama dengan unicode-range deskriptor. unicode-range menginformasikan browser karakter mana yang dapat digunakan untuk font.
@font-wajah {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
unicode-range: U+0025-00FF;
}File font akan diunduh jika halaman berisi satu atau lebih karakter yang cocok dengan rentang unicode. unicode-range biasanya digunakan untuk menyajikan file font yang berbeda tergantung pada bahasa yang digunakan oleh konten halaman.
unicode-range sering digunakan bersama dengan teknik subsetting. Sebuah font subset mencakup sebagian kecil dari mesin terbang (yaitu, karakter) yang terkandung dalam file font asli. Misalnya, daripada menyajikan semua karakter ke semua pengguna, situs mungkin menghasilkan subset font terpisah untuk karakter Latin dan Sirilik. Jumlah glyph per font sangat bervariasi: font Latin biasanya berukuran 100 hingga 1000 glyph per font; CJK font mungkin memiliki lebih dari 10.000 karakter. Menghapus mesin terbang yang tidak digunakan dapat secara signifikan mengurangi ukuran file font.
Alat untuk menghasilkan subset font termasuk subfont dan mesin terbang.
Untuk informasi tentang bagaimana Google Font mengimplementasikan subsetting font, lihat ini presentasi. Untuk subset Google Fonts API, lihat ini repo.
WOFF2: Dari font font modern, WOFF2 adalah yang terbaru, memiliki dukungan browser terluas, dan menawarkan kompresi terbaik. Karena menggunakan Brotli, WOFF2 mengompres 30% lebih baik daripada WOFF.
Gunakan lebih sedikit font web #
Font tercepat untuk dikirim adalah font yang tidak diminta sejak awal. Font sistem dan font variabel adalah dua cara yang berpotensi mengurangi jumlah font web yang digunakan di situs Anda.
SEBUAH font sistem adalah font default yang digunakan oleh antarmuka pengguna perangkat pengguna. Font sistem biasanya bervariasi menurut sistem operasi dan versi. Karena font sudah terpasang, font tidak perlu diunduh. Font sistem dapat bekerja sangat baik untuk teks isi.
Untuk menggunakan font sistem di CSS Anda, daftar sistem-ui sebagai font-family:
font-family: sistem-uiIde di balik font variabel adalah bahwa satu variabel font dapat digunakan sebagai pengganti beberapa file font. Font variabel bekerja dengan mendefinisikan gaya font "default" dan menyediakan "kapak" untuk memanipulasi font. Misalnya, font variabel dengan Berat axis dapat digunakan untuk menerapkan huruf yang sebelumnya memerlukan font terpisah untuk terang, teratur, tebal, dan ekstra tebal.
Kami sering menyebut "Times New Roman" dan "Helvetica" sebagai font. Namun, secara teknis, ini adalah font keluarga. Sebuah keluarga terdiri dari gaya, yang merupakan variasi tertentu dari jenis huruf (misalnya, ringan, sedang, atau miring tebal). File font berisi satu gaya kecuali jika itu adalah font variabel. Jenis huruf adalah desain yang mendasarinya, yang dapat dinyatakan sebagai font digital – dan dalam tipe fisik, seperti balok kayu berukir atau logam.
Tidak semua orang akan mendapat manfaat dari beralih ke font variabel. Font variabel berisi banyak gaya, jadi biasanya memiliki ukuran file yang lebih besar daripada font non-variabel individual yang hanya berisi satu gaya. Situs yang akan melihat peningkatan terbesar dari penggunaan font variabel adalah situs yang menggunakan (dan perlu menggunakan) berbagai gaya dan bobot font.
Render font #
Ketika dihadapkan dengan font web yang belum dimuat, browser dihadapkan pada dilema: haruskah menunda rendering teks hingga font web tiba? Atau haruskah itu membuat teks dalam font fallback sampai font web tiba?
Peramban yang berbeda menangani skenario ini secara berbeda. Secara default, browser berbasis Chromium dan Firefox akan memblokir rendering teks hingga 3 detik jika font web terkait belum dimuat; Safari akan memblokir rendering teks tanpa batas.
Perilaku ini dapat dikonfigurasi dengan menggunakan tampilan font atribut. Pilihan ini dapat memiliki implikasi yang signifikan: tampilan font memiliki potensi untuk memengaruhi LCP, FCP, dan stabilitas tata letak.
Praktik terbaik #
Pilih yang sesuai tampilan font strategi #
tampilan font menginformasikan browser bagaimana seharusnya melanjutkan rendering teks ketika font web terkait belum dimuat. Ini didefinisikan per font-face.
@font-wajah {
font-family: Roboto, Sans-Serif
src: url(/fonts/roboto.woff) format('woff'),
tampilan font: swap;
}Ada lima kemungkinan nilai untuk tampilan font:
| Nilai | Periode blok | Periode pertukaran |
| Mobil | Bervariasi menurut browser | Bervariasi menurut browser |
| Memblokir | 3 detik | Tak terbatas |
| Menukar | 0ms | Tak terbatas |
| mundur | 100ms | 3 detik |
| Pilihan | 100ms | Tidak ada |
- Periode blok: Periode pemblokiran dimulai saat browser meminta font web. Selama periode pemblokiran, jika font web tidak tersedia, font akan dirender dalam format tak terlihat font fallback dan dengan demikian teks tidak akan terlihat oleh pengguna. Jika font tidak tersedia pada akhir periode pemblokiran, font akan ditampilkan dalam font fallback.
- Periode pertukaran: Periode swap datang setelah periode blok. Jika font web tersedia selama periode swap, font tersebut akan "ditukar".
Rekomendasi #
tampilan font strategi mencerminkan sudut pandang yang berbeda tentang tradeoff antara kinerja dan estetika. Untuk sebagian besar situs, berikut adalah dua strategi yang paling dapat diterapkan:
-
Jika kinerja adalah prioritas utama: Menggunakan
tampilan font: opsional. Ini adalah pendekatan yang paling "berperforma": render teks tertunda tidak lebih dari 100 md dan ada jaminan bahwa tidak akan ada pergeseran tata letak terkait pertukaran font. -
Jika menampilkan teks dalam font web adalah prioritas utama: Menggunakan
tampilan font: swaptetapi pastikan untuk mengirimkan font cukup awal sehingga tidak menyebabkan pergeseran tata letak.
tampilan font: otomatis, tampilan font: blok, tampilan font: swap, dan tampilan font: mundur semua berpotensi menyebabkan pergeseran tata letak saat font ditukar. Namun, dari pendekatan-pendekatan tersebut, tampilan font: swap akan menunda render teks paling sedikit. Jadi, ini adalah pendekatan yang lebih disukai untuk situasi di mana penting bahwa teks pada akhirnya akan dirender sebagai font web.
Juga perlu diingat bahwa kedua pendekatan ini dapat digabungkan: misalnya, gunakan tampilan font: swap untuk branding dan elemen halaman lain yang berbeda secara visual; menggunakan tampilan font: opsional untuk font yang digunakan dalam teks isi.
NS tampilan font strategi yang bekerja dengan baik untuk font web tradisional tidak bekerja dengan baik untuk font ikon. Font fallback untuk font ikon biasanya terlihat sangat berbeda dari font ikon dan karakternya dapat menyampaikan arti yang sama sekali berbeda. Akibatnya, font ikon lebih cenderung menyebabkan perubahan tata letak yang signifikan. Selain itu, menggunakan font fallback mungkin tidak praktis. Jika memungkinkan, yang terbaik adalah mengganti font ikon dengan SVG (ini juga lebih baik untuk aksesibilitas). Versi font ikon populer yang lebih baru biasanya mendukung SVG. Untuk informasi lebih lanjut tentang beralih ke SVG, lihat Font Mengagumkan dan Ikon Bahan.
Indonesian 
English