Mengontrol Performa Font dengan tampilan font

Rob Dodson

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

Perbedaan rendering font saat ini

Font Web memberi developer kemampuan untuk menggabungkan tipografi yang kaya ke dalam project mereka dengan konsekuensi bahwa jika pengguna belum memiliki jenis huruf, browser harus menghabiskan waktu untuk mendownloadnya. Karena jaringan dapat tidak stabil, waktu download ini berpotensi memengaruhi pengalaman pengguna secara negatif. Lagi pula, tidak ada yang akan peduli seberapa bagus teks Anda jika memerlukan waktu yang tidak wajar untuk ditampilkan.

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

Browser Waktu habis Pengganti Tukar
Chrome 35+ 3 detik Ya Ya
Opera 3 detik Ya Ya
Firefox 3 detik Ya Ya
Internet Explorer 0 detik Ya Ya
Safari Tanpa waktu tunggu T/A T/A
  • Chrome dan Firefox memiliki waktu tunggu tiga detik setelah teks ditampilkan dengan font pengganti. Jika font berhasil didownload, maka akhirnya penukaran terjadi dan teks dirender ulang dengan font yang dimaksud.
  • Internet Explorer tidak memiliki waktu tunggu yang mengakibatkan rendering teks langsung. Jika font yang diminta belum tersedia, font pengganti akan digunakan, dan teks dirender ulang nanti setelah font yang diminta tersedia.
  • Safari tidak memiliki perilaku waktu tunggu (atau setidaknya tidak ada yang melebihi waktu tunggu jaringan dasar).

Lebih buruk lagi, developer memiliki kontrol terbatas dalam memutuskan pengaruh aturan ini terhadap aplikasi mereka. Developer yang mengutamakan performa mungkin lebih memilih pengalaman awal yang lebih cepat yang menggunakan font pengganti, dan hanya memanfaatkan font web yang lebih bagus pada kunjungan berikutnya setelah font tersebut memiliki kesempatan untuk didownload. Dengan menggunakan alat seperti Font Loading API, Anda mungkin dapat mengganti beberapa perilaku browser default dan mendapatkan peningkatan performa, tetapi hal ini akan memerlukan penulisan JavaScript dalam jumlah yang tidak sedikit, yang kemudian harus di-inline ke dalam halaman atau diminta dari file eksternal, sehingga menimbulkan latensi HTTP tambahan.

Untuk membantu memperbaiki situasi ini, CSS Working Group telah mengusulkan deskriptor @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 ada yang diterapkan beberapa browser saat ini, font-display mengelompokkan masa pakai download font menjadi tiga periode utama.

  1. Periode pertama adalah periode pemblokiran font. Selama periode ini, jika bentuk 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, bentuk 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 bentuk font berhasil dimuat selama periode penukaran, bentuk font akan digunakan secara normal.
  3. Periode kegagalan font terjadi segera setelah periode pertukaran font. Jika bentuk font belum dimuat saat periode ini dimulai, maka ditandai sebagai gagal memuat, menyebabkan penggantian font normal. Jika tidak, bentuk font akan digunakan secara normal.

Memahami periode ini berarti Anda dapat menggunakan font-display untuk memutuskan cara font Anda dirender, bergantung pada apakah atau kapan font didownload.

Tampilan font mana yang tepat untuk Anda?

Untuk menggunakan deskripsi font-display, tambahkan ke aturan at @font-face 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 memberikan periode pemblokiran singkat pada tampilan font (3 detik direkomendasikan dalam sebagian besar kasus) dan periode penukaran tak terbatas. 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 bentuk font anonim dengan metrik yang serupa 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.

swap

swap memberikan periode pemblokiran nol detik dan periode penukaran tak terbatas pada tampilan font. Ini berarti 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 jika rendering teks dalam font tertentu penting untuk halaman, tetapi rendering dalam font apa pun masih akan mendapatkan pesan yang benar. Teks logo adalah kandidat yang bagus untuk penukaran karena menampilkan nama perusahaan menggunakan pengganti yang masuk akal akan membuat pesan tersebar, tetapi Anda nantinya akan menggunakan jenis huruf resmi.

fallback

fallback memberikan periode pemblokiran yang sangat kecil pada tampilan font (100 md atau kurang direkomendasikan dalam kebanyakan kasus) dan periode penukaran singkat (tiga detik direkomendasikan dalam kebanyakan kasus). Dengan kata lain, bentuk font dirender dengan pengganti terlebih dahulu jika tidak dimuat, tetapi font tersebut ditukar segera setelah dimuat. Namun, jika terlalu banyak waktu berlalu, penggantian akan digunakan untuk sisa waktu halaman. Penggantian adalah kandidat yang baik untuk hal-hal seperti isi teks yang Anda inginkan agar pengguna mulai membaca secepat mungkin dan tidak ingin mengganggu pengalaman mereka dengan menggeser teks saat font baru dimuat.

opsional

optional memberikan periode pemblokiran yang sangat kecil pada tampilan font (100 md atau kurang direkomendasikan dalam sebagian besar kasus) dan periode penukaran nol detik. Serupa dengan fallback, ini adalah pilihan yang baik saat font yang didownload lebih dari “bagus untuk dimiliki” tetapi tidak penting untuk pengalaman. Nilai opsional menyerahkannya ke browser untuk memutuskan apakah akan memulai download font, yang mungkin memilih untuk tidak melakukannya atau melakukannya sebagai prioritas rendah bergantung pada apa yang menurut browser terbaik bagi pengguna. Hal ini dapat bermanfaat dalam situasi ketika pengguna berada pada koneksi yang lemah dan menarik font ke bawah mungkin bukan penggunaan resource terbaik.

Dukungan browser

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

Demo

Lihat contoh untuk mencoba font-display. Bagi developer yang mengutamakan performa, ini bisa menjadi salah satu alat yang berguna di perlengkapan Anda.