Cara Mempercepat Loading Blog untuk Blogger

Cara Mempercepat Loading Blog untuk Blogger
Daftar Isi Artikel
Cara Mempercepat Loading Blogger
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:
  1. Kurangi Ukuran Gambar
  2. Singkirkan CSS Dan Bundel JS
  3. Hapus Icon Quick Edit
  4. 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.
Cara Mempercepat Loading Blog

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.js
Kode-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:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<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:
&lt;!--</body>--&gt;&lt;/body&gt;

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 <!--&lt;b:include name='quickedit'/&gt;-->
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.

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>

Baca Juga:

Baca Juga:


Konten Unggulan