Mengatasi &quot;Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web&quot;

Mengatasi "Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web" pada Google Page Speed Insight

Kecepatan merupakan faktor penting dalam SEO sebuah website saat ini. Dengan memiliki kecepatan loading yang baik, kesempatan untuk meraih lebih banyak pengunjung juga ssangat besar. Selain itu, pendapatan iklan pun akan jauh lebih besar.

Hal ini juga sudah dikatakan oleh Google AdSense dalam beberapa kesempatan bahwa semakin cepat website akan semakin bagus iklan.

Baca: Memaksimalkan Iklan di Musim Tertentu

Mengecek Kecepatan Website

Untuk mengecek nilai Kecepatan sebuah halaman website, banyak Webmaster atau Blogger menggunakan tool gratis dari Google yang dinamakan Google Page Speed Insight.

Cukup memasukan URL halaman yang ingin ditest, akan muncul berapa skor kecepatan di tampilan Mobile dan Desktop. Skor yang akan muncul adalah 1 - 100, dimana semakin besar skor maka kecepatan website anda semakin baik.

Selain itu, akan ada beberapa saran perbaikan jika skor kurang dari 100. Jika anda sudah memperbaiki saran pada hasil test, maka skor akan semakin membaik. Beberapa hal yang biasanya membuat skor Google PSI tidak 100 antara lain:

Defer offscreen images
Serve images in next-gen formats
Eliminate render-blocking resources
Ensure text remains visible during webfont load
dan lain-lain

Dan kali ini, saya akan membahas cara memperbaiki masalah kecepatan pada poin terakhir, yaitu Ensure text remains visible during webfont load atau Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web.

Mengatasi Ensure text remains visible during webfont load

Ensure text remains visible during webfont load muncul karena ada masalah perenderan font dari pihak ketiga seperti Google Font, Font Awesome, Type kit dan lainnya.

Untuk mengatasi hal ini sebenarnya cukup mudah, cukup menambahkan CSS font-display pada font tersebut.

Tapi untuk menambahkan font-display dengan nilai swap, anda perlu memanggil font menggunakan @font-face, bukan tag <link> ataupun @import.

Berikut tutorial lengkap mengatasi atau memperbaiki masalah Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web pada Google Pagespeed Insight.

Sayakan akan ibaratkan anda menggunakan font Poppins jenis reguler yang ada di Google Font. Dan untuk pemanggilan jenis font tersebut dengan tag <link> adalah:


<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"/>

Seperti saya jelaskan diatas, anda perlu mengubah pemanggilan font dengan tag <link> menjadi CSS @font-face. Jadi anda perlu membuka alamat font diatas (https://fonts.googleapis.com/css?family=Poppins) sehingga akan muncul kode CSS untuk font tersebut.


/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Karena saya hanya membutuhkan font Poppins jenis latin reguler, jadi saya hanya akan membutuh yang terakhir (tanda kuning), jadi saya paste kode di bawah ini pada template Web saya.


/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Kemudian, untuk mengatasi Ensure text remains visible during webfont load, cukup menambahkan CSS font-display:swap. Sehingga akan menjadi seperti di bawah ini.


/* latin */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Silahkan Save template, dan coba test kembali kecepatan Website anda di Google PSI.

Jika anda sekiranya perlu untuk melakukan preload pada font, maka copy kode di bawah ini dan paste sebelum </head>


<link href='https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2' as='font' crossorigin='crossorigin' rel="preload"  />

Ubah tanda kuning dengan font yang didapatkan pada jenis font anda di atas.

Update (May 14, 2019)

Google Fonts sekarang memungkinkan Anda mengontrol pemuatan font menggunakan parameter kueri display. Jadi cara diatas bisa disederhanakan, hanya dengan menambahkan query display pada Google Font yang anda muat dengan tag <link>.

Contoh:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Maka, font Roboto tersebut akan secara otomatis terkontrol pemuatannya dengan CSS font-display:swap

Selamat mencoba :)