Ditulisan sebelumnya saya sudah membahas tentang Menganalisa First Meaningful Paint yang bisa dibaca disini: #2, melanjutkan yang sebelumnya kita akan menyelesaikan masalah Ensure text remains visible during webfont load.
Masalah
Kebanyakan developer menggunakan devices yang high-end, plus dengan koneksi internet yang stabil dan cepat bila sedang di kantor. Sedangkan mungkin target audience kita bukan hanya seorang developer, melainkan pengguna biasa yang menggunakan devices yang sesuai dengan kebutuhan sehari-harinya saja.
Sayangnya––mungkin tidak semua––kita sering kali menguji via device kita sendiri. Karena menggunakan CLI ribet dan automated via CI malas dilirik. Meskipun website kita hanya memakan waktu sekitar 2.8s untuk sampai ke Time to Interactive, tapi beginilah hasilnya bila diakses menggunakan jaringan non high-end.
Lihat di frame 1-3? Apa pentingnya untuk pengguna akhir tampilan seperti itu?
Custom font is not free
Hampir semua website menggunakan custom font untuk menjelaskan identitas brand nya. Website kita pun menggunakan custom font, sejauh ini baru 1 (Space Mono), walaupun nanti total ada 3 (Space Mono, Merriweather, dan Inter).
Sayangnya, menggunakan custom font tidak gratis, dalam konteks performa. Tentu tidak mungkin seluruh pengguna kita memiliki custom font kita dan bila kita menggunakan font bawaan system, maka––maksudnya––tidak mencerminkan brand kita, kecuali identitas brand kita menggunakan font bawaan system.
Sebagai contoh, Traveloka yang menggunakan Museo Sans yang sudah jelas tidak ada di komputer saya karena lisensi.
Dimana letak tidak gratisnya? Yakni: browser harus memuat file CSS terkait dengan font tersebut yang entah dimana. Local server, 3rd party services, dsb. Yang dampaknya, adanya kemungkinan latensi yang mempengaruhi pengalaman pengguna.
User gak peduli masalah teknikal, yang mereka peduli kenapa ini layar kosong?
Browser is smart enough
Bayangkan ketika user akses situs kita di Jogja dan situs kita memuat custom font dari layanan 3rd party yang tidak mendukung CDN misalnya, yang servernya berada di Jepang. Ada berapa detik kemungkinan travel time yang terjadi?
Browser, memberikan kita pilihan untuk optimasi performa disini. Rata-rata browser memberikan timeout sekitar 3 detik, yang artinya bila dalam 3 detik font tersebut gagal dimuat, maka lakukan sebagaimana seharusnya. Yang defaultnya kebanyakan browser, tampilkan teks "invisible" aja dulu.
Comic Sans MS merupakan font fallback ku karena I am designer hahaha.
Siapa juga yang ingin situsnya terlihat menggunakan Comic Sans MS ha?
Font Downloads timelines
Oke cool, ada 3 fase bagaimana browser memuat custom font kita.
block period
swap period
failure period
Block period adalah kondisi dimana bila font belum termuat, maka element lain harus tetap ditampilkan dan tulisan ditampilkan dalam "invisible" font fallback. Contoh seperti ini:
Swap period adalah kondisi dimana bila font tersebut belum termuat, maka tampilkan font fallback. Kondisi ini terjadi langsung setelah block period. Bila font berhasil dimuat, maka tampilkan font tersebut. Contoh seperti ini:
Yang menggunakan fallback "Tahoma" dan bila font tersebut berhasil dimuat maka tampilkan font yang seharusnya (Open Sans).
Failure period adalah kondisi dimana bila font tersebut gagal dimuat, maka gunakan font fallback. Bedanya dengan swap period adalah dikondisi ini, pemuatan font dinyatakan "gagal dimuat", bukan belum termuat. Ini contohnya:
Contoh diatas adalah perumpaan ketika font gagal termuat, yang dicontoh disini adalah karena akses terhadap file css nya saya block via uBlock. Looks more beautiful, right?
Solusi
Halaman web adalah tentang storytelling, tentang bagaimana kita menyusun informasi agar bisa mudah ditransfer kepada pengguna. Dan rata-rata, informasi tersebut kebanyakan berbentuk teks.
Solusi dari permasalahan disini adalah menggunakan property font-display, seperti yang digunakan oleh Tokopedia. Namun menggunakan font-display ada triknya, maka dari itu mengapa kita tidak langsung membahas inti terlebih dahulu.
Ada 5 nilai yang bisa digunakan di property tersebut:
auto
block
swap
fallback
optional
Auto berarti kita mengandalkan browser dalam memilih strategi untuk font-display, yang rata-rata adalah "block".
Block berarti kita menggunakan waktu 3 detik untuk bisa memuat font tersebut. Jika tidak, maka browser akan menampilkan "invisible" text selagi browser merender element lain. Lalu akan men-swap font tersebut bila berhasil dimuat.
Swap berarti kita tidak menggunakan waktu 3 detik tersebut, melainkan tampilkan font fallback terlebih dahulu lalu swap font bila berhasil termuat.
Fallback berarti kita menggunakan waktu timeout (block) namun lebih sedikit (< 100ms) dan waktu swap (3 detik). Yang artinya, browser akan menampilkan fallback terlebih dahulu selama 3 detik tersebut, bila gagal termuat setelah menunggu lama, maka akan terus menggunakan fallback font tersebut. Nanti kita bahas lebih lanjut dibawah
Optional berarti hampir sama dengan fallback, namun tidak ada period swap.
Mana yang harus saya gunakan?
Bila kagak setting property ini, pastinya auto dan block. Atau bila memang "font" tersebut "krusial" terhadap halaman tersebut alias waah user harus liat pake font ini nih, klo blm termuat fontnya mending jangan liat deh, ini cocok nya pakai block.
Bila fokus pada performa, menurut saya cocok menggunakan swap. Namun swap bisa menjadi bumerang untuk "pengalaman pengguna". Bayangkan ketika user sedang baca artikel di web kita, lalu setelah 8 detik misalnya font tersebut berubah jadi font yang kita maksudkan? Kaget dong. Keganggu dong. Yakan? Karena swap, tidak ada timeout dalam period swap ini.
Bila fokus pada performa, namun peduli juga dengan "pengalaman pengguna", maka gunakan fallback. Dari kasus swap, fallback menyelesaikan masalah swap karena font tidak akan di-swap sampai akhir hayat halaman. Jadi tidak akan menggangu pengalaman pengguna misalnya ketika membaca artikel menggunakan font comic sans ms setelah 5 detik. Karena sampai dia pindah halaman/reload, font nya akan tetap comic sans ms. Comic sans ms adalah font fallback ku untuk sans-serif.
Bila fokus pada performa, namun rada bodo amat dengan font, gunakan optional. Hampir sama dengan fallback, bedanya yaa bodo amat dengan font. Misal, kalo dikasih waktu 100ms sama browser untuk memuat font tersebut, dan gagal, maka yaudah. Gak usah ambil kesempatan waktu 3 detik untuk men-swap font, tampilkan saja font fallback. Gak usah berusaha kekeh menswap font.
Our choices
Kita menggunakan swap karena font tersebut mencerminkan identitas brand kita. Karena situs evilfactory.id adalah seperti "company profile", maka menurut kita swap adalah pilihan yang terbaik. Beda dengan situs berita/sejenisnya ya.
Meskipun kita pakai CDN, tapi kita gak terlalu yakin bahwa browser bisa memuat font kita selama 100ms. Itulah mengapa kita tidak menggunakan fallback. Kenapa tidak pakai optional? Karena kita bergantung dengan font tersebut.
Kenapa tidak menggunakan auto atau block? You know the answer.
Hasil
First contentful paint menjadi 1.4s dari yang sebelumnya 1.6s
First meaningful paint menjadi 1.4s dari yang sebelumnya 1.6s
Lihat frame diatas. Bila sebelumnya ada 3 frame kosong sebelum element muncul, sekarang frame kosongnya hanya 1 (ya masa langsung muncul element pas akses situs, kan? Di mobile btw)
Dan bila dilihat, maka frame 2 dan 3 (sampai seterusnya) berbeda. Di frame 3 lah proses "swap" font terjadi.
Kesimpulan
Peningkatan tetaplah peningkatan, meskipun hanya sedikit.
PR Lainnya
Minimize Critical Requests Depth. Belum pernah nyari tau.
Ingat kan klo gak disetting, berarti akan kembali ke default nya browser? Begitupula bila belum didukung oleh browser. Sejauh ini sih evergreen browser mendukung.
Ditulisan sebelumnya saya sudah membahas tentang Menganalisa First Meaningful Paint yang bisa dibaca disini: #2, melanjutkan yang sebelumnya kita akan menyelesaikan masalah Ensure text remains visible during webfont load.
Masalah
Kebanyakan developer menggunakan devices yang high-end, plus dengan koneksi internet yang stabil dan cepat bila sedang di kantor. Sedangkan mungkin target audience kita bukan hanya seorang developer, melainkan pengguna biasa yang menggunakan devices yang sesuai dengan kebutuhan sehari-harinya saja.
Sayangnya––mungkin tidak semua––kita sering kali menguji via device kita sendiri. Karena menggunakan CLI ribet dan automated via CI malas dilirik. Meskipun website kita hanya memakan waktu sekitar 2.8s untuk sampai ke Time to Interactive, tapi beginilah hasilnya bila diakses menggunakan jaringan non high-end.
Lihat di frame 1-3? Apa pentingnya untuk pengguna akhir tampilan seperti itu?
Custom font is not free
Hampir semua website menggunakan custom font untuk menjelaskan identitas brand nya. Website kita pun menggunakan custom font, sejauh ini baru 1 (Space Mono), walaupun nanti total ada 3 (Space Mono, Merriweather, dan Inter).
Sayangnya, menggunakan custom font tidak gratis, dalam konteks performa. Tentu tidak mungkin seluruh pengguna kita memiliki custom font kita dan bila kita menggunakan font bawaan system, maka––maksudnya––tidak mencerminkan brand kita, kecuali identitas brand kita menggunakan font bawaan system.
Sebagai contoh, Traveloka yang menggunakan Museo Sans yang sudah jelas tidak ada di komputer saya karena lisensi.
Dimana letak tidak gratisnya? Yakni: browser harus memuat file CSS terkait dengan font tersebut yang entah dimana. Local server, 3rd party services, dsb. Yang dampaknya, adanya kemungkinan latensi yang mempengaruhi pengalaman pengguna.
User gak peduli masalah teknikal, yang mereka peduli kenapa ini layar kosong?
Browser is smart enough
Bayangkan ketika user akses situs kita di Jogja dan situs kita memuat custom font dari layanan 3rd party yang tidak mendukung CDN misalnya, yang servernya berada di Jepang. Ada berapa detik kemungkinan travel time yang terjadi?
Browser, memberikan kita pilihan untuk optimasi performa disini. Rata-rata browser memberikan timeout sekitar 3 detik, yang artinya bila dalam 3 detik font tersebut gagal dimuat, maka lakukan sebagaimana seharusnya. Yang defaultnya kebanyakan browser, tampilkan teks "invisible" aja dulu.
Comic Sans MS merupakan font fallback ku karena I am designer hahaha.
Siapa juga yang ingin situsnya terlihat menggunakan Comic Sans MS ha?
Font Downloads timelines
Oke cool, ada 3 fase bagaimana browser memuat custom font kita.
Block period adalah kondisi dimana bila font belum termuat, maka element lain harus tetap ditampilkan dan tulisan ditampilkan dalam "invisible" font fallback. Contoh seperti ini:
Swap period adalah kondisi dimana bila font tersebut belum termuat, maka tampilkan font fallback. Kondisi ini terjadi langsung setelah block period. Bila font berhasil dimuat, maka tampilkan font tersebut. Contoh seperti ini:
Yang menggunakan fallback "Tahoma" dan bila font tersebut berhasil dimuat maka tampilkan font yang seharusnya (Open Sans).
Failure period adalah kondisi dimana bila font tersebut gagal dimuat, maka gunakan font fallback. Bedanya dengan swap period adalah dikondisi ini, pemuatan font dinyatakan "gagal dimuat", bukan belum termuat. Ini contohnya:
Contoh diatas adalah perumpaan ketika font gagal termuat, yang dicontoh disini adalah karena akses terhadap file css nya saya block via uBlock. Looks more beautiful, right?
Solusi
Halaman web adalah tentang storytelling, tentang bagaimana kita menyusun informasi agar bisa mudah ditransfer kepada pengguna. Dan rata-rata, informasi tersebut kebanyakan berbentuk teks.
Solusi dari permasalahan disini adalah menggunakan property
font-display, seperti yang digunakan oleh Tokopedia. Namun menggunakanfont-displayada triknya, maka dari itu mengapa kita tidak langsung membahas inti terlebih dahulu.Ada 5 nilai yang bisa digunakan di property tersebut:
Auto berarti kita mengandalkan browser dalam memilih strategi untuk font-display, yang rata-rata adalah "block".
Block berarti kita menggunakan waktu 3 detik untuk bisa memuat font tersebut. Jika tidak, maka browser akan menampilkan "invisible" text selagi browser merender element lain. Lalu akan men-swap font tersebut bila berhasil dimuat.
Swap berarti kita tidak menggunakan waktu 3 detik tersebut, melainkan tampilkan font fallback terlebih dahulu lalu swap font bila berhasil termuat.
Fallback berarti kita menggunakan waktu timeout (block) namun lebih sedikit (< 100ms) dan waktu swap (3 detik). Yang artinya, browser akan menampilkan fallback terlebih dahulu selama 3 detik tersebut, bila gagal termuat setelah menunggu lama, maka akan terus menggunakan fallback font tersebut. Nanti kita bahas lebih lanjut dibawah
Optional berarti hampir sama dengan fallback, namun tidak ada period swap.
Mana yang harus saya gunakan?
Bila kagak setting property ini, pastinya
autodanblock. Atau bila memang "font" tersebut "krusial" terhadap halaman tersebut alias waah user harus liat pake font ini nih, klo blm termuat fontnya mending jangan liat deh, ini cocok nya pakaiblock.Bila fokus pada performa, menurut saya cocok menggunakan
swap. Namunswapbisa menjadi bumerang untuk "pengalaman pengguna". Bayangkan ketika user sedang baca artikel di web kita, lalu setelah 8 detik misalnya font tersebut berubah jadi font yang kita maksudkan? Kaget dong. Keganggu dong. Yakan? Karenaswap, tidak ada timeout dalam periodswapini.Bila fokus pada performa, namun peduli juga dengan "pengalaman pengguna", maka gunakan
fallback. Dari kasusswap,fallbackmenyelesaikan masalahswapkarena font tidak akan di-swap sampai akhir hayat halaman. Jadi tidak akan menggangu pengalaman pengguna misalnya ketika membaca artikel menggunakan font comic sans ms setelah 5 detik. Karena sampai dia pindah halaman/reload, font nya akan tetap comic sans ms. Comic sans ms adalah font fallback ku untuk sans-serif.Bila fokus pada performa, namun rada bodo amat dengan font, gunakan
optional. Hampir sama denganfallback, bedanya yaa bodo amat dengan font. Misal, kalo dikasih waktu 100ms sama browser untuk memuat font tersebut, dan gagal, maka yaudah. Gak usah ambil kesempatan waktu 3 detik untuk men-swap font, tampilkan saja font fallback. Gak usah berusaha kekeh menswap font.Our choices
Kita menggunakan
swapkarena font tersebut mencerminkan identitas brand kita. Karena situs evilfactory.id adalah seperti "company profile", maka menurut kitaswapadalah pilihan yang terbaik. Beda dengan situs berita/sejenisnya ya.Meskipun kita pakai CDN, tapi kita gak terlalu yakin bahwa browser bisa memuat font kita selama 100ms. Itulah mengapa kita tidak menggunakan
fallback. Kenapa tidak pakaioptional? Karena kita bergantung dengan font tersebut.Kenapa tidak menggunakan
autoataublock? You know the answer.Hasil
Dan bila dilihat, maka frame 2 dan 3 (sampai seterusnya) berbeda. Di frame 3 lah proses "swap" font terjadi.
Kesimpulan
Peningkatan tetaplah peningkatan, meskipun hanya sedikit.
PR Lainnya
Hasil Lighthouse terbaru
Bisa diakses disini
Can I Use
font-display?Ingat kan klo gak disetting, berarti akan kembali ke default nya browser? Begitupula bila belum didukung oleh browser. Sejauh ini sih evergreen browser mendukung.
Referensi
Simple Demo (untuk simulasi)