Praktik terbaik untuk font

Mengoptimalkan font web untuk Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Dokumen ini membahas praktik terbaik performa untuk font. Ada berbagai cara font web memengaruhi performa:

Dokumen ini memiliki tiga bagian: pemuatan font, penayangan 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. Tanpa font, pengguna mungkin tidak dapat melihat konten halaman. Oleh karena itu, praktik terbaik untuk pemuatan font umumnya berfokus untuk 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 Anda diminta tepat waktu, periksa tab Timing dalam panel Network di Chrome DevTools untuk mengetahui informasi selengkapnya.

Tab Timing di DevTools.

Memahami @font-face

Sebelum membahas praktik terbaik untuk pemuatan font, penting untuk memahami cara @font-face bekerja dan dampaknya terhadap pemuatan font.

Deklarasi @font-face adalah bagian penting dari penggunaan font web apa pun. Minimal, deklarasi 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");
}

Kesalahpahaman umum adalah bahwa font diminta saat deklarasi @font-face ditemukan. Hal ini salah. Dengan sendirinya, deklarasi @font-face tidak memicu download font. Sebaliknya, font hanya didownload jika direferensikan oleh gaya 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>.

Oleh karena itu, saat memikirkan pengoptimalan font, penting untuk memberikan pertimbangan yang sama pada stylesheet seperti pada file font itu sendiri. Mengubah konten atau penayangan stylesheet dapat berdampak signifikan pada waktu font tiba. Demikian pula, menghapus CSS yang tidak digunakan dan membagi stylesheet dapat mengurangi jumlah font yang dimuat oleh halaman.

Deklarasi font inline

Sebagian besar situs akan sangat diuntungkan jika menggunakan deklarasi font dan gaya penting lainnya dalam <head> dokumen utama, bukan menyertakannya dalam stylesheet eksternal. Hal ini memungkinkan browser menemukan deklarasi font lebih awal karena browser tidak perlu menunggu stylesheet eksternal didownload.

<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>

Meng-inline 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, di-inline dengan benar dan CSS tambahan apa pun ditayangkan dengan cara yang tidak memblokir rendering.

Melakukan preconnect ke origin pihak ketiga yang penting

Jika situs Anda memuat font dari situs pihak ketiga, sebaiknya gunakan preconnect petunjuk resource 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, begini 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 untuk membuat font dapat ditemukan lebih awal dalam proses pemuatan halaman, hal ini mengorbankan resource browser dari pemuatan resource lainnya.

Meng-inline deklarasi font dan menyesuaikan stylesheet mungkin merupakan pendekatan yang lebih efektif. Penyesuaian ini lebih mendekati penyebab utama font yang ditemukan terlambat, bukan hanya memberikan solusi sementara.

Selain itu, penggunaan preload sebagai strategi pemuatan font juga harus digunakan dengan hati-hati karena melewati beberapa strategi negosiasi konten bawaan browser. Misalnya, preload mengabaikan deklarasi unicode-range, dan jika digunakan dengan bijak, hanya boleh digunakan untuk memuat satu format font.

Namun, saat menggunakan stylesheet eksternal, melakukan pramuat font yang paling penting dapat sangat efektif karena browser tidak akan menemukan apakah font diperlukan hingga jauh kemudian.

Penayangan font

Penayangan font yang lebih cepat menghasilkan rendering teks yang lebih cepat. Selain itu, jika font ditayangkan 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 Content Delivery Network (CDN) dan HTTP/2. Tanpa penggunaan teknologi ini, kemungkinan font yang dihosting sendiri akan memberikan performa yang lebih baik jauh lebih kecil.

Jika Anda menggunakan font yang dihosting sendiri, sebaiknya terapkan juga beberapa pengoptimalan file font yang biasanya disediakan secara otomatis oleh penyedia font pihak ketiga. Misalnya, subsetting font dan kompresi WOFF2. Jumlah upaya yang diperlukan untuk menerapkan pengoptimalan ini bergantung pada bahasa yang didukung situs Anda. Secara khusus, perlu diketahui bahwa mengoptimalkan font untuk bahasa CJK dapat menjadi tantangan tersendiri.

Menggunakan WOFF2

Dari 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 data yang didownload lebih sedikit dan performa lebih cepat.

Mengingat dukungan browser, para ahli kini merekomendasikan untuk hanya menggunakan WOFF2:

Sebenarnya, kami rasa sudah waktunya untuk menyatakan: Gunakan WOFF2 saja dan lupakan yang lainnya.

Hal ini akan menyederhanakan CSS dan alur kerja Anda secara besar-besaran dan juga mencegah download font ganda atau salah yang tidak disengaja. WOFF2 kini didukung di mana saja. Jadi, kecuali jika Anda perlu mendukung browser yang sangat lama, gunakan WOFF2 saja. Jika tidak dapat melakukannya, pertimbangkan untuk tidak menayangkan font web apa pun ke browser lama tersebut. Hal ini tidak akan menjadi masalah jika Anda memiliki strategi pengganti yang kuat. Pengunjung di browser lama akan melihat font pengganti Anda.

Bram Stein, dari Web Almanac 2022

Font subset

File font biasanya menyertakan sejumlah besar glyph untuk semua karakter yang didukungnya. Namun, Anda mungkin tidak memerlukan semua karakter di halaman dan dapat mengurangi ukuran file font dengan font subset.

Deskriptor unicode-range dalam deklarasi @font-face memberi tahu browser karakter mana yang dapat digunakan untuk 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 umum digunakan untuk menayangkan file font yang berbeda, bergantung pada bahasa yang digunakan oleh konten halaman.

unicode-range sering digunakan bersama dengan teknik subsetting. Font subset menyertakan bagian glyph yang lebih kecil yang terdapat dalam file font asli. Misalnya, daripada menayangkan semua karakter kepada semua pengguna, situs dapat membuat font subset terpisah untuk karakter Latin dan Cyrillic.

Jumlah glyph per font sangat bervariasi:

  • Font Latin biasanya memiliki 100 hingga 1.000 glyph per font.
  • CJK mungkin memiliki lebih dari 10.000 karakter.

Menghapus glyph yang tidak digunakan dapat mengurangi ukuran file font secara signifikan.

Beberapa penyedia font dapat 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 sendiri, pengoptimalan ini dapat terlewatkan dan menyebabkan file font yang lebih besar secara lokal.

Anda dapat membuat subset font secara manual jika penyedia font Anda mengizinkannya, baik dengan API (Google Fonts mendukung hal ini dengan menyediakan parameter text parameter), atau dengan mengedit file font secara manual, lalu melakukan hosting sendiri. Alat untuk membuat subset font mencakup subfont dan glyphanger.

Selalu periksa lisensi font untuk mengonfirmasi bahwa lisensi tersebut mengizinkan subsetting dan hosting sendiri.

Menggunakan lebih sedikit font web

Font yang paling cepat ditayangkan adalah font yang tidak diminta sejak awal. Font sistem dan font variabel adalah dua cara untuk 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 versi. Karena font sudah diinstal, font tidak perlu didownload. Font sistem dapat berfungsi dengan sangat 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 bahwa 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 light, regular, bold, dan extra bold.

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 melihat peningkatan terbesar dari penggunaan font variabel adalah situs yang menggunakan (dan perlu menggunakan) berbagai gaya dan ketebalan font.

Rendering font

Saat menghadapi font web yang belum dimuat, browser menghadapi dilema: apakah harus menunda rendering teks hingga font web tiba? Atau apakah harus merender teks dalam font pengganti hingga font web tiba?

Browser yang berbeda menangani skenario ini secara 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. Atribut 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 blokir Periode penggantian
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 blokir: Periode blokir dimulai saat browser meminta font web. Selama periode blokir, jika font web tidak tersedia, font akan dirender dalam font pengganti yang tidak terlihat sehingga teks tidak terlihat oleh pengguna. Jika font tidak tersedia pada akhir periode blokir, font akan dirender dalam font pengganti.
  • Periode penggantian: Periode penggantian terjadi setelah periode blokir. Jika font web tersedia selama periode penggantian, font tersebut akan "diganti".

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, dan seberapa mengganggu font yang terlambat tiba saat diganti.

Untuk sebagian besar situs, ketiga strategi ini adalah yang paling berlaku, berdasarkan prioritas utama Anda:

  • Performa: Gunakan font-display: optional. Ini adalah pendekatan yang paling "berperforma": rendering teks ditunda 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 tiba.

  • Menampilkan teks dengan cepat dan tetap menggunakan font web: Gunakan font-display: swap tetapi pastikan untuk menayangkan font cukup awal sehingga tidak menyebabkan pergeseran tata letak. Kelemahan opsi ini adalah pergeseran yang mengganggu saat font terlambat tiba.

  • Teks ditampilkan dalam font web: Gunakan font-display: block, tetapi pastikan untuk menayangkan font cukup awal sehingga meminimalkan penundaan teks. Tampilan teks awal ditunda. Meskipun ada penundaan ini, hal ini masih dapat menyebabkan pergeseran 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 yang berbeda, sehingga terjadi pergeseran. Pergeseran ini mungkin tidak terlalu mengganggu dibandingkan font-display: swap, karena teks itu sendiri tidak akan terlihat bergeser.

Perlu diingat juga bahwa kedua pendekatan ini dapat digabungkan: misalnya, gunakan font-display: swap untuk branding dan elemen halaman lain yang berbeda secara visual. Gunakan font-display: optional untuk font yang digunakan dalam teks isi.

Font ikon

Strategi font-display yang berfungsi dengan baik untuk font web konvensional tidak berfungsi dengan baik untuk font ikon. Font pengganti untuk font ikon biasanya terlihat sangat berbeda dengan font ikon, dan karakternya mungkin menyampaikan arti yang sama sekali berbeda. Akibatnya, font ikon lebih cenderung menyebabkan pergeseran 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. Versi font ikon populer yang lebih baru biasanya mendukung SVG. Untuk mengetahui informasi selengkapnya tentang cara beralih ke SVG, lihat halaman Font Awesome tentang SVG Sprites dan Panduan Ikon Material kami.

Mengurangi pergeseran antara font pengganti dan font web

Untuk mengurangi dampak CLS, Anda dapat menggunakan size-adjust atribut.

Kesimpulan

Font web masih menjadi hambatan performa, tetapi kita memiliki berbagai opsi yang terus bertambah untuk mengoptimalkannya guna mengurangi hambatan ini sebanyak mungkin.