KangJaz.com

Tempat Tips, Tutorial dan Source Code dari seorang newbie

Cara Optimasi Google Fonts pada Website

12 November 2018 | Kategori : Tutorial

Cara Optimasi Google Fonts pada Website - Hai hai hai sobat semua.. Senang rasanya pada kesempatan kali ini saya bisa kembali menyapa sobat semua. Oh iya, diantara sobat ada nggak yang berprofesi sebagai web developer ? jika ada pasti pernah menguji website bikinan sobat pada Google Pagespeed Insights untuk mengetahui apakah website yang sobat bikin sudah optimal atau belum.

google-font-optimization.png

Nah, jika sobat menggunakan jenis fonts external yang diambil dari Google Fonts pastinya sobat akan melihat sebuah notifikasi untuk mengoptimalkan pengiriman font-nya yang kurang lebih seperti pada gambar di bawah ini :

google-font-optimization-2.png

Hal itu tentu saja berdampak pada kecepatan render website yang kita buat. Nah, untuk itu kita harus mengatasinya dengan mengoptimalkan pengiriman css google font agar kecepatan website yang kita develop bisa sedikit ringan.

Bagaimana cara mengoptimalkan pengiriman font-nya ?

Untuk mengoptimalkan pengiriman css font, saya menggunakan bantuan Web Font Loader yang merupakan sebuah project yang dikembangkan oleh Google dan juga Typekit. Sehingga cara ini bisa berjalan di berbagai browser yang mendukung penggunaan @font-face.

Bagaimana cara penggunaan Web Font Loader ?

Untuk penggunaannya sendiri menurut saya cukup mudah kok sob, karena kita hanya tinggal mengubah pengiriman dari css ke javascript. Agar lebih jelas, silahkan sobat ikuti langkah-langkah di bawah ini :

  1. Copy jenis font

    Yang pertama silahkan sobat copy telebih dahulu jenis font yang sobat gunakan, sebagai contoh perhatikan penggalan script di bawah ini :

    Roboto:400,500,500i,700,700i" rel="stylesheet">

    Silahkan sobat copy pada bagian seperti yang saya tandai dengan warna biru

  2. Javascript untuk Web Font Loader

    Setelah sobat copy, silahkan sobat ketikkan script berikut ini tepat di atas tag

    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
    <script>
        WebFont.load({
            google: {
                  families: ['Roboto:400,500,500i,700,700i']
            }
          });
    </script>
    

    Jika sudah silahkan sobat paste jenis font dari css tadi ke javascript yang baru saja sobat tambahkan pada script yang saya beri tanda biru.

  3. Hapus CSS

    Nah, jika semua sudah dilakukan sekarang sobat bisa menghapus css font-nya ataupun menjadikannya komentar agar tidak dieksekusi ketika website dimuat. Kemudian silahkan simpan project website yang sobat develop.

Jika semua sudah sobat lakukan sekarang silahkan sobat cek kembali website kalian pada Google Pagespeed Insights dan pastinya sudah tidak ada lagi pesan pengoptimalan untuk font-nya.

Bagaimana jika kita menggunakan lebih dari satu jenis font ?

Jika sobat menggunakan lebih dari satu font, silahkan sobat gabungkan jenis font-nya seperti pada contoh script di bawah ini :

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
    WebFont.load({
        google: {
              families: ['Roboto:400,500,500i,700,700i', 'Abril+Fatface&subset=latin-ext']
        }
      });
</script>

Perlu sobat ketahui, metode ini memiliki kekurangan yaitu jika user tidak mengaktifkan javascript maka jenis font tidak akan termuat, untuk itu kita bisa mengatasinya dengan cara menggunakan tag noscript pada css font-nya. Sebagai contoh, sobat bisa lihat penggalan script di bawah ini :

<noscript>
   <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,500i,700,700i" rel="stylesheet">
</noscript>

Baik sobat saya rasa cukup ini yang bisa saya bagikan kali ini, semoga sedikit coretan ini bisa bermanfaat buat sobat semua dalam mengoptimasi google fonts pada website sobat semua.


Referensi : https://github.com/typekit/webfontloader