Ensure Text Remains Visible During Webfont Load adalah peringatan yang muncul agar anda memastikan teks tetap terlihat selama proses pemuatan font. Peringat ini muncul umumnya saat anda melakukan test terhadap website pada Google Page Speed Insight.
Dalam bahasa Indonesia, peringatannya akan berbunyi seperti ini “Pastikan teks tetap terlihat selama pemuatan font web“.
Pada artikel kali ini kita akan mengupas beberapa hal mengenai peringatan “Ensure Text Remains Visible During Webfont Load”. Sekaligus membahas mengenai cara mengatasinya.
Pertama-tama kita bahas terlebih dahulu, mengapa Google memperhitungkan hal dalam speed test tools mereka. Kenapa hal ini penting. Untuk itu kita harus membahas satu istilah baru, yaitu flash of invisible text.
Apa Itu Flash of Invisible Text?
Flash of Invisible Text adalah masalah yang ditimbulkan oleh proses pemuatan webfont, yaitu tidak terlihatnya text pada halaman website disebabkan font yang digunakan masih dalam proses pemuatan.
Umumnya font merupakan file yang berukuran besar, dan tentu saja karena besar maka akan membutuhkan waktu lama untuk dimuat.
Nah, untuk mengatasi hal ini, beberapa browser menyembunyikan teks sampai font selesai dimuat. Inilah yang menyebabkan terjadinya Flash of Invisible Text.
Jika hal ini terjadi pada halaman website anda, maka akan muncul peringatan pada Google Page Speed Insight. Dan tentu akan berpengaruh pada skor Core Web Vitals anda.
Logika Penyelesaian
Jika anda ingin menyelesaikan masalah ini, maka Anda dapat menampilkan konten kepada pengguna menggunakan font sistem terlebih dahulu, kemudian setelah font selesai dimuat barulah font sistem tersebut diganti.
Penerapan hal ini akan memicu Flash of Unstyled Text, yaitu munculnya text yang tidak memiliki style. Tapi hal ini jauh lebih baik dari pada text yang tidak terlihat sama sekali selama proses pemuatan font
Cara Mengatasi Ensure Text Remains Visible During Webfont Load
Ada beberapa cara untuk mengatasi masalah “Pastikan teks tetap terlihat selama pemuatan font web” ini. Google sendiri pada dokumentasinya mengusulkan dua cara yang bisa anda lakukan.
Font Display Swap
Teknik ini sesuai dengan logika penyelesaian yang telah disampaikan sebelumnya. Dan ini termasuk teknik yang paling mudah dilakukan.
Anda hanya perlu menyertakan
font-display: swapPada @font-face yang anda gunakan. Berikut ini contoh code yang saya ambil dari dokumentasi Google :
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}Jika anda menggunakan Google Font anda tinggal menambahkan parameter pada akhir URL dari Google font yang anda gunakan. Berikut ini parameternya :
&display=swapDan berikut ini contoh URLnya secara lengkap :
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
Pada WordPress, anda dapat melakukan hal ini dengan bantuan plugin-plugin gratis yang banyak tersedia. Salah satunya adalah Autoptimize.
Autoptimize dan beberapa plugin lain dapat menerapkan Font Display Swap secara otomatis pada setiap Google Font yang anda gunakan.
Tapi masalahnya agak sedikit rumit kalau yang kita bicarakan adalah local font bukan Google font. Karena trik di atas harus anda lakukan manual.
Preload Web Fonts
Alternatif solusi yang kedua dari Google adalah dengan menerapkan rel preload seperti contoh berikut ini.
<link rel="preload" as="font">Dan ini contoh penerapannya :
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin> Preload merupakan value dari atribut rel pada elemen <link>. Preload memungkinkan Anda mendeklarasikan permintaan fetch di HTML.
Hal ini dapat digunakan untuk menentukan sumber daya/resource yang dibutuhkan cepat pada halaman website Anda. Resource yang ingin dimuat lebih awal dalam page lifecycle, sebelum perenderan utama pada browser dimulai.
Hal ini memastikan resource tersebut tersedia lebih awal dan tidak memblokir render halaman, dan tentu saja pada akhirnya akan meningkatkan performa halaman website tersebut.
Unload Web Font
Alternatif terakhir ini tidak termasuk dalam dokumentasi Google, tapi bisa anda gunakan. Tentu saja sesuai judulnya, teknik ini bertujuan untuk menghapus web font yang anda gunakan.
Saya pribadi pernah menggunakan teknik ini untuk pengerjaan web klien yang menggunakan CMS WordPress. Pada WordPress, banyak plugin yang memuat font tertentu yang pada prakteknya tidak digunakan.
Font-font seperti ini sebaiknya dihapus saja atau jangan dimuat sama sekali agar tidak mengganggu performa website anda. Caranya dengan membuat function baru untuk me-deregister font tersebut.
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}Contoh di atas adalah function yang saya gunakan untuk menghapus penggunan font icon pada plugin Elementor. Saya lebih memilih untuk menggunakan icon dalam bentuk svg saja agar ukurannya lebih kecil, sehingga font dari Elementor tersebut jadi tidak terpakai.
Dari semua cara di atas, tidak ada cara ideal yang pasti berhasil. Semuanya harus anda ujicoba untuk melihat yang mana yang paling cocok untuk website anda.
Jika anda memiliki pertanyaan, saran atau kritik sekalipun, jangan sungkan untuk menuliskan dikolom komentar ya, agar saya dapat melakukan perbaikan.
Demikianlah artikel tentang Cara Mengatasi Ensure Text Remains Visible During Webfont Load. Semoga bermanfaat
