Cara Efektif Mengatasi Keterlihatan Teks Saat Pemuatan Font Web

Ketika mengaudit website menggunakan webtool lighthouse seperti PageSpeed Insights dan Web.dev Measure, mungkin kita akan melihat beberapa kesalahan pada hasil audit yang ditampilkan, salah satunya adalah "Ensure text remains visible during webfont load" yaitu rekomendasi untuk memastikan teks tetap terlihat selama pemuatan font web dengan menggunakan fitur CSS font-display optional untuk memastikan teks terlihat oleh pengguna saat font web dimuat.

Sebenarnya ada cara yang lebih efektif untuk untuk mengatasi permasalahan pemuatan font (Ensure text remains visible during webfont load). Tapi sebelum saya jelaskan lebih detail mari kita simak penjelasan berikut:

Font atau webfont merupakan file besar pada website, umumnya webfont membutuhkan waktu pemuatan (load) yang lama. Oleh karena itu beberapa browser memanipulasi pemuatan font dengan menyembunyikan teks sampai font selesai dimuat sehingga menyebabkan FOIT (flash of unstyled text) pada halaman web atau dalam bahasa indonesia disebut sebagai flash teks tanpa gaya.[ads id="ads1"]
Dalam pengoptimalan website sebaiknya kita menghindari kilatan teks tak terlihat dengan menampilkan konten sesegera mungkin menggunakan font sistem.

Dari keterangan diatas sebenarnya solusi terbaik untuk mengatasi permasalah keterlihatan teks saat pemuatan font (Ensure text remains visible during webfont load) sudah kita temukan yaitu menggunakan font sistem.

Semua sistem seperti microsoft, android, linux dan sebagainya pada dasarnya sudah memiliki beberapa jenis font di sistem mereka. Yang perlu kita ketahui adalah jenis font web apa yang tersedia di semua OS (Operating System).

Tetapi jika situs web atau blog kamu memang harus menggunakan font khusus seperti fontawesome dan google fonts (fonts.gstatic.com) ikuti lebih lanjut panduan untuk mengatasi masalah keterlihatan teks saat pemuatan font web.
Ensure text remains visible during webfont load - Audit By-Lighthouse

Memastikan Teks Tetap Terlihat Selama Pemuatan Font Web

  1. Gunakan font sistem yang paling umum misalnya Arial, sans-serif
  2. Jika website menggunakan font google, import type font sesuai dengan kebutuhan situs web dan gunakan css &display:swap atau font-display:swap untuk memberi tahu browser agar memuat halaman dengan jenis font tersebut.
  3. Untuk fontawesome import font kedalam html situs web kemudian tambahkan fitus css font-display:swap
Lihat contoh pemuatan google font (fonts.gstatic.com) dengan css font-display:swap
<style>

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

</style>
Atau lihat contoh metode lainnya penerapan css font-display:swap pada google font (fonts.gstatic.com) 
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

Cara Menambahkan Css Font-display:swap ke Fontawesome

  1. Pertama import terlebih dahulu css fontawesome kedalam html website,
  2. Kemudian pada bagian @font-face tambahkan css font-display:swap,
  3. Lihat contoh penerapan css font-display:swap pada fontawesome.
<style>

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');

src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),

url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),

url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),

url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),

url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');

font-weight:normal;font-display:swap;font-style:normal}

</style>
Jika fitur css font-display:swap di terapkan dengan benar, insya allah masalah keterlihatan teks saat pemuatan font web (webfonts) akan teratasi. Namun perlu untuk diketahui bahwa tidak semua browser mendukung fitur css font-display:swap.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Gambar
Tahukah kamu apa itu " Discovered currently not indexed " dengan status " Excluded "? Discovered currently not indexed maksudnya adalah halaman (url) sudah ditemukan oleh google tetapi belum di-crawl, sedangkan status excluded adalah status url yang masuk dalam ketegori pengecualian atau di kecualikan. Biasanya halaman ( url ) yang dikecualikan juga tidak diindeks oleh google karena menurut google halaman (url) merupakan duplikat dari halaman yang diindeks, atau diblokir dari pengindeksan oleh beberapa mekanisme di situs web itu sendiri. Jika tag canonical url di terapkan dengan benar beberapa url atau halaman di situs web akan dikecualikan oleh crawler google, biasanya halaman yang dikecualikan merupakan halaman (url) yang memang tidak penting untuk diindeks seperi url ?m=1, ?m=0 dan /search. Pengecualian pada yang url seperti itu baik untuk situs web, dengan begitu url (halaman) duplikat akan terjaring kedalam keranjang pengecualian di search console. [ads id=...
Baca selengkapnya

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Gambar
Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu...
Baca selengkapnya

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)

Gambar
Google adsense menjadi terget utama kebanyakan blogger di dunia, pasalnya google adsense memberikan penghasilan kepada konten kreator melalui monetisasi konten blog dengan iklan adsense. Oleh karena itu bagi kamu yang baru saja memulai blogging khususnya yang ngeblog di platform blogger saya akan menunjukkan cara mendaftarkan blog anda ke google adsense agar dapat dimonetisasi dengan iklan adsense. Tapi sebelumnya harap perhatikan dan terapkan beberapa poin di bawah ini agar blog anda dapat dimonetisasi dengan iklan adsense. Syarat Agar Blog Diterima Adsense Untuk Monetisasi Daftarkan blog anda ke google adsense jika sudah rampung. Pastikan konten blog tidak berisi konten dewasa dan perjudian. Buat navigasi yang relevan dengan konten dan niche blog. Pastikan blog memiliki trafik organik. [ads id="ads1"] Jika ke empat poin di atas yang menjadi syarat kelayakan situs (blog) untuk dimonetisasi dengan iklan adsense sudah dipenuhi oleh blog anda maka blog sudah siap untuk didaftar...
Baca selengkapnya