Pilih Synchronous Atau Asynchronous Google Fonts?

Sebelumnya pada beberapa postingan yang lalu, saya sudah membahas tentang Google Fonts ini. Permasalahan yang sering dihadapi para Blogger adalah render-blocking CSS dari Google Fonts ketika dicek di PageSpeed Insights. Hal ini menyebabkan semakin lambatnya loading blog karena peramban harus mengakses url css Google Fonts secara serentak atau bersamaan dengan elemen blog lainnya.

Yang sering Blogger lakukan dalam menggunakan Google Fonts ini yaitu menyimpan langsung link Google Fonts di bagian head blog. Hal itulah yang menyebabkan render-blocking CSS.

Nah untuk mengatasi render-blocking CSS dari Google Fonts ini adalah dengan memuat Google Fonts secara asynchronous. Postingan tentang asynchronous link Google Fonts ini silahkan simak pada url di bawah ini.

Nah yang menarik untuk dibahas di sini adalah penggunaan synchronous dan asynchronous Google Fonts. Kira-kira Anda mau pilih yang mana?

Sebelum Anda memilih, tentunya Anda harus mengetahui dahulu bagaimana synchronous atau asynchronous Google Fonts ini.

Synchronous Google Fonts

Seperti sudah saya utarakan pada pendahuluan di atas, hal ini paling banyak dilakukan Blogger yaitu langsung menyimpan link css Google Fonts di bagian head blog.

Hal baik dari memuat link Google Fonts secara synchronous ini adalah font akan langsung tampil ketika halaman web dimuat karena font dimuat secara serentak bersamaan dengan elemen blog lainnya sesuai pada pengaturan style CSS blog.

Hal kurang baiknya yaitu seperti saya katakan pada pendahuluan di atas yaitu akan menyebabkan loading blog lambat karena render-blocking CSS.

Asynchronous Google Fonts

Hal baik dari penggunaan Google Fonts secara asynchronous ini adalah dapat mengatasi render-blocking CSS dari Google Fonts sehingga loading blog menjadi lebih cepat karena font akan dimuat setelah semua elemen blog berhasil dimuat.

Hal kurang baiknya dari penggunaan Google Fonts secara asynchronous ini yaitu font tidak akan langsung tampil karena menunggu semua elemen lain berhasil dimuat yang disebut dengan Flash of Unstyled Text (FOUT). Ini semacam jeda dalam menampilkan font yang sementara sebelum font termuat maka beberapa browser akan menggantika dengan font default browser seperti Arial dan kemudian diganti dengan font pilihan kita setelah font berhasil dimuat, namun ada juga browser yang tidak menampilkan font (halaman menjadi kosong) sebelum font berhasil dimuat.

Namun hal ini tidak terlalu berlaku bagi yang memiliki koneksi cepat ditambah dengan cache browser sehingga bisa meminimalisir jeda dalam menampilkan font.

Silahkan Anda juga baca di sini: https://github.com/typekit/webfontloader#get-started

Dengan mengetahui kedua hal di atas mengenai pemuatan Google Fonts, maka kita bisa menentukan cara mana yang akan kita pilih untuk blog kita, apakah synchronous atau asynchronous?

Kalau saya sendiri menggunakan cara asynchronous untuk memuat Google Fonts. Bagaimana dengan Anda?