Cara Mengatasi Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web

Salah satu notifikasi perbaikan yang sering muncul di PageSpeed Insights adalah "Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web" atau dalam bahasa Inggris, "Ensure text remains visible during webfont load".

Ini disebabkan karena Google mengutamakan halaman blog yang dapat memberikan pengalaman terbaik kepada pengguna, salah satunya adalah loading font yang cepat.

Gubuk Pintar pun pernah mengalaminya dan telah berhasil mengatasi masalah ini. Kamu dapat melihat cara mengatasi pastikan teks tetap terlihat selama pemuatan font web yang Gubuk Pintar lakukan pada bagian selanjutnya dari artikel ini.

Daftar Isi

Penyebab Munculnya Diagnostik Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web Cara Mengatasi Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web Penutup

Penyebab Munculnya Diagnostik Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web

Setiap browser sejatinya membatasi lama waktu loading setiap font tetapi pada pengunjung blog yang memiliki koneksi internet sangat lambat, hal ini tidak berjalan dengan baik.

Meskipun kesalahan dasarnya ada pada koneksi lambat dari pengunjung, Google tetap menginginkan mereka memiliki pengalaman mengakses halaman yang baik dengan setidaknya dapat melihat tulisan yang ada dihalaman tersebut terlebih dahulu.

Disinilah mengapa diagnostik "Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web" muncul ketika blog mu gagal melakukan render font dalam waktu yang lebih cepat. Kondisi ini tentu saja berpengaruh terhadap SEO.

Berdasarkan informasi dari halaman Google Developer, situasi ini dapat diatas dengan mengatur cara render dari font yang blog mu gunakan dengan memanfaatkan kode font-display.

Ada beberapa macam aturan font-display yang dapat digunakan yaitu,

• Auto
  Auto menyesuaikan aturan standar yang dimiliki oleh setiap browser dalam memuat font. Oleh karena itu, dampaknya bisa berbeda-beda.
  
  
• Block
  Block memberikan waktu sekitar 3 detik untuk memuat font utama dan periode pertukaran ke font standar untuk waktu yang tak terbatas.
  
  Artinya, browser akan menampilkan teks dengan font standar terlebih dahulu ketika font utama belum dimuat dalam waktu 3 detik, tetapi akan menukarnya setelah font utama berhasil dimuat.
  
  Aturan ini akan membuat metrik anonim yang semirip mungkin dengan font utama. Block cocok apabila blog mu menampilkan jenis font dengan karakter tidak umum yang sangat penting untuk membantu pengunjung mengerti isi blog mu karena font standar tidak dapat menampilkannya.
  
  
• Swap
  Swap memberi waktu tidak lebih dari nol detik untuk memuat font utama dan periode pertukaran tak terbatas. Artinya, browser akan menampilkan teks dengan font standar terlebih dahulu ketika font utama belum dimuat, tetapi akan menukarnya setelah font utama berhasil dimuat.
  
  Ini cocok untuk logo teks dan semacamnya, dimana apabila terjadi pertukaran bentuk font pengunjung mu tidak akan begitu terganggu.
  
  
• Fallback
  Aturan ini memberikan waktu untuk menampilkan font utama dengan sangat singkat (kurang dari 100 ms) dengan periode pertukaran dengan font standar hanya sekitar 3 detik.
  
  Apabila dalam waktu 3 detik font utama belum berhasil dimuat, maka pengunjung tetap akan menggunakan font standar hingga mereka berpindah ke halaman lain atau melakukan refresh halaman
  
  Jika kamu ingin penunjung mu dapat mulai membaca secepat mungkin dan tidak terganggung dengan adanya perubahan tampilan font, ini adalah pilihan yang cocok.
  
  
• Optional
  Optional mirip dengan Fallback tetapi memiliki 'toleransi' yang lebih rendah. Aturan ini memberikan waktu untuk menampilkan font utama kurang dari 100 ms dengan periode pertukaran dengan font standar tidak lebih dari 0 detik.
  
  Bila isi blog mu sudah dapat terbaca dengan nyaman tanpa menggunakan font utama, ini adalah pilihan yang baik.
  

Berdasarkan pengalaman Gubuk Pintar, aturan yang cocok untuk digunakan yaitu Swap dan Fallback, dimana dari antara keduanya Fallback cenderung lebih direkomendasikan karena dapat memuat font dalam waktu yang lebih cepat tetapi memiliki toleransi yang cukup untuk memuat font utama.

Baca Juga: Cara Mengatasi Leverage Browser Caching Favincon.ico di Blogger

Cara Mengatasi Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web

Seperti yang telah dijelaskan sebelumnya, solusi dari permasalahan ini adalah dengan menggunakan aturan font-display. Untuk melakukannya, ikutilah cara berikut ini 

1. Masuk ke Edit Tema HTML blog mu
   
   
2. Cari kode @font-face yang contoh bentuk lengkapnya kurang lebih seperti berikut ini,
   
   

   @font-face {
     font-family: 'Arvo';
     font-display: auto;
     src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   }
   

   
   
3. Masukkan kode font-display: fallback; di dalam kode @font-face{...} seperti contoh berikut ini,
   
   

   @font-face {
     font-family: 'Arvo';
     font-display: fallback;
     src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   }
   

   
   Jika ingin menggunakan aturan Swap, kamu dapat mengganti kode font-display: fallback; menjadi font-display: swap;. Ingat, jangan gunakan keduanya secara bersamaan karena dapat menyebabkan error.
   
   
4. Terapkan langkah diatas untuk setiap font yang ada
   
   
5. Simpan Tema 
   

 

Baca Juga: Cara Menghilangkan Kode ?m=1 dan ?m=0 di URL Blogger

 

Penutup

Seperti itulah cara memperbaiki Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web di PageSpeed Insights. Semoga kini kamu sudah berhasil memperbaikinya dan meningkatkan nilai blog mu.

***

Apabila memiliki pertanyaan seputar artikel Cara Mengatasi Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web, silahkan tulis dikolom komentar ya.

Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!

Baca juga: