Pada modul sebelumnya, Anda telah mempelajari cara mengoptimalkan HTML, CSS, JavaScript, dan resource media. Dalam modul ini, temukan beberapa metode untuk mengoptimalkan web font.
Font web dapat memengaruhi performa halaman pada waktu pemuatan dan waktu rendering.
File font besar memerlukan waktu beberapa saat untuk didownload dan berdampak negatif pada Pertama
Contentful Paint (FCP), sedangkan nilai font-display yang salah dapat menyebabkan
pergeseran tata letak yang tidak diinginkan yang berkontribusi pada Pergeseran Tata Letak Kumulatif halaman
(CLS).
Sebelum mengoptimalkan font web dapat dibahas, mengetahui cara font web ditemukan oleh browser dapat membantu, sehingga Anda dapat memahami bagaimana CSS mencegah pengambilan {i>font<i} web yang tidak perlu dalam situasi tertentu.
Discovery
Font web halaman ditentukan dalam style sheet menggunakan @font-face
pernyataan:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Cuplikan kode sebelumnya menentukan font-family bernama "Open Sans", dan
memberi tahu browser di mana sumber daya {i>font<i} web masing-masing. Untuk menghemat
bandwidth, browser tidak mengunduh font web hingga ditentukan
bahwa tata letak halaman saat ini membutuhkannya.
h1 {
font-family: "Open Sans";
}
Dalam cuplikan CSS sebelumnya, browser mendownload file font "Open Sans"
saat mengurai elemen <h1> di HTML halaman.
preload
Jika deklarasi @font-face Anda ditentukan dalam style sheet eksternal,
browser hanya dapat mulai mengunduhnya setelah mengunduh lembar gaya.
Hal ini membuat {i>font<i} web menjadi sumber
daya yang terlambat ditemukan—tetapi ada cara untuk membantu
{i>browser<i} Anda menemukan {i>font web <i}lebih cepat.
Anda dapat memulai permintaan awal untuk resource font web menggunakan preload
direktif. Perintah preload membuat font web dapat ditemukan lebih awal selama
pemuatan halaman, dan browser akan segera mulai mendownloadnya tanpa menunggu
untuk menyelesaikan download dan penguraian. Perintah preload
tidak menunggu hingga {i>font<i} dibutuhkan pada laman.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Deklarasi @font-face inline
Anda dapat membuat font dapat ditemukan lebih awal selama pemuatan halaman dengan menyisipkan
CSS yang memblokir render—termasuk deklarasi @font-face—di <head>
HTML Anda menggunakan elemen <style>. Dalam hal ini, {i>browser<i} menemukan
font web lebih awal di halaman dimuat, karena tidak perlu menunggu
{i>style sheet<i} untuk diunduh.
Menyisipkan deklarasi @font-face memiliki keunggulan dibandingkan menggunakan preload
petunjuk, karena browser hanya mengunduh font yang diperlukan untuk
kami. Tindakan ini akan menghilangkan risiko mendownload font yang tidak digunakan.
Download
Setelah menemukan font web dan memastikan font tersebut dibutuhkan oleh halaman web, browser dapat mengunduhnya. Jumlah {i>font<i} web, pengkodeannya, dan ukuran filenya dapat secara signifikan mempengaruhi seberapa cepat {i>font<i} web yang diunduh dan dirender oleh browser.
Menghosting sendiri font web Anda
Font web dapat ditayangkan melalui layanan pihak ketiga, seperti Google Fonts, atau dapat dihosting sendiri di origin Anda. Saat menggunakan layanan pihak ketiga, web Anda halaman harus membuka koneksi ke domain penyedia sebelum dapat dimulai mengunduh {i>font<i} web yang dibutuhkan. Hal ini dapat menunda penemuan dan mengunduh {i>font<i} web.
Overhead ini dapat dikurangi menggunakan petunjuk resource preconnect. Dengan menggunakan
preconnect, Anda dapat memberi tahu browser untuk membuka koneksi ke lintas origin
lebih cepat dari yang biasanya dilakukan browser:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Cuplikan HTML sebelumnya mengisyaratkan browser untuk membuat koneksi ke
fonts.googleapis.com dan koneksi CORS ke fonts.gstatic.com. Agak besar
penyedia font—seperti Google Fonts—menyajikan CSS dan resource font dari
origin.
Anda dapat menghilangkan kebutuhan akan koneksi pihak ketiga dengan menghosting sendiri font web. Dalam kebanyakan kasus, hosting font web yang Anda hosting lebih cepat daripada mendownloadnya dari lintas origin. Jika Anda berencana untuk menghosting font web secara mandiri, pastikan situs Anda menggunakan Jaringan Penayangan Konten (CDN), HTTP/2, atau HTTP/3, dan menetapkan header {i>caching<i} yang benar untuk {i>font<i} web yang Anda butuhkan untuk situs web Anda.
Gunakan WOFF2—dan WOFF2 saja
WOFF2 menikmati dukungan browser yang luas dan kompresi terbaik—hingga 30% lebih baik daripada WOFF. Ukuran file yang lebih kecil mempercepat waktu download. WOFF2 format ini sering kali satu-satunya yang diperlukan untuk kompatibilitas penuh di seluruh modern browser.
Subset font web Anda
Font web biasanya menyertakan berbagai glyph yang berbeda, yang diperlukan untuk merepresentasikan berbagai macam karakter yang digunakan dalam berbagai bahasa. Jika menyajikan konten hanya dalam satu bahasa—atau menggunakan satu alfabet—maka Anda dapat kurangi ukuran font web Anda melalui subsetelan. Hal ini sering dilakukan oleh yang menentukan angka—atau rentang—titik kode unicode.
Subset adalah penurunan set glyph yang disertakan dalam web asli file font. Misalnya, alih-alih menampilkan semua glyph, laman Anda mungkin menyajikan {i>subset<i} tertentu untuk karakter Latin. Bergantung pada {i>subset<i} yang diperlukan, menghapus glyph dapat memperkecil ukuran file {i>font<i} secara signifikan.
Beberapa penyedia font web—seperti Google Fonts—menawarkan subset secara otomatis melalui
penggunaan parameter {i>string<i} kueri. Misalnya,
URL https://fonts.googleapis.com/css?family=Roboto&subset=latin menayangkan
{i>style sheet<i} dengan {i>font<i} web Roboto
yang hanya menggunakan alfabet Latin.
Jika Anda telah memutuskan untuk menghosting sendiri font web Anda, langkah selanjutnya adalah membuat dan menghosting subset tersebut sendiri menggunakan alat seperti glyphanger atau subfont.
Namun, jika tidak memiliki kapasitas untuk menghosting sendiri font web Anda, Anda dapat
subset font web yang disediakan oleh Google Fonts dengan menentukan text tambahan
parameter string kueri yang hanya berisi titik kode unicode yang diperlukan untuk
{i>website<i} Anda. Misalnya, jika Anda memiliki font web tampilan di situs yang hanya
memerlukan sejumlah kecil karakter yang
diperlukan untuk frasa “Selamat Datang”, Anda dapat
meminta subkumpulan tersebut melalui Google Fonts melalui URL berikut:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Hal ini dapat
secara signifikan mengurangi jumlah data font web yang diperlukan untuk satu typeface
di situs Anda, jika {i>subset <i}ekstrim seperti itu dapat berguna di situs web Anda.
Rendering font
Setelah {i>browser<i} menemukan dan mengunduh {i>font<i} web, {i>font<i} ini dapat
dirender. Secara default, browser memblokir rendering teks apa pun yang menggunakan
{i>font<i} web hingga selesai diunduh. Anda dapat menyesuaikan rendering teks browser
aktif, dan mengonfigurasi teks yang akan ditampilkan—atau tidak ditampilkan—hingga web
font telah dimuat sepenuhnya menggunakan properti CSS font-display.
block
Nilai default untuk font-display adalah block. Dengan block, browser
memblokir rendering teks apa pun yang menggunakan font web yang ditentukan. Berbeda
browser berperilaku sedikit berbeda. Pemblokiran Chromium dan Firefox untuk rendering untuk
hingga maksimum 3 detik sebelum menggunakan penggantian. Pemblokiran Safari tanpa batas waktu
hingga {i>font<i} web dimuat.
swap
swap adalah nilai font-display yang paling banyak digunakan. swap tidak diblokir
rendering, dan menampilkan teks langsung di penggantian sebelum menukar
font web yang ditentukan. Hal ini memungkinkan Anda langsung menampilkan konten tanpa menunggu
untuk {i>font<i} web yang
akan diunduh.
Namun, kelemahan dari swap adalah menyebabkan pergeseran tata letak jika penggantiannya
{i>font<i} web dan {i>font<i} web yang ditentukan dalam CSS Anda sangat bervariasi dalam hal baris
tinggi, kerning, dan metrik {i>font<i} lainnya. Hal ini dapat memengaruhi CLS situs Anda jika
Anda tidak berhati-hati saat menggunakan petunjuk preload untuk memuat resource font web segera
mungkin, atau jika Anda tidak mempertimbangkan nilai font-display lainnya.
fallback
Nilai fallback untuk font-display merupakan kompromi antara
block dan swap. Tidak seperti swap, browser memblokir rendering font, tetapi
menukar teks pengganti hanya
untuk jangka waktu yang sangat singkat. Tidak seperti block,
tetapi, periode pemblokirannya sangat singkat.
Penggunaan nilai fallback dapat berfungsi dengan baik di jaringan yang cepat, di mana font web
dengan cepat, {i>font<i} web adalah jenis huruf yang digunakan segera pada
dan proses rendering awal. Namun, jika jaringan lambat, teks penggantian akan terlihat
pertama setelah periode pemblokiran berlalu, lalu menukarnya saat font web
tiba.
optional
optional adalah nilai font-display yang paling ketat, dan hanya menggunakan web
sumber daya font jika diunduh dalam waktu 100 milidetik. Jika font web menggunakan
lebih lama dari waktu yang dibutuhkan untuk memuat, link tidak digunakan di halaman, dan browser menggunakan
jenis huruf pengganti untuk navigasi saat ini ketika {i>font<i} web diunduh di
latar belakang dan ditempatkan
di {i>cache browser<i}.
Hasilnya, navigasi halaman berikutnya dapat langsung menggunakan {i>font<i} web, karena
aplikasi sudah didownload. font-display: optional menghindari pergeseran tata letak yang terlihat
dengan swap, namun beberapa pengguna tidak melihat font web jika font tersebut terlambat tiba
navigasi halaman awal.
Demo font
Menguji pengetahuan Anda
Kapan browser mengunduh sumber daya font web (dengan asumsi bahwa font tidak
diambil dengan perintah preload)?
Apa satu-satunya format (dan paling efisien) yang diperlukan untuk menyajikan web font ke semua browser modern?
Berikutnya: JavaScript pemisahan kode
Dengan pemahaman tentang pengoptimalan {i>font<i}, Anda kini dapat memindahkan modul berikutnya, yang mencakup topik yang berpotensi tinggi untuk ditingkatkan kecepatan pemuatan halaman awal bagi pengguna, dan yaitu untuk menunda pemuatan menggunakan JavaScript melalui pemisahan kode. Dengan melakukannya, Anda dapat mempertahankan {i>bandwidth<i} dan CPU pertentangan yang serendah mungkin selama fase startup halaman, yaitu periode waktu di mana pengguna sangat mungkin untuk berinteraksi dengannya.