Praktik terbaik untuk font

Mengoptimalkan font web untuk Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

Artikel ini dibagi menjadi tiga bagian: pemuatan font, pengiriman font, dan rendering font. Setiap bagian menjelaskan cara kerja aspek tertentu dari siklus proses font tersebut dan memberikan praktik terbaik yang sesuai.

Pemuatan font

Font biasanya merupakan aset yang penting, karena tanpa font tersebut, pengguna mungkin tidak dapat melihat konten halaman. Dengan demikian, praktik terbaik untuk pemuatan {i>font<i} umumnya berfokus untuk memastikan bahwa {i>font<i} dimuat sedini mungkin. Anda harus memberikan perhatian khusus pada font yang dimuat dari situs pihak ketiga karena mendownload file font ini memerlukan penyiapan koneksi terpisah.

Jika tidak yakin apakah font halaman Anda diminta secara tepat waktu, periksa tab Waktu dalam panel Jaringan di Chrome DevTools untuk mengetahui informasi selengkapnya.

Screenshot tab Timing di DevTools

Memahami @font-face

Sebelum memulai praktik terbaik untuk pemuatan font, penting untuk memahami cara kerja @font-face dan pengaruhnya terhadap pemuatan font.

Deklarasi @font-face adalah bagian penting saat menggunakan font web apa pun. Setidaknya, nama akan mendeklarasikan nama yang akan 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 yang umum adalah font diminta saat deklarasi @font-face ditemukan—hal ini tidak benar. Dengan sendirinya, deklarasi @font-face tidak memicu download font. Sebaliknya, font hanya didownload jika dirujuk oleh gaya yang digunakan di halaman. Misalnya, seperti ini:

@font-face {
  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, Open Sans hanya akan didownload jika halaman berisi elemen <h1>.

Sehingga, ketika berpikir tentang pengoptimalan {i>font<i}, penting untuk memberikan stylesheet yang sama pentingnya dengan file {i>font<i} itu sendiri. Mengubah konten atau penayangan stylesheet dapat berdampak signifikan pada kapan font tiba. Demikian pula, menghapus CSS yang tidak digunakan dan stylesheet terpisah dapat mengurangi jumlah font yang dimuat oleh sebuah halaman.

Deklarasi font inline

Sebagian besar situs akan sangat diuntungkan jika menyisipkan deklarasi font dan gaya penting lainnya dalam <head> pada dokumen utama, dibandingkan menyertakannya dalam stylesheet eksternal. Hal ini memungkinkan browser menemukan deklarasi font lebih cepat 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>

Menyisipkan CSS penting dapat menjadi teknik yang lebih canggih yang tidak dapat dilakukan oleh semua situs. Manfaat performanya jelas, tetapi memerlukan proses tambahan dan alat build untuk memastikan CSS—dan idealnya hanya CSS penting—yang disisipkan dengan benar dan bahwa setiap CSS tambahan dikirimkan dengan cara yang tidak memblokir render.

Prakoneksi ke origin pihak ketiga penting

Jika situs Anda memuat font dari situs pihak ketiga, sebaiknya gunakan petunjuk resource preconnect untuk membuat koneksi awal dengan asal pihak ketiga. Petunjuk resource harus ditempatkan di <head> dokumen. Petunjuk resource di bawah ini menyiapkan koneksi untuk memuat stylesheet font.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Untuk melakukan prakoneksi 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 menyajikan stylesheet dan font dari sumber yang terpisah. Misalnya, beginilah cara petunjuk resource preconnect digunakan untuk Google Fonts.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Hati-hati saat menggunakan preload untuk memuat font

Meskipun preload sangat efektif dalam membuat font dapat ditemukan di awal proses pemuatan halaman, hal ini berdampak pada hilangnya resource browser dari pemuatan resource lainnya.

Menyisipkan deklarasi font dan menyesuaikan stylesheet mungkin merupakan pendekatan yang lebih efektif. Penyesuaian ini lebih mendekati mengatasi akar penyebab font yang terlambat ditemukan—bukan sekadar 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 hati-hati, hanya boleh digunakan untuk memuat format font tunggal.

Akan tetapi, saat menggunakan stylesheet eksternal, melakukan pramuat font yang paling penting bisa menjadi sangat efektif karena browser tidak akan mengetahui apakah font diperlukan hingga beberapa saat lagi.

Pengiriman font

Pengiriman font yang lebih cepat menghasilkan rendering teks yang lebih cepat. Selain itu, jika {i>font<i} dikirimkan cukup awal, ini bisa membantu menghilangkan pergeseran tata letak yang dihasilkan dari pertukaran {i>font<i}.

Menggunakan font yang dihosting sendiri

Di atas kertas, penggunaan {i>font<i} yang dihosting sendiri seharusnya memberikan performa yang lebih baik karena menghilangkan penyiapan koneksi pihak ketiga. Namun, pada praktiknya, perbedaan performa antara kedua opsi ini tidak begitu jelas: misalnya, Web Almanac mendapati 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, pastikan situs Anda menggunakan Jaringan Penayangan Konten (CDN) dan HTTP/2. Tanpa penggunaan teknologi ini, kecil kemungkinan font yang dihosting sendiri akan memberikan performa yang lebih baik. Untuk informasi selengkapnya, lihat Jaringan Penayangan Konten.

Jika menggunakan font yang dihosting sendiri, sebaiknya Anda juga menerapkan beberapa pengoptimalan file font yang biasanya disediakan secara otomatis oleh penyedia font pihak ketiga—misalnya, subsetelan 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 jadi sangat menantang.

Gunakan 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, menyebabkan lebih sedikit data untuk diunduh dan oleh karena itu kinerja yang lebih cepat.

Dengan adanya dukungan browser, pakar sekarang merekomendasikan hanya menggunakan WOFF2:

Bahkan, menurut kami ini juga saatnya untuk menyatakan: Gunakan hanya WOFF2 dan lupakan yang lainnya.

Ini akan menyederhanakan CSS dan alur kerja Anda secara masif dan juga mencegah download font ganda atau salah secara tidak sengaja. WOFF2 kini didukung di mana saja. Jadi, kecuali Anda perlu mendukung {i>browser<i} yang benar-benar kuno, gunakan saja WOFF2. Jika tidak dapat melakukannya, pertimbangkan untuk tidak menyajikan font web apa pun ke browser lama tersebut. Hal ini tidak akan menjadi masalah jika Anda memiliki strategi penggantian yang kuat. Pengunjung di browser lama hanya akan melihat font penggantian Anda.

Bram Stein, dari Web Almanac 2022

Font subset

File font biasanya menyertakan glyph dalam jumlah besar untuk berbagai karakter yang didukungnya. Tetapi Anda mungkin tidak memerlukan semua karakter di halaman Anda dan dapat mengurangi ukuran file font dengan membuat {i>subsetting<i} font.

Deskripsi unicode-range dalam deklarasi @font-face memberi tahu browser karakter mana 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 akan didownload jika halaman berisi satu atau beberapa karakter yang cocok dengan rentang unicode. unicode-range biasanya digunakan untuk menyajikan file font yang berbeda, bergantung pada bahasa yang digunakan oleh konten halaman.

unicode-range sering digunakan bersama dengan teknik subsetelan. Font subset mencakup sebagian kecil glyph yang terdapat dalam file font asli. Misalnya, daripada menampilkan semua karakter kepada semua pengguna, situs dapat membuat font subset terpisah untuk karakter Latin dan Sirilik. Jumlah glyph per font sangat bervariasi: font Latin biasanya berukuran 100 hingga 1000 glyph per font; Font CJK dapat berisi lebih dari 10.000 karakter. Menghapus glyph yang tidak digunakan dapat mengurangi ukuran file font secara signifikan.

Beberapa penyedia font dapat otomatis menyediakan versi file font yang berbeda dengan subset yang berbeda pula. Misalnya, Google Fonts melakukan ini 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 sering kali terlewatkan dan menghasilkan file font yang lebih besar secara lokal.

Anda juga dapat melakukan subset font secara manual jika penyedia font Anda mengizinkannya, baik melalui API (Google Fonts mendukungnya dengan memberikan parameter text), atau dengan mengedit file font secara manual, lalu menghostingnya sendiri. Alat untuk membuat subset font meliputi subfont dan glyphanger. Namun, periksa lisensi untuk font yang Anda gunakan izinkan subsetelan dan hosting mandiri.

Gunakan lebih sedikit font web

Font tercepat untuk dikirimkan 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 versi. Karena font sudah diinstal, font tidak perlu didownload. Font sistem dapat berfungsi dengan baik untuk teks isi.

Untuk menggunakan font sistem di CSS Anda, cantumkan system-ui sebagai jenis font:

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 "default" gaya font dan menyediakan "sumbu" untuk memanipulasi font. Misalnya, font variabel dengan sumbu Weight dapat digunakan untuk mengimplementasikan huruf yang sebelumnya memerlukan font terpisah untuk terang, reguler, tebal, dan ekstra tebal.

Tidak semua orang akan mendapatkan manfaat dari beralih ke font variabel. Font variabel berisi banyak gaya, sehingga biasanya memiliki ukuran file yang lebih besar daripada setiap font non-variabel 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 {i>font<i} web yang belum dimuat, browser dihadapkan pada dilema: apakah browser harus menahan render teks hingga {i>font<i} web datang? Atau haruskah merender teks dalam font penggantian hingga font web tiba?

Browser yang berbeda menangani skenario ini secara berbeda. Secara default, browser berbasis Chromium dan Firefox akan memblokir rendering teks hingga 3 detik jika font web yang dikaitkan belum dimuat; Safari akan 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 stabilitas LCP, FCP, dan tata letak.

Pilih strategi font-display yang sesuai

font-display memberi tahu browser cara melanjutkan rendering teks saat font web terkait belum dimuat. Jenis font ini ditentukan per jenis font.

@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 penukaran
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 yang tidak terlihat sehingga teks tidak akan terlihat oleh pengguna. Jika tidak tersedia di akhir periode pemblokiran, font akan dirender dalam font penggantian.
  • Periode pertukaran: Periode pertukaran terjadi setelah periode pemblokiran. Jika font web tersedia selama periode penukaran, font tersebut akan "ditukarkan" inc.

Strategi font-display mencerminkan sudut pandang yang berbeda tentang kompromi antara performa dan estetika. Dengan demikian, sulit untuk memberikan pendekatan yang direkomendasikan karena hal ini bergantung pada preferensi individu, seberapa penting {i>font<i} web untuk halaman dan merek, dan seberapa sering {i>font<i} yang terlambat muncul ketika diganti.

Berikut ini adalah tiga strategi yang paling dapat diterapkan untuk sebagian besar situs:

  • Jika performa menjadi prioritas utama: Gunakan font-display: optional. Ini adalah yang paling "berperforma baik" pendekatan: render teks tertunda tidak lebih dari 100 md dan ada jaminan bahwa tidak akan ada pergeseran tata letak terkait pertukaran font. Namun, kekurangannya adalah {i>font<i} web tidak akan digunakan jika terlambat.

  • Jika menampilkan teks dengan cepat adalah prioritas utama, tetapi Anda tetap ingin memastikan bahwa font web digunakan: Gunakan font-display: swap, tetapi pastikan untuk mengirimkan font cukup awal agar tidak menyebabkan pergeseran tata letak. Kelemahan dari opsi ini adalah pergeseran yang mencolok ketika {i>font<i} datang terlambat.

  • Jika memastikan teks ditampilkan dalam font web adalah prioritas utama: Gunakan font-display: block, tetapi pastikan untuk mengirimkan font cukup awal agar meminimalkan penundaan teks. Kelemahannya adalah tampilan teks awal akan tertunda. Perlu diperhatikan bahwa meskipun deplay ini, hal ini masih dapat menyebabkan pergeseran tata letak karena teks sebenarnya digambar tidak terlihat, sehingga ruang font penggantian digunakan untuk mencadangkan ruang. Setelah font web dimuat, proses ini mungkin memerlukan ruang yang berbeda sehingga harus diganti. Namun, perubahan ini mungkin tidak terlalu mencolok daripada font-display: swap karena teks itu sendiri tidak akan terlihat berubah.

Perhatikan 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 di teks isi.

Kurangi peralihan antara font penggantian dan font web

Untuk mengurangi dampak CLS, Anda dapat menggunakan atribut size-adjust baru. Untuk mengetahui informasi selengkapnya, lihat artikel tentang CSS size-adjust. Fitur ini merupakan tambahan yang sangat baru bagi rangkaian alat kami, sehingga lebih canggih dan agak manual untuk saat ini. Namun, Anda perlu bereksperimen dan memantau peningkatan alat di masa mendatang.

Kesimpulan

Font web masih menjadi bottleneck performa, tetapi kami memiliki opsi yang terus bertambah untuk memungkinkan kami mengoptimalkannya guna mengurangi bottleneck ini sebanyak mungkin.