Cara mengatasi Ensure text remains visible during webfont load, atau cara agar teks tetap terlihat selama memuat web font. Ketika kalian sedang melakukan uji website di PageSpeed Insights dan setelah selesai, muncul masalah Ensure text remains visible during webfont load. Itu artinya website kalian harus lebih dioptimalkan lagi untuk Font nya.
Kadang masalah sepele seperti ini, kurang diperhatikan, Namun ini juga berpengaruh dalam kecepatan website, sebenarnya masalah seperti ini sudah di jelaskan di Google Developer, mungkin kadang ada yang bingung dan masih kurang mengerti untuk mengatasi masalah ini.
Apa maksud dari Ensure text remains visible during webfont load ?
Artinya saat pengunjung atau visitor masuk ke website kalian, saat memuat Web, Font website kalian menjadi tidak terlihat dalam beberapa detik. Dan Google menyarakan ke kalian untuk terus memunculkan Font website saat Memuat.
Kemudian bagaimana cara mengasinya? Silakan kalian simak cara berikut ini.
Cara Mengatasi Ensure text remains visible during webfont load di Blog
- Login Blogger.
- Masuk ke TEMA › EDIT HTML.
- Cari Code @font-face, Sekiranya seperti dibawah ini.
- Tambahkan Code font-display:swap; . Simak dibawah ini.
- Simpan Tema.
@font-face{
font-family:'Roboto';
font-style:normal;
font-weight:400;
src:local('Roboto'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2)format('woff2');
unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}@font-face{
font-family:'Roboto';
font-display:swap;
font-style:normal;
font-weight:400;
src:local('Roboto'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2)format('woff2');
unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}Sekarang lihat hasilnya di PageSpeed Insights. Mungkin itu cara mengatasi Ensure text remains visible during webfont load di blog. Sekian dan terima kasih
Saya tidak berhasil menerapkan ini di template Viomagz. Apakah ada pengaturan lain sehingga bisa mengatasi hal tersebut?
BalasHapusagan bisa Hapus Javascript, CSS, dan Widget Bundle Bawaan kadang itu juga bisa mempengaruhi untuk fontnya, bisa cari saja di google "Hapus Javascript, CSS, dan Widget Bundle Bawaan"
HapusPas nerapin tips ini udah work untuk font ny, tapi masih kesisa bagian "/fontawesome-webfont", nh ini ngatasinnya gimana gan???
BalasHapusfont awesome kan ngambil luar link, bisanya seperti ini
Hapus<link src="URL_FONT_AWESOME AGAN " ... dst/>
itu di HAPUS namun silakan ambil urlnya
coba seperti ini
@font-face{
font-family:'Roboto';
font-display:swap;
font-style:normal;
font-weight:400;
src:local('Roboto'),local('Roboto-Regular'),url(URL_FONT_AWESOME AGAN)format('woff2');
unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}
Ganti URL_FONT_AWESOME_AGAN dengan url font awesome agan
Hapus