Mengontrol Performa Font dengan tampilan font

Rob Dodson

Menentukan perilaku font web saat sedang dimuat dapat menjadi teknik penyesuaian performa yang penting. Deskripsi tampilan font baru untuk @font-face memungkinkan developer menentukan cara font web mereka dirender (atau diganti), bergantung pada waktu yang diperlukan untuk memuat font.

Perbedaan rendering font saat ini

Web Fonts memberikan kemampuan kepada developer untuk memasukkan tipografi yang beragam ke dalam project mereka dengan konsekuensi, yaitu jika pengguna belum memiliki jenis huruf, browser harus meluangkan waktu untuk mendownloadnya. Karena jaringan bisa saja tidak stabil, waktu download ini berpotensi memengaruhi pengalaman pengguna secara negatif. Lagi pula, tidak ada yang akan peduli seberapa cantik teks Anda jika membutuhkan waktu yang sangat lama untuk ditampilkan!

Untuk mengurangi beberapa risiko download font yang lambat, sebagian besar browser menerapkan waktu tunggu setelah font pengganti akan digunakan. Ini adalah teknik yang berguna, tetapi sayangnya browser berbeda dengan penerapan sebenarnya.

• Chrome dan Firefox memiliki waktu tunggu tiga detik setelah teks ditampilkan dengan font pengganti. Jika font berhasil didownload, pertukaran akan terjadi dan teks dirender ulang dengan font yang dimaksud.
• Internet Explorer memiliki waktu tunggu nol detik yang menghasilkan rendering teks langsung. Jika font yang diminta belum tersedia, penggantian akan digunakan, dan teks akan dirender ulang nanti setelah font yang diminta tersedia.
• Safari tidak memiliki perilaku waktu tunggu (atau setidaknya tidak ada yang melebihi waktu tunggu jaringan dasar pengukuran).

Untuk memperburuk masalah, developer memiliki kontrol terbatas dalam menentukan pengaruh aturan ini terhadap aplikasi mereka. Developer yang mengutamakan performa mungkin lebih memilih pengalaman awal yang lebih cepat yang menggunakan font penggantian, dan hanya memanfaatkan font web yang lebih bagus pada kunjungan berikutnya setelah sempat mendownload. Dengan menggunakan alat seperti Font Loading API, Anda dapat mengganti sebagian perilaku browser default dan mencapai peningkatan performa. Namun, hal ini mengakibatkan penggunaan JavaScript dalam jumlah yang sangat kecil yang kemudian harus dimasukkan ke dalam halaman atau diminta dari file eksternal, sehingga menimbulkan latensi HTTP tambahan.

Untuk membantu memperbaiki situasi ini, Kelompok Kerja CSS telah mengusulkan deskripsi @font-face baru, font-display, dan properti yang sesuai untuk mengontrol cara font yang dapat didownload dirender sebelum dimuat sepenuhnya.

Linimasa download font

Serupa dengan perilaku waktu tunggu font yang sudah ada yang diterapkan beberapa browser saat ini, font-display membagi masa aktif download font menjadi tiga periode utama.

1. Periode pertama adalah periode pemblokiran font. Selama periode ini, jika tampilan font tidak dimuat, elemen apa pun yang mencoba menggunakannya harus merender dengan bentuk font pengganti yang tidak terlihat. Jika bentuk font berhasil dimuat selama periode pemblokiran, jenis font akan digunakan secara normal.
2. Periode pertukaran font terjadi segera setelah periode pemblokiran font. Selama periode ini, jika bentuk font tidak dimuat, elemen apa pun yang mencoba menggunakannya harus merender dengan bentuk font pengganti. Jika tampilan font berhasil dimuat selama periode pertukaran, tampilan font akan digunakan secara normal.
3. Periode kegagalan font terjadi segera setelah periode pertukaran font. Jika bentuk font belum dimuat saat periode ini dimulai, tampilan font akan ditandai sebagai gagal dimuat, sehingga menyebabkan penggantian font normal. Jika tidak, tampilan font akan digunakan seperti biasa.

Memahami periode ini berarti Anda dapat menggunakan font-display untuk menentukan bagaimana font Anda harus dirender, bergantung pada apakah font tersebut didownload atau tidak.

Tampilan font mana yang tepat untuk Anda?

Untuk menggunakan deskriptor font-display, tambahkan @font-face at-rules Anda:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display saat ini mendukung rentang nilai berikut auto | block | swap | fallback | optional.

otomatis

auto menggunakan strategi tampilan font apa pun yang digunakan agen pengguna. Sebagian besar browser saat ini memiliki strategi default yang mirip dengan block.

memblokir

block memberi tampilan font periode pemblokiran yang singkat (3 detik direkomendasikan dalam sebagian besar kasus) dan periode penukaran tanpa batas. Dengan kata lain, browser menggambar teks "tidak terlihat" terlebih dahulu jika font tidak dimuat, tetapi menukar bentuk font segera setelah dimuat. Untuk melakukannya, browser membuat tampilan font anonim dengan metrik yang mirip dengan font yang dipilih tetapi dengan semua glyph yang tidak berisi "tinta". Nilai ini hanya boleh digunakan jika rendering teks dalam jenis huruf tertentu diperlukan agar halaman dapat digunakan.

tukar

swap memberi tampilan font periode pemblokiran nol detik dan periode penukaran tanpa batas. Artinya, browser segera menggambar teks dengan penggantian jika bentuk font tidak dimuat, tetapi menukar bentuk font segera setelah dimuat. Serupa dengan block, nilai ini hanya boleh digunakan saat merender teks dalam font tertentu penting untuk halaman, tetapi rendering dalam font apa pun akan tetap mendapatkan pesan yang benar. Teks logo adalah kandidat yang baik untuk penukaran karena menampilkan nama perusahaan menggunakan penggantian yang wajar akan membuat pesan tersampaikan, tetapi pada akhirnya Anda akan menggunakan jenis huruf resmi.

pengganti

fallback memberi tampilan font periode pemblokiran yang sangat kecil (100 md atau kurang disarankan dalam sebagian besar kasus) dan periode pertukaran yang singkat (disarankan tiga detik untuk sebagian besar kasus). Dengan kata lain, jenis font dirender dengan penggantian terlebih dahulu jika tidak dimuat, tetapi font tersebut ditukar segera setelah dimuat. Namun, jika terlalu banyak waktu berlalu, penggantian akan digunakan selama sisa masa aktif halaman. Penggantian adalah kandidat yang baik untuk hal-hal seperti teks isi di mana Anda ingin pengguna mulai membaca sesegera mungkin dan tidak ingin mengganggu pengalaman mereka dengan menggeser teks saat font baru dimuat.

opsional

opsional memberi bentuk font periode pemblokiran yang sangat kecil (100 md atau kurang direkomendasikan dalam sebagian besar kasus) dan periode penukaran nol detik. Serupa dengan fallback, ini adalah pilihan yang bagus saat font download lebih “bagus untuk dimiliki” tetapi tidak penting untuk pengalaman. Nilai opsional menyerahkan waktu kepada browser untuk memutuskan apakah akan memulai download font, yang mungkin memilih untuk tidak dilakukan atau mungkin melakukannya sebagai prioritas rendah, bergantung pada apa yang menurutnya terbaik bagi pengguna. Hal ini dapat berguna dalam situasi saat pengguna sedang dalam koneksi yang lemah dan menarik font ke bawah mungkin bukan penggunaan resource terbaik.

Dukungan browser

font-display saat ini berada di belakang tanda Fitur Platform Web Eksperimental di Chrome 49 versi desktop, dan diluncurkan di Opera dan Opera untuk Android.

Demo

Lihat contoh untuk mencoba font-display. Bagi developer yang mempertimbangkan performa, ini bisa menjadi satu alat yang lebih berguna di panel menu Anda.