Cara Mengatasi Ensure text remains visible during WebFont Load di Blog

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

  1. Login Blogger.
  2. Masuk ke TEMAEDIT HTML.
  3. Cari Code @font-face, Sekiranya seperti dibawah ini.
  4. @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
    }
  5. Tambahkan Code font-display:swap; . Simak dibawah ini.
  6. @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
    }
    kadang @font-face ada banyak, Untuk agar lebih optimal, Silakan tambahkan ke semua @font-face yang lain.
  7. Simpan Tema.

Sekarang lihat hasilnya di PageSpeed Insights. Mungkin itu cara mengatasi Ensure text remains visible during webfont load di blog. Sekian dan terima kasih

Cara Mengatasi Ensure text remains visible during WebFont Load di Blog
Wahyu Achmad
Her Blue Sky

Postingan Terkait

5 komentar

  1. Saya tidak berhasil menerapkan ini di template Viomagz. Apakah ada pengaturan lain sehingga bisa mengatasi hal tersebut?

    BalasHapus
    Balasan
    1. agan 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"

      Hapus
  2. Pas nerapin tips ini udah work untuk font ny, tapi masih kesisa bagian "/fontawesome-webfont", nh ini ngatasinnya gimana gan???

    BalasHapus
    Balasan
    1. font awesome kan ngambil luar link, bisanya seperti ini

      <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
      }

      Hapus
    2. Ganti URL_FONT_AWESOME_AGAN dengan url font awesome agan

      Hapus

Posting Komentar