Cara Terbaru Mengatasi Ensure Text Remains Visible During Webfont Load

Ensure Text Remains Visible During Webfont Load ialah perayaan yang muncul biar anda menegaskan teks tetap tampakselama proses pemuatan font. Peringat ini muncul biasanya dikala anda melakukan test terhadap situs web pada Google Page Speed Insight.

Dalam bahasa Indonesia, peringatannya akan berbunyi mirip ini “Pastikan teks tetap tampakselama pemuatan font web“.

Pada artikel kali ini kita akan mengupas beberapa hal mengenai perayaan “Ensure Text Remains Visible During Webfont Load”. Sekaligus membahas mengenai cara mengatasinya.

Pertama-tama kita diskusikan terlebih dulu, mengapa Google memperhitungkan hal dalam speed test tools mereka. Kenapa hal ini penting. Untuk itu kita mesti membicarakan satu istilah gres, yaitu flash of invisible text.

Apa Itu Flash of Invisible Text?

Flash of Invisible Text yakni duduk perkara yang ditimbulkan oleh proses pemuatan webfont, yakni tidak terlihatnya text pada halaman website disebabkan font yang dipakai masih dalam proses pemuatan.

Umumnya font merupakan file yang berukuran besar, dan tentu saja karena besar maka akan membutuhkan waktu lama untuk diangkut.

acuan ensure text remains visible during webfont load

Nah, untuk menanggulangi hal ini, beberapa browser menyembunyikan teks sampai font selesai diangkut. Inilah yang mengakibatkan terjadinya Flash of Invisible Text.

Jika hal ini terjadi pada halaman website anda, maka akan muncul peringatan pada Google Page Speed Insight. Dan pasti akan besar lengan berkuasa pada skor Core Web Vitals anda.

Logika Penyelesaian

Jika anda ingin menyelesaikan problem ini, maka Anda dapat memperlihatkan konten kepada pengguna memakai font metode apalagi dahulu, lalu sehabis font selesai dimuat barulah font tata cara tersebut diganti.

Penerapan hal ini akan mengakibatkan Flash of Unstyled Text, yakni hadirnya text yang tidak memiliki style. Tapi hal ini jauh lebih baik dari pada text yang tidak tampaksama sekali selama proses pemuatan font

Cara Mengatasi Ensure Text Remains Visible During Webfont Load

Ada beberapa cara untuk mengatasi persoalan “Pastikan teks tetap tampakselama pemuatan font web” ini. Google sendiri pada dokumentasinya mengusulkan dua cara yang bisa anda kerjakan.

Font Display Swap

Teknik ini sesuai dengan logika penyelesaian yang telah disampaikan sebelumnya. Dan ini tergolong teknik yang paling mudah dijalankan.

Anda cuma perlu menyertakan

font-display: swap

Pada @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 tamat URL dari Google font yang anda pakai. Berikut ini parameternya :

&display=swap

Dan berikut ini teladan URLnya secara lengkap :

display=swap

" rel="stylesheet">

Pada WordPress, anda mampu melaksanakan hal ini dengan pertolongan plugin-plugin gratis yang banyak tersedia. Salah satunya yakni Autoptimize.

Autoptimize dan beberapa plugin lain dapat menerapkan Font Display Swap secara otomatis pada setiap Google Font yang anda pakai.

Tapi masalahnya agak sedikit rumit jikalau yang kita bicarakan adalah local font bukan Google font. Karena trik di atas harus anda kerjakan manual.

Preload Web Fonts

Alternatif solusi yang kedua dari Google yaitu dengan menerapkan rel preload seperti contoh berikut ini.

Dan ini pola penerapannya :

rel="preload"

href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>

Preload merupakan value dari atribut rel pada komponen . Preload memungkinkan Anda mendeklarasikan permintaan fetch di HTML.

Hal ini dapat digunakan untuk memutuskan sumber daya/resource yang diperlukan cepat pada halaman website Anda. Resource yang ingin dimuat lebih permulaan dalam page lifecycle, sebelum perenderan utama pada browser dimulai.

Hal ini menegaskan resource tersebut tersedia lebih permulaan dan tidak memblokir render halaman, dan pastinya pada risikonya akan mengembangkan penampilan halaman situs web tersebut.

Unload Web Font

Alternatif terakhir ini tidak tergolong dalam dokumentasi Google, tetapi bisa anda pakai. Tentu saja sesuai judulnya, teknik ini bermaksud untuk meniadakan 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 seharusnya dihapus saja atau jangan diangkut sama sekali semoga tidak mengusik tampilan situs web anda. Caranya dengan menciptakan 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 yakni function yang saya pakai untuk menghapus penggunan font icon pada plugin Elementor. Saya lebih menentukan 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 mesti anda ujicoba untuk menyaksikan yang mana yang paling sesuai untuk website anda.

Jika anda memiliki pertanyaan, usulan atau kritik sekalipun, jangan sungkan untuk menuliskan dikolom komentar ya, semoga saya mampu melakukan perbaikan.

Demikianlah postingan tentang Cara Mengatasi Ensure Text Remains Visible During Webfont Load. Semoga berguna

Seleb Indo News