Jujur saja, sampai sekarang saya tidak menggunakan font eksternal di blog Kode Jarwo. Hal tersebut dilatar belakangi oleh efek yang ditimbulkan darinya, antara lain seperti loading yang menjadi lambat, skor di PageSpeed Insights menurun, dan masalah loading lainnya.
Pada template terbaru saya yaitu Jarwo HydroMagz, saya menggunakan font eksternal dari Google yang bernama Source Sans Pro. Walaupun menggunakan font eksternal, speed template tersebut tetap bagus, bahkan sempurna. Bisa anda lihat pada gambar berikut:
Apa teknik rahasia yang saya gunakan?
Saya tidak menggunakan teknik rahasia apapun, bahkan teknik dan cara ini saya dapat pertama kali di Google.
Kenapa anda belum tau? Karena anda malas mencari dan membaca, yang anda inginkan hanya menanyakan kepada yang sudah "pro", dan langsung mendapatkan jawabannya tanpa mengetahui apa penyebab dan latar belakang masalahnya.
Langsung saja, berikut beberapa cara yang saya pakai agar speed tetap terjaga walaupun menggunakan font eksternal, dengan kata lain anda memasang yang versi ringannya.
1. Metode Inline
Biasanya, bentuk script yang anda gunakan untuk memasang font eksternal di blog kurang lebih seperti ini bentuknya
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
Kode diatas merupakan bentuk "eksternal". Sekarang, kita akan membuatnya "internal" dengan cara membuatnya menjadi inline.
Untuk caranya, coba anda lihat contoh kode diatas, lihat pada bagian link yang saya beri mark kuning. Buka link tersebut pada new tab. Nanti akan muncul beberapa kode CSS.
Copy semua kode tersebut, lalu pastekan di dalam tag b:skin. Jangan lupa untuk menghapus link diatas yang saya beri mark kuning tadi ya...
Simpan template dan coba anda cek kecepatan loading blog anda.
1. Pemberian atribut ASYNC
Cara ini cukup mudah, anda hanya perlu menambahkan atribut ASYNC pada tag LINK untuk font eksternalnya. Berikut contohnya:
<link async='async' href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
Simpan template. Cara diatas cukup ampuh untuk mengatasi segala macam masalah loading blog, karena font akan dimuat secara asynchronous, alias dimuat belakangan. Untuk lebih jelasnya, silakan anda baca pada artikel berikut: Perbedaan ASYNC dengan DEFER.
2. Pengubahan letak tag
Biasanya, anda disuruh untuk meletakkan kode font eksternal ini di dalam tag head, sehingga strukturnya kurang lebih menjadi seperti ini:
<html>
<head>
...
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
</head>
<body>
...
</body>
</html>
Anda dapat mengubah letaknya menjadi diatas /body, agar font dimuat setelah keseluruhan halaman telah selesai dimuat, sehingga kurang lebih strukturnya menjadi seperti ini:
<html>
<head>
...
</head>
<body>
...
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
</body>
</html>
Simpan template.
3. Menggunakan teknik Defer CSS
Nah yang terakhir ini saya yakin sudah pada tau, yaitu menggunakan teknik defer CSS dengan Javascript. Caranya cukup mudah, cukup masukkan kode berikut tepat diatas /body:
<script type='text/javascript'>//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link Font CSSnya");
//]]></script>
Sampai sekarang, hanya ketiga cara diataslah yang saya gunakan pada saat membuat template. Mungkin yang paling ampuh menurut saya adalah cara yang pertama, yaitu inline, cara lainnya memiliki beberapa kekurangan dan kadang tidak work.