Mengoptimalkan font web untuk Core Web Vitals.
Dokumen ini membahas praktik terbaik performa untuk font. Ada berbagai cara font web memengaruhi performa:
- Penundaan rendering teks: Jika font web belum dimuat, browser biasanya menunda rendering teks. Dalam banyak situasi, hal ini menunda First Contentful Paint (FCP). Dalam beberapa situasi, hal ini akan menunda Largest Contentful Paint (LCP).
- Pergeseran tata letak: Praktik penggantian font berpotensi menyebabkan pergeseran tata letak dan memengaruhi Pergeseran Tata Letak Kumulatif (CLS). Pergeseran tata letak ini terjadi saat font web dan font penggantinya menggunakan jumlah ruang yang berbeda di halaman.
Dokumen ini memiliki tiga bagian: pemuatan font, pengiriman font, dan rendering font. Setiap bagian menjelaskan cara kerja aspek tertentu dari siklus proses font dan memberikan praktik terbaik yang sesuai.
Pemuatan font
Font adalah resource penting. Tanpanya, pengguna mungkin tidak dapat melihat konten halaman. Dengan demikian, praktik terbaik untuk pemuatan font umumnya berfokus pada memastikan font dimuat sedini mungkin. Perhatian khusus harus diberikan pada font yang dimuat dari situs pihak ketiga karena mendownload file font ini memerlukan penyiapan koneksi terpisah.
Jika Anda tidak yakin apakah font halaman diminta tepat waktu, periksa tab Timing dalam panel Network di Chrome DevTools untuk mengetahui informasi selengkapnya.
Memahami @font-face
Sebelum mempelajari praktik terbaik untuk pemuatan font, penting untuk memahami
cara kerja @font-face
dan pengaruhnya terhadap pemuatan font.
Deklarasi @font-face
adalah bagian penting dari penggunaan font web apa pun. Setidaknya, file ini
mendeklarasikan nama yang digunakan untuk merujuk ke font dan menunjukkan lokasi
file font yang sesuai.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Miskonsepsi umum adalah bahwa font diminta saat deklarasi @font-face
ditemukan. Pernyataan ini salah. Deklarasi @font-face
itu sendiri
tidak memicu download font. Sebaliknya, font hanya didownload jika
direferensikan oleh gaya visual yang digunakan di halaman. Contoh:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
h1 {
font-family: "Open Sans"
}
Dalam contoh ini, Open Sans
hanya akan didownload jika halaman berisi elemen <h1>
.
Jadi, saat memikirkan pengoptimalan font, penting untuk memberikan pertimbangan yang sama terhadap stylesheet seperti file font itu sendiri. Mengubah konten atau pengiriman stylesheet dapat berdampak signifikan pada waktu font tiba. Demikian pula, menghapus CSS yang tidak digunakan dan memisahkan stylesheet dapat mengurangi jumlah font yang dimuat oleh halaman.
Deklarasi font inline
Sebagian besar situs akan sangat diuntungkan dengan menyisipkan deklarasi font dan gaya kritis lainnya di <head>
dokumen utama, bukan menyertakannya dalam stylesheet eksternal. Hal ini memungkinkan browser menemukan deklarasi font
lebih cepat karena browser tidak perlu menunggu download
stylesheet eksternal.
<head>
<style>
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
body {
font-family: "Open Sans";
}
...etc.
</style>
</head>
Menyisipkan CSS penting dapat menjadi teknik yang lebih canggih yang tidak dapat dicapai oleh semua situs. Manfaat performanya jelas, tetapi memerlukan proses dan alat build tambahan untuk memastikan CSS yang diperlukan, dan idealnya hanya CSS penting, disisipkan dengan benar dan CSS tambahan apa pun dikirimkan dengan cara pemblokiran non-render.
Melakukan pra-koneksi ke origin pihak ketiga yang penting
Jika situs Anda memuat font dari situs pihak ketiga, sebaiknya
gunakan petunjuk resource preconnect
untuk membuat koneksi awal dengan origin pihak ketiga.
Petunjuk resource harus ditempatkan di <head>
dokumen. Petunjuk resource
berikut menyiapkan koneksi untuk memuat stylesheet font.
<head>
<link rel="preconnect" href="https://fonts.com">
</head>
Untuk melakukan preconnect koneksi yang digunakan untuk mendownload file font, tambahkan
petunjuk resource preconnect
terpisah yang menggunakan atribut crossorigin
.
Tidak seperti stylesheet, file font harus dikirim melalui
koneksi CORS.
<head>
<link rel="preconnect" href="https://fonts.com">
<link rel="preconnect" href="https://fonts.com" crossorigin>
</head>
Saat menggunakan petunjuk resource preconnect
, perlu diingat bahwa penyedia font dapat
menayangkan stylesheet dan font dari origin terpisah. Misalnya, ini adalah cara
petunjuk resource preconnect
akan digunakan untuk Google Fonts.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
Berhati-hatilah saat menggunakan preload
untuk memuat font
Meskipun preload
sangat efektif dalam membuat font dapat ditemukan lebih awal dalam
proses pemuatan halaman, hal ini akan mengurangi resource browser dari
pemuatan resource lainnya.
Menyisipkan deklarasi font dan menyesuaikan stylesheet mungkin merupakan pendekatan yang lebih efektif. Penyesuaian ini lebih mendekati akar penyebab font yang ditemukan terlambat, bukan hanya memberikan solusi.
Selain itu, penggunaan preload
sebagai strategi pemuatan font juga harus digunakan
dengan hati-hati karena mengabaikan beberapa strategi negosiasi konten bawaan browser. Misalnya, preload
mengabaikan deklarasi unicode-range
, dan jika
digunakan dengan cermat, hanya boleh digunakan untuk memuat satu format font.
Namun, saat menggunakan stylesheet eksternal, memuat font yang paling penting dapat sangat efektif karena browser tidak akan mengetahui apakah font diperlukan hingga jauh di kemudian hari.
Pengiriman font
Pengiriman font yang lebih cepat menghasilkan rendering teks yang lebih cepat. Selain itu, jika font dikirim cukup awal, hal ini dapat membantu menghilangkan pergeseran tata letak yang dihasilkan dari penggantian font.
Menggunakan font yang dihosting sendiri
Secara teori, penggunaan font yang dihosting sendiri akan memberikan performa yang lebih baik karena menghilangkan penyiapan koneksi pihak ketiga. Dalam praktiknya, perbedaan performa antara kedua opsi ini kurang jelas. Misalnya, Web Almanac menemukan bahwa situs yang menggunakan font pihak ketiga memiliki rendering yang lebih cepat daripada font yang menggunakan font pihak pertama.
Jika Anda mempertimbangkan untuk menggunakan font yang dihosting sendiri, pastikan situs Anda menggunakan Jaringan Pengiriman Konten (CDN) dan HTTP/2. Tanpa penggunaan teknologi ini, font yang dihosting sendiri kemungkinan besar tidak akan memberikan performa yang lebih baik.
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, subsetting font dan kompresi WOFF2. Jumlah upaya yang diperlukan untuk menerapkan pengoptimalan ini agak bergantung pada bahasa yang didukung situs Anda. Secara khusus, perlu diketahui bahwa mengoptimalkan font untuk bahasa CJK dapat sangat menantang.
Menggunakan WOFF2
Dari font font modern, WOFF2 adalah yang terbaru, memiliki dukungan browser terluas, dan menawarkan kompresi terbaik. Karena menggunakan Brotli, WOFF2 mengompresi 30% lebih baik daripada WOFF, sehingga lebih sedikit data yang didownload dan performa yang lebih cepat.
Mengingat dukungan browser, para pakar kini merekomendasikan untuk hanya menggunakan WOFF2:
Bahkan, kami rasa sudah saatnya untuk menyatakan: Hanya gunakan WOFF2 dan lupakan yang lainnya.
Bram Stein, dari Web Almanac 2022
Hal ini akan menyederhanakan CSS dan alur kerja Anda secara besar-besaran dan juga mencegah download font ganda atau salah secara tidak sengaja. WOFF2 kini didukung di mana saja. Jadi, kecuali jika Anda perlu mendukung browser yang sangat lama, cukup gunakan WOFF2. Jika tidak dapat, sebaiknya jangan tayangkan font web apa pun ke browser lama tersebut. Hal ini tidak akan menjadi masalah jika Anda memiliki strategi penggantian yang andal. Pengunjung yang menggunakan browser lama akan melihat font penggantian Anda.
Font subset
File font biasanya menyertakan sejumlah besar glif untuk berbagai karakter yang didukungnya. Namun, Anda mungkin tidak memerlukan semua karakter di halaman dan dapat mengurangi ukuran file font dengan membuat subset font.
Deskripsi unicode-range
dalam deklarasi @font-face
memberi tahu browser karakter
yang dapat digunakan font.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
unicode-range: U+0025-00FF;
}
File font didownload jika halaman berisi satu atau beberapa karakter yang cocok dengan
rentang unicode. unicode-range
biasanya digunakan untuk menayangkan file font
yang berbeda, bergantung pada bahasa yang digunakan oleh konten halaman.
unicode-range
sering digunakan bersama dengan teknik subkumpulan.
Font subset menyertakan bagian glyph yang lebih kecil yang terdapat dalam
file font asli. Misalnya, situs mungkin menghasilkan font subset terpisah untuk karakter Latin dan Kiril, bukan menayangkan semua karakter kepada semua pengguna.
Jumlah glyph per font sangat bervariasi:
- Font Latin biasanya memiliki jumlah 100 hingga 1.000 glyph per font.
- Font CJK dapat memiliki lebih dari 10.000 karakter.
Menghapus glyph yang tidak digunakan dapat mengurangi ukuran file font secara signifikan.
Beberapa penyedia font mungkin menyediakan versi file font yang berbeda dengan subset yang berbeda secara otomatis. Misalnya, Google Fonts melakukannya secara default:
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Saat beralih ke hosting mandiri, ini adalah pengoptimalan yang dapat terlewatkan dan menyebabkan file font yang lebih besar secara lokal.
Anda dapat membuat subkumpulan font secara manual jika penyedia font mengizinkannya, baik dengan
API (Google Fonts mendukung hal ini dengan menyediakan parameter text
),
atau dengan mengedit file font secara manual, lalu menghosting sendiri. Alat untuk
membuat subset font mencakup subfont dan
glyphanger.
Selalu periksa lisensi font untuk mengonfirmasi bahwa font tersebut mengizinkan subsetting dan hosting mandiri.
Menggunakan 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.
Font sistem adalah font default yang digunakan oleh antarmuka pengguna perangkat pengguna. Font sistem biasanya bervariasi menurut sistem operasi dan versinya. Karena font sudah diinstal, font tidak perlu didownload. Font sistem dapat berfungsi dengan baik untuk teks isi.
Untuk menggunakan font sistem di CSS, cantumkan system-ui
sebagai font-family:
font-family: system-ui
Ide di balik font variabel adalah satu font variabel dapat digunakan sebagai pengganti beberapa file font. Font
variabel berfungsi dengan menentukan gaya font "default" dan menyediakan
"sumbu" untuk memanipulasi font.
Misalnya, font variabel dengan sumbu Weight
dapat digunakan untuk menerapkan
huruf yang sebelumnya memerlukan font terpisah untuk tipis, reguler, tebal,
dan ekstra tebal.
Tidak semua orang mendapatkan manfaat dari beralih ke font variabel. Font variabel berisi banyak gaya, sehingga biasanya memiliki ukuran file yang lebih besar daripada font non-variabel individual yang hanya berisi satu gaya. Situs yang akan mengalami peningkatan terbesar dari penggunaan font variabel adalah situs yang menggunakan (dan perlu menggunakan) berbagai gaya dan ketebalan font.
Rendering font
Saat dihadapkan dengan font web yang belum dimuat, browser akan dihadapkan pada dilema: apakah harus menahan rendering teks hingga font web tiba? Atau apakah sebaiknya merender teks dalam font pengganti hingga font web tiba?
Browser yang berbeda menangani skenario ini dengan cara yang berbeda. Secara default, browser berbasis Chromium dan Firefox memblokir rendering teks hingga 3 detik jika font web terkait belum dimuat. Safari memblokir rendering teks tanpa batas waktu.
Perilaku ini dapat dikonfigurasi menggunakan atribut font-display
. Pilihan
ini dapat memiliki implikasi yang signifikan: font-display
berpotensi
memengaruhi LCP, FCP, dan stabilitas tata letak.
Memilih strategi font-display
yang sesuai
font-display
memberi tahu browser cara melanjutkan rendering teks saat
font web terkait belum dimuat. Nilai ini ditentukan per font-face.
@font-face {
font-family: Roboto, Sans-Serif
src: url(/fonts/roboto.woff) format('woff'),
font-display: swap;
}
Ada lima kemungkinan nilai untuk font-display
:
Nilai | Periode pemblokiran | Periode pertukaran |
---|---|---|
Otomatis | Bervariasi menurut browser | Bervariasi menurut browser |
Blokir | 2-3 detik | Tak terbatas |
Tukar | 0 md | Tak terbatas |
Pengganti | 100 md | 3 detik |
Opsional | 100 md | Tidak ada |
- Periode pemblokiran: Periode pemblokiran dimulai saat browser meminta font web. Selama periode pemblokiran, jika font web tidak tersedia, font akan dirender dalam font pengganti tidak terlihat sehingga teks tidak terlihat oleh pengguna. Jika tidak tersedia di akhir periode pemblokiran, font akan dirender dalam font pengganti.
- Periode pertukaran: Periode pertukaran terjadi setelah periode pemblokiran. Jika font web tersedia selama periode pertukaran, font tersebut akan "ditukar".
Strategi font-display
mencerminkan sudut pandang yang berbeda tentang kompromi
antara performa dan estetika. Oleh karena itu, sulit untuk merekomendasikan
pendekatan karena bergantung pada preferensi individu, seberapa penting font web
bagi halaman dan merek, serta seberapa mengganggu font yang terlambat saat
ditukar.
Untuk sebagian besar situs, berikut adalah tiga strategi yang paling berlaku, berdasarkan prioritas utama Anda:
Performa: Gunakan
font-display: optional
. Ini adalah pendekatan yang paling "berperforma": rendering teks tertunda tidak lebih dari 100 md dan ada jaminan bahwa tidak ada pergeseran tata letak terkait penggantian font. Kelemahannya adalah font web tidak akan digunakan jika terlambat.Menampilkan teks dengan cepat dan tetap menggunakan font web: Gunakan
font-display: swap
, tetapi pastikan untuk mengirimkan font cukup awal sehingga tidak menyebabkan pergeseran tata letak. Kelemahan opsi ini adalah pergeseran yang mengejutkan saat font tiba terlambat.Teks ditampilkan dalam font web: Gunakan
font-display: block
, tetapi pastikan untuk mengirimkan font cukup awal sehingga meminimalkan penundaan teks. Tampilan teks awal tertunda. Meskipun demikian, penundaan ini masih dapat menyebabkan perubahan tata letak karena teks sebenarnya digambar tidak terlihat, dan ruang font pengganti digunakan untuk mencadangkan ruang. Setelah font web dimuat, hal ini mungkin memerlukan ruang perbedaan, sehingga terjadi pergeseran. Perubahan ini mungkin tidak terlalu mencolok dibandingkanfont-display: swap
, karena teks itu sendiri tidak akan terlihat bergeser.
Perhatikan juga bahwa kedua pendekatan ini dapat digabungkan: misalnya, gunakan
font-display: swap
untuk branding dan elemen halaman lainnya yang berbeda secara visual.
Gunakan font-display: optional
untuk font yang digunakan dalam teks isi.
Font ikon
Strategi font-display
yang berfungsi baik untuk font web konvensional
tidak berfungsi sebaik untuk font ikon. Font pengganti untuk font ikon biasanya
terlihat sangat berbeda dengan font ikon, dan karakternya dapat menyampaikan
makna yang sama sekali berbeda. Akibatnya, font ikon lebih cenderung menyebabkan
perubahan tata letak yang signifikan.
Selain itu, penggunaan font pengganti mungkin tidak praktis. Jika memungkinkan, ganti font ikon dengan SVG, yang juga lebih baik untuk aksesibilitas. Font ikon populer versi yang lebih baru biasanya mendukung SVG. Untuk informasi selengkapnya tentang cara beralih ke SVG, lihat Font Awesome dan Ikon Material.
Mengurangi pergeseran antara font penggantian dan webfont
Untuk mengurangi dampak CLS, Anda dapat menggunakan
atribut size-adjust
.
Kesimpulan
Font web masih menjadi bottleneck performa, tetapi kami memiliki berbagai opsi yang terus berkembang agar dapat mengoptimalkannya untuk mengurangi bottleneck ini sebanyak mungkin.