Cara Mempercepat Loading Blog Blogger atau Blogspot – Loading blog merupakan salah satu hal penting yang harus diperhatikan seorang blogger untuk mendatangkan pengunjung.
Faktanya, 60% dari pengunjung blog anda akan berbalik arah jika loading blog anda melebihi 5 detik, tentunya akan merugikan anda sendiri jika terjadi hal tersebut. Maka dari itu anda perlu melakukan optimasi loading pada blog anda dengan cara:
- Kurangi Ukuran Gambar
- Singkirkan CSS Dan Bundel JS
- Hapus Icon Quick Edit
- Hapus Pemblokir Rander Font dan Jquery
Sebelum melakukan cara ini, pastikan anda sudah menganalisa kecepatan blog anda. Anda dapat mengukur seberapa cepat loading blog anda dengan tool
Anda dapat menggunakan alat tersebut secara gratis untuk mengukur kecepatan blog anda dan bandingkan setelah menggunakan cara ini.
Baca juga: Cara Mendapatkan Featured Snippet Google.
Cara Mempercepat Loading Blogger
Lantas, bagaimana caranya? berikut adalah cara mempercepat loading blogger.
1. Optimasi Gambar Untuk Mempercepat Loading Blogger
Ukuran gambar yang besar adalah salah satu penyebab terbesar yang mempengaruhi loading blog anda. Jadi, langkah utama disini adalah mengurangi ukuran gambar.
Semakin kecil ukuran gambar semakin baik. Anda harus berusaha menjaga ukuran per gambar kurang dari 30KB.
Untungnya, untuk mengurangi ukuran gambar cukup mudah dan sederhana.
1.1 Hindari penggunaan gambar resolusi tinggi (HD)
Gambar yang beresolusi tinggi pastinya size dari gambar tersebut juga tinggi/besar. Maka dari itu, hindari penggunaan tersebut.
1.2 Crop Gambar
Potong ukuran gambar agar cukup pas di postingan anda dalam panjang dan lebarnya.
1.3 Kompres Gambar
Kompres gambar ditujukan untuk memperkecil ukuran dari gambar tersebut. Anda dapat menggunakan tool online untuk mengompres gambar, seperti
Tips:
1. Jangan mengedit gambar, seperti meningkatkan kecerahan dan kontrasnya. Ini akan meningkatkan ukuran totalnya.
2. Harapkan gambarnya sedikit buram. Kecuali blog atau situs web anda berisi tentang gambar-sentris.
Baca juga: Cara Mendapatkan Backlink Kampus.
2. Menghapus Bundle CSS dan JS
Blogger sudah dilengkapi dengan kumpulan CSS dan JavaScript yang sudah ada sebelumnya terlepas dari template yang anda gunakan. Kode tersebut kurang lebih terlihat seperti ini
https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css
https://www.blogger.com/static/v1/widgets/3401484092-widgets.jsKode-kode ini tidak dibutuhkan sepenuhnya jika anda menggunakan template khusus. Jadi, kode ini harus dihapus.
Namun, karena default sistem pada blogger , anda tidak dapat menghapus bundle ini. Jadi untuk menolaknya, perlu sedikit perubahan pada kode tersebut.
Pertama pergi ke halaman blogger anda. Masuk ke Template ➤ Edit HTML Lalu ikuti langkah langkah berikut.
2.1 Cara Menghapus Bundle CSS
- Tekan CTRL+F Lalu cari <b:skin><![CDATA[, ganti kode tersebut dengan kode berikut:
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>- Potong semua kode yang ada pada tag tersebut.
- Cari kode </b:skin>, ganti kode tersebut dengan </style>
2.2 Cara Menghapus Bundle JS
- Cari kode </body>, ganti kode tersebut dengan kode berikut:
<!--</body>--></body>3. Hapus Icon Quick Edit
Ikon kecil ini bisa saja membutuhkan banyak ruang. Jika anda tidak membutuhkan icon ini, alangkah baiknya anda menghapus icon ini. Caranya cukup sederhana, tekan CTRL+F cari kode <b:include name='quickedit'/> ubah dengan kode <!--<b:include name='quickedit'/>-->
BACA JUGA: Cara Memasang Lazy Load Image untuk Mempercepat Loading Blog
4. Hapus Pemblokir Rander Font dan Jquery
Jika anda memasang template dari pihak ketiga, tidak menutup kemungkinan anda menggukan font khusus. Font ini membuat pemblokiran situs web, dan memperlambat kecepatan pemuatannya dengan margin besar.
Masalah ini mudah diperbaiki, gunakan Google PageSpeed Insight untuk mencari tahu tentang elemen pemblokiran render di blog/situs web anda.
Hapus sistem pemblokiran render ini dari blog/situs web anda dengan cara, Tekan CTRL+F lalu cari kode </head> letakkan kode berikut tepat diatasnya
<script type = 'text / javascript'>
(function () {var ad = document.createElement ('script'); ad.type = 'text / javascript'; ad.async = true; ad.src = '// ajax.Googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js '; var sc = document.getElementsByTagName (' script ') [0]; sc.parentNode.insertBefore (ad, sc);} ) ();
// <! [CDATA [
//
fungsi CSS Ready loadCSS (e, t, n) {"use strict"; var i = window.document.createElement ("tautan"); 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 (“// fonts.googleapis.com/css?family=Open+Sans|PT+Sans+Narrow//);loadCSS((https : //maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css ”);
//]]>
</script>Ubah kode yang ditandai dengan font yang Anda gunakan.
Setelah melakukan beberapa perubahan tersebut, analisa kembali blog anda dengan alat speed test yang sudah saya rekomendasikan diatas. Hasilnya? Apakah ada perubahan?
Sekian pertemuan kali ini tentang cara mempercepat loading blogger, semoga bermanfaat, ikuti terus Renovasi Otak untuk mendapatkan artikel menarik selanjutnya.
