Tahukah anda? Sebenarnya masalah ini mempunyai banyak nama... yaitu:
- Optimize CSS Delivery Font Google (Optimalkan pengiriman CSS untuk Font Googleapis)
- Render Blocking Font Google (Pemblokiran konten paruh atas untuk font Google)
- dan masih banyak lagi...
Sengaja saya menggunakan judul "Solusi dan cara mengatasi Render-Blocking Font Google di Blogger" agar kedua nama diatas sudah masuk ke judul saya dan tentunya memudahkan pengunjung untuk mendapatkan informasi ini.
Sebenarnya, masalah ini muncul karena anda masih menggunakan template bawaan blogger yang sudah jadul sekali... yang sama sekali tidak mobile friendly dan belum dioptimasi waktu loadnya.
Bukan cuma waktu load yang belum dioptimasi...
...tetapi SEOnya pun belum dioptimasi.
Jadi saya sangat menyarankan kepada anda untuk meninggalkan template ini dan beralih kepada template-template yang sudah banyak tersebar di internet sekarang.
Kembali ke topik... yaitu cara mengatasi masalah render blocking dan optimize css delivery tadi.
Google Fonts ini sebenarnya memang sudah bawaan dari bawaan template Bloggernya, jadi mau bagaimanapun setiap blog dengan template lama pasti memilikinya. Dan, script Google Fonts ini saya namakan script "siluman".
Lha? Kok bisa?
Coba sekarang anda cari di dalam template anda, script Google Fonts ini. Saya yakin 100% anda tidak akan menemuinya! Bahkan sekalipun anda sudah membuka blog lalu anda tekan Ctrl + U (Page Source), anda juga tidak akan menemuinya.
Jadi saya sendiri bingung... Darimana asal script itu?
Sudah kesana kemari mencari informasi tentang script ini... hanya ada 1 data yang saya dapatkan...
Script ini letaknya ada di dalam tag head
Hanya itu!
Setelah itu saya sudah mulai berputus asa... dan beralih untuk memikirkan sendiri bagaimana caranya.
Caranya...
Bagi anda yang masih belum terlalu paham dunia Web Design (khususnya CSS & HTML), saya sarankan tidak melakukannya.
Saya pun teringat, banyak blogger dulu (tahun 2012-2014) yang melakukan hal yang... mungkin kita menganggapnya agak aneh tapi cukup beresiko, yaitu mematikan Javascript bawaan blogger dengan cara 'memanipulasi' browser.
Langsung saya praktekan (memanipulasi tag head) hari itu juga. Dengan cara seperti ini:
Mengganti tag: <head>
Dengan tag: <head>
Lalu mengganti pula tag: </head>
Dengan tag: <!--<head/>-->
Lalu saya cek masalah render blocking dan CSS delivery tadi di Google PageSpeed Insights...
...ternyata berhasil!
Tetapi setelah saya cek blog saya, tampilannya menjadi seperti ini...
Tampilannya berantakan, beberapa widget tidak berfungsi, sidebar menjadi ke bawah, terkadang auto readmore tidak work, dan masih banyak lagi. Ternyata ini bukan dikarenakan script Google Fonts tadi, tetapi sebenarnya ada 3 script sekaligus yang saya matikan ketika saya 'memanupulasi' tag head tadi.
1 Script Google Font, 2 Script CSS bawaan Blogger. Jelas, tampilan blog saya menjadi berhamburan karena ada beberapa CSS yang mati.
Jadi, bila anda ingin mengembalikan tampilannya seperti semua, hanya ada 3 cara, yaitu:
- Menginspect apa yang salah, baru menambahkan CSS lagi secara manual,
- Mengembalikan lagi seperti semua tag headnya, dengan konsekuensi tetap mengalami masalah kecepatan di PageSpeed, atau
- Ganti template lainnya (yang lebih baru)
Sudah saya katakan di atas tadi, sebaiknya anda hanya melakukan cara ini bila sudah paham tentang HTML dan CSS. Bila tidak, mau tidak mau anda harus melakukan cara nomor 2 atau 3.
Selamat memperbaiki (bagi yang nomor 1) atau mencari template baru, semoga berhasil!