Tutorial

Optimasi Performa Dengan Font Subsetting

Yudy Ananda

Font subsetting adalah proses optimasi dengan cara menghapus fitur-fitur yang tidak diperlukan dari sebuah web font. Dengan begitu ukuran file-nya bisa jadi jauh lebih ramping. Teknik ini pada umumnya diimplementasikan ketika font tersebut di host secara mandiri.

Adapun alasan utamanya adalah ukuran font itu sendiri. Jika jauh melampaui dari yang disarankan maka dikhawatirkan akan memberikan implikasi yang kurang baik pada performa website.

Glyph vs performa

Font pada dasarnya adalah kumpulan glyph, atau rangkaian simbol/karakter yang beragam. Misalnya saja huruf kecil, kapital dan simbol-simbol khusus lainnya. Sebagai illustrasi, dibawah ini adalah glyph yang terdapat pada spesimen font roboto.

Glyph yang dimiliki font Roboto
Glyph font Roboto

Walaupun terlihat banyak pada praktiknya hanya sebagian kecil saja—simbol/karakter—yang benar-benar dipakai oleh aplikasi, apalagi kalau kontennya hanya bersifat lokal. Lalu mau diapakan sisanya?

Masalahnya bukan cuma mubazir. Semakin banyak glyph maka semakin besar juga ukuran filenya. Sebagai catatan, rata-rata font berukuran antara 100-200 KB. Bayangkan kalau memakai 3-4 varian, berapa besar jadinya file yang harus diunduh oleh pengunjung setiap membuka halaman web?

Optimasi

Diantara optimasi yang disarankan font subsetting bisa jadi yang paling masuk akal, karena memungkinkan desainer atau pun pengembang untuk bisa sedikit lebih bebas dalam menggunakan custom font. Subsetting ini sendiri bisa dilakukan dengan 2 cara, yaitu otomatis atau manual.

Kalau pilih otomatis maka kamu hanya perlu menggunakan layanan Google Fonts saja, sisanya biarkan teknologi mereka yang bekerja. Nah, untuk yang menyimpan font-nya di server sendiri maka tidak ada pilihan lain kecuali melakukan langkah-langkah berikut ini.

Instalasi

Proses manipulasi font ini memerlukan Python—beserta package installer pip—dan Node.js—beserta package manager npm, oleh karena itu pastikan semuanya sudah terinstal dengan baik.

Jika sudah kita akan melakukan instalasi 3 modul Python fonttools, zopfli dan brotli menggunakan pip.

Buka konsol lalu jalankan

pip install fonttools zopfli brotli

Selanjutnya pasang pustaka javascript bernama glyphhanger.

npm install -g glyphhanger

Glyph list

Langkah pertama yang dilakukan setelah proses instalasi selesai adalah membuat daftar glyph atau karakter font yang digunakan oleh aplikasi kita.

glyphhanger http://localhost > glyphs.txt

Pada contoh di atas glyphhanger akan memindai simbol/karakter yang digunakan oleh localhost. Supaya praktis, kita akan menyimpan _output_nya di sebuah file teks. Oleh karena itulah ditambahkan > glyphs.txt di akhir perintahnya.

Oh ya untuk nama host dan filenya boleh disesuaikan sesuai kebutuhan...

Subset

Daftar karakter yang tersimpan di glyphs.txt tadi selanjutnya akan digunakan oleh fonttools sebagai parameter, dimana karakter yang tidak ada dalam daftar tersebut akan di hapus oleh script ini.

Simpan font yang akan dirubah dalam direktori yang sama dimana glyph.txt berada. Buka konsol tepat di direktori tersebut.

pyftsubset [FILE_FONT] --unicodes-file=[FILE_GLYPH] --flavor=[FONT_OUTPUT]

Sintaksnya adalah pyftsubset, dikuti file dari font yang akan dimanipulasi. lalu disusul --unicodes-file= dengan value file daftar karakter, dan yang terakhir adalah parameter --flavor= dengan value jenis font yang dikehendaki—ttf, woff, woff2.

Sum

Seberapa besar perbandingannya? Jawabannya tentu bisa bervariasi, tapi sebagai studi kasus subset dengan glyph dari hobbious.com bisa merubah ukuran roboto regular dari 165 KB menjadi 8 KB.

Dengan hasil yang bisa dibilang signifikan font subsetting diharapkan menjadi solusi ketika font menyebabkan performance budget yang melebihi quota. Desainer senang, pengembang pun tentang.

Ciao...

Ikon penanda buku
Performance