Mengontrol Performa Font dengan tampilan font

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

Perbedaan rendering font saat ini

Web Fonts memberi developer kemampuan untuk menggabungkan tipografi yang beragam ke dalam project mereka, dengan konsekuensi bahwa jika pengguna belum memiliki jenis huruf, browser harus meluangkan waktu untuk mendownloadnya. Karena jaringan bisa tidak stabil, waktu download ini berpotensi memengaruhi pengalaman pengguna. Lagi pula, tidak ada yang akan peduli seberapa bagus tampilan teks Anda jika memerlukan waktu yang sangat lama untuk ditampilkan.

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

Browser Waktu tunggu Pengganti Tukar
Chrome 35 dan yang lebih baru 3 detik Ya Ya
Opera 3 detik Ya Ya
Firefox 3 detik Ya Ya
Internet Explorer 0 detik Ya Ya
Safari Tidak ada waktu tunggu T/A T/A
  • Chrome dan Firefox memiliki waktu tunggu tiga detik setelah teks ditampilkan dengan font penggantian. Jika font berhasil didownload, maka pada akhirnya pertukaran akan terjadi dan teks dirender ulang dengan font yang diinginkan.
  • Internet Explorer memiliki waktu tunggu nol detik yang mengakibatkan 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).

Parahnya, developer memiliki kontrol terbatas dalam menentukan pengaruh aturan ini terhadap aplikasinya. Developer yang mengutamakan performa mungkin lebih suka memiliki pengalaman awal yang lebih cepat yang menggunakan font penggantian, dan hanya memanfaatkan font web yang lebih bagus pada kunjungan berikutnya setelah memiliki kesempatan untuk mendownload. Dengan menggunakan alat seperti Font Loading API, Anda dapat mengganti beberapa perilaku browser default dan mencapai peningkatan performa, tetapi Anda harus menulis JavaScript dalam jumlah tidak sepele yang kemudian harus disisipkan ke dalam halaman atau diminta dari file eksternal, sehingga menimbulkan latensi HTTP tambahan.

Untuk membantu mengatasi situasi ini, CSS Working Group 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 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 dirender dengan tampilan font penggantian 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 dirender dengan bentuk font penggantian. Jika bentuk font berhasil dimuat selama periode pertukaran, bentuk font akan digunakan secara normal.
  3. Periode kegagalan font terjadi segera setelah periode pertukaran font. Jika tampilan font belum dimuat saat periode ini dimulai, font akan ditandai sebagai gagal dimuat, sehingga menyebabkan penggantian font normal. Jika tidak, tampilan font akan digunakan secara normal.

Dengan memahami periode ini, Anda dapat menggunakan font-display untuk menentukan cara font harus dirender, bergantung pada apakah font didownload atau tidak.

Tampilan font mana yang tepat untuk Anda?

Untuk menggunakan deskripsi font-display, tambahkan di aturan @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 auto | block | swap | fallback | optional berikut.

otomatis

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

memblokir

block memberi bentuk font periode pemblokiran singkat (dalam kebanyakan kasus 3 detik direkomendasikan) 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 mengandung "tinta". Nilai ini hanya boleh digunakan jika merender teks dalam jenis huruf tertentu diperlukan agar halaman dapat digunakan.

tukar

swap memberi bentuk font periode pemblokiran nol detik dan periode penukaran tak terbatas. Ini berarti browser segera menggambar teks dengan penggantian jika bentuk font tidak dimuat, tetapi menukar bentuk font segera setelah dimuat. Serupa dengan blok, nilai ini hanya boleh digunakan ketika 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 tersebar, tetapi nantinya Anda akan menggunakan jenis huruf resmi.

pengganti

fallback memberikan jenis font periode pemblokiran yang sangat singkat (biasanya 100 md atau kurang) dan periode pertukaran yang singkat (sebaiknya tiga detik). Dengan kata lain, bentuk font dirender dengan penggantian terlebih dahulu jika tidak dimuat, tetapi font ditukar segera setelah dimuat. Namun, jika terlalu banyak waktu, penggantian akan digunakan selama sisa masa aktif halaman. fallback adalah kandidat yang baik untuk hal-hal seperti teks isi, yang Anda inginkan pengguna mulai membaca sesegera mungkin dan tidak ingin mengganggu pengalaman mereka dengan menggeser teks saat font baru dimuat.

opsional

opsional memberi tampilan font periode pemblokiran yang sangat kecil (umumnya 100 md atau kurang direkomendasikan) dan periode pertukaran nol detik. Serupa dengan penggantian, ini adalah pilihan yang baik saat font yang didownload lebih “bagus untuk dimiliki” tetapi tidak penting untuk pengalaman. Nilai opsional membiarkan browser menentukan apakah akan memulai download font, yang mungkin dipilih untuk tidak dilakukan atau mungkin dilakukan sebagai prioritas rendah, bergantung pada apa yang menurutnya paling baik 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 tanda Fitur Platform Web Eksperimental pada Chrome 49 desktop, dan akan dikirimkan di Opera dan Opera untuk Android.

Demo

Lihat contoh untuk mencoba font-display. Untuk developer yang peduli tentang performa, aplikasi ini bisa menjadi alat yang lebih berguna di panel alat Anda.