Cara Mengoptimalkan Pengiriman Google Font CSS valid HTML5
Jika anda seorang pengembang web atau minimal pemilik website maka pastilah anda menginginkan agar blog anda tampil SEO baik khususnya masalah kinerja atau kecepatan loading halaman blog.
Pastilah Anda pernah menguji website Anda di Google Page Speed Insights, Anda mungkin telah melihat pesan seperti ini:
Dampaknya tentulah mengurangi kecepatan loading halaman blog, jadi agar itu tidak terjadi adalah kita harus mengatasi Cara Mengoptimalkan Pengiriman Google Font CSS valid HTML5 sehingga dapat meningkatkan kecepatan halaman blog. Disini saya menggunakan bantuan Web Font Loader - sebuah proyek bersama antara Google dan Adobe Typekit, artinya semua Browser yang mendukung @font-face bisa menggunakan ini.
Pada jaringan broadband yang normal/baik, menunda pemuatan font memang hanya akan menghemat sedikit waktu. Tapi pada perangkat mobile - terutama perangkat 3G, itu akan memberikan render halaman lebih cepat. Kecepatan halaman yang lebih baik pada perangkat mobile berarti lebih dari setengah dari pemirsa potensial Anda akan bertahan di website Anda. Teknisnya adalah Web Font Loader akan melakukan penundaan pemuatan Google Fonts sampai setelah bagian lain dari halaman sudah mulai membuat.
Apa Untung Ruginya dengan menggunakan Web Font Loader?
Keuntungannya selain yang telah dijelaskan diatas yaitu Google Fonts akan ditunda pemuatannya setelah bagian lain dari halaman sudah dimuat. Lalu keuntungan lainnya adalah anda bukan hanya dapat menggunakannya dengan Google Fonts, tetapi juga Typekit, Fontdeck, atau Fonts.com. Sedangkan kekurangannya adalah metode ini menggunakan JavaScript, sehingga apabila penggunaan JavaScript menjadi masalah tersendiri maka berpengaruh terhadap penggunaan metode Web Font Loader.
Lalu Bagaimana Menggunakan Web Font Loader?
Silahkan lihat link CSS apa yang menjadi masalah dan diminta dioptimalkaan pengiriman CSS pada hasil Google PageSpeed Insights, sebagai contoh kasus pada blog ini adalah link dibawah ini :
Silahkan ubah menjadi seperti dibawah ini, tujuannya untuk menonaktifkan link tersebut terlebih dahulu :
Lalu, copy kode dibawah ini tepat diatas kode
Ubah yang ditanda berwarna kuning sesuai font yang anda gunakan, selain itu juga apabila anda menggunakan Google Font lebih dari satu maka bisa digabungkan dalam satu script seperti dibawah ini :
Jika sudah, Save template anda. Lalu coba kembali lakukan test PageSpeed Insights kembali dan semestinya masalah diatas sudah teratasi.
Demikian artikel dengan judul Cara mengoptimalkan pengiriman Google Font CSS agar valid HTML5.
REFERENSI :
Pastilah Anda pernah menguji website Anda di Google Page Speed Insights, Anda mungkin telah melihat pesan seperti ini:
Optimalkan Pengiriman CSS yang berikut: .................Jika Anda memuat Google Font melalui link style sheet di dibawah kode
<head>, maka tidak diragukan lagi bahwa link file css ekternal tersebut akan mengalami render-blocking. Contoh saja awalnya di blog ini pun mengalaminya yaitu link dibawah ini :<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,700,500,600' rel='stylesheet' type='text/css'/>Dampaknya tentulah mengurangi kecepatan loading halaman blog, jadi agar itu tidak terjadi adalah kita harus mengatasi Cara Mengoptimalkan Pengiriman Google Font CSS valid HTML5 sehingga dapat meningkatkan kecepatan halaman blog. Disini saya menggunakan bantuan Web Font Loader - sebuah proyek bersama antara Google dan Adobe Typekit, artinya semua Browser yang mendukung @font-face bisa menggunakan ini.
Baca juga : Cara Menggunakan Google Font pada BlogKenapa Harus Menggunakan Web Font Loader?
Pada jaringan broadband yang normal/baik, menunda pemuatan font memang hanya akan menghemat sedikit waktu. Tapi pada perangkat mobile - terutama perangkat 3G, itu akan memberikan render halaman lebih cepat. Kecepatan halaman yang lebih baik pada perangkat mobile berarti lebih dari setengah dari pemirsa potensial Anda akan bertahan di website Anda. Teknisnya adalah Web Font Loader akan melakukan penundaan pemuatan Google Fonts sampai setelah bagian lain dari halaman sudah mulai membuat.
Apa Untung Ruginya dengan menggunakan Web Font Loader?
Keuntungannya selain yang telah dijelaskan diatas yaitu Google Fonts akan ditunda pemuatannya setelah bagian lain dari halaman sudah dimuat. Lalu keuntungan lainnya adalah anda bukan hanya dapat menggunakannya dengan Google Fonts, tetapi juga Typekit, Fontdeck, atau Fonts.com. Sedangkan kekurangannya adalah metode ini menggunakan JavaScript, sehingga apabila penggunaan JavaScript menjadi masalah tersendiri maka berpengaruh terhadap penggunaan metode Web Font Loader.
Lalu Bagaimana Menggunakan Web Font Loader?
Silahkan lihat link CSS apa yang menjadi masalah dan diminta dioptimalkaan pengiriman CSS pada hasil Google PageSpeed Insights, sebagai contoh kasus pada blog ini adalah link dibawah ini :
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,700,500,600' rel='stylesheet' type='text/css'/>Silahkan ubah menjadi seperti dibawah ini, tujuannya untuk menonaktifkan link tersebut terlebih dahulu :
<!--link href='https://fonts.googleapis.com/css?family=Poppins:400,300,700,500,600' rel='stylesheet' type='text/css'/ -->Lalu, copy kode dibawah ini tepat diatas kode
</body> :<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Poppins:400,300,700,500,600']
}
});
</script>Ubah yang ditanda berwarna kuning sesuai font yang anda gunakan, selain itu juga apabila anda menggunakan Google Font lebih dari satu maka bisa digabungkan dalam satu script seperti dibawah ini :
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Poppins:400,300,700,500,600','Roboto+Condensed:400,700']
}
});
</script>Jika sudah, Save template anda. Lalu coba kembali lakukan test PageSpeed Insights kembali dan semestinya masalah diatas sudah teratasi.
Demikian artikel dengan judul Cara mengoptimalkan pengiriman Google Font CSS agar valid HTML5.
REFERENSI :
https://github.com/typekit/webfontloader
No comments