Home » Blogging » Tutorial » Mengatasi Render-Blocking Google Font PageSpeed Insight

Mengatasi Render-Blocking Google Font PageSpeed Insight

Imamz Rabu, 01 Juli 2015 5 Comments

Mengatasi Render-Blocking Google Font PageSpeed Insight - PageSpeed Insight merupakan produk dari google developers yang berfungsi untuk mengecek kecepatan load suatu halaman blog/website. Disana anda bisa mendapatkan detail mengenai apa saja yang berhasil dan juga kesalahan dalam pengomptimalan kecepatan load. Namun tidak sedikit sedikit dari mereka memiliki permasalahan yang sama, yaitu render blocking pada bagian link google font. Lalu, bagaimana cara mengatasinya? Caranya adalah dengan mengubah link google font tersebut menjadi css inline pada blog. Berikut Cara Mengatasi Render-Blocking Google Font PageSpeed Insight:

Hal pertama yang harus dilakukan adalah mendapatkan isi css normal google font. CSS Normal, maksudnya? Iya, karena jika anda melihat isi css langsung dari link google font (contoh: http://fonts.googleapis.com/css?family=Open+Sans:400,700) yang terlihat adalah:

Maka solusinya dengan masuk ke W3C CSS Validation Service https://jigsaw.w3.org/css-validator/, isi alamat blog anda kemudian klik check. Jika hasil sudah keluar, silahkan lakukan pencarian kata @font-face dengan CTRL+F. Nanti akan terlihat kurang lebih seperti ini:

CSS

@font-face {
font-family : "'Open Sans'";
font-style : normal;
font-weight : 400;
src : local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

Simpan kode tersebut. Sekarang ke menu Edit HTML Blogger, masukkan kode tersebut kedalam tag <style></style> dan hapus tanda kutip dua dibagian font-face. Letakan kode tersebut dibawah kode </b:skin> Sehingga menjadi seperti ini:

HTML

.....
.....
</b:skin>
<style>
@font-face {
font-family : 'Open Sans';
font-style : normal;
font-weight : 400;
src : local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
</style>

Terakhir, hapus kode seperti berikut yang menjadi masalah di PageSpeed Insight biasanya ada didalam tag <head>

HTML

Selesai. Sekarang cek kembali blog anda di PageSpeed Insight jika Render-Blocking bagian link Google Font hilang berarti masalah sudah teratasi. Cek juga halaman blog anda apakah ada perubahan font dari yang sebelumnya. Jika ada yang kurang jelas, silahkan bertanya dikolom komentar. Terima Kasih.