4 Cara Mempercepat Loading Blog dengan Mudah

4 Cara Mempercepat Loading Blog dengan Mudah - Kecepatan loading blog merupakan salah satu hal penting yang harus diperhatikan seorang blogger untuk mendatangkan pengunjung.
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.

Lantas, bagaimana cara untuk mempercepat loading pada blog anda? berikut adalah cara ampuh untuk mempercepat loading blog.
Cara Mempercepat Loading Blog

Kurangi Ukuran Gambar

Ukuran gambar yang besar adalah salah satu penyebab terbesar yang mempengaruhi loading blog anda. Jadi, langkah utama disini adalah mengurangi ukuran gambar.
Cara Meningkatkan Kecepatan 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.

Hindari penggunaan gambar resolusi tinggi (HD)

Gambar yang beresolusi tinggi pastinya size dari gambar tersebut juga tinggi/besar. Maka dari itu, hindari penggunaan tersebut.

Crop Gambar

Potong ukuran gambar agar cukup pas di postingan anda dalam panjang dan lebarnya.

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.

Singkirkan CSS Dan Bundel 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.

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>

Menghapus Bundle JS (Java Script)

  • Cari kode </body>, ganti kode tersebut dengan kode berikut
&lt;!--</body>--&gt;&lt;/body&gt;

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

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

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 berikut

❚ 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.

PENUTUP

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 mudah mempercepat loading blog, semoga bermanfaat, ikuti terus Renovasi Otak untuk mendapatkan artikel menarik selanjutnya.
Nando
Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Luangkan sedikit waktu Anda untuk membagikan "4 Cara Mempercepat Loading Blog dengan Mudah" kepada teman-teman Anda. Hanya dengan menekan Tombol Sosial Media di bawah ini:

Related Posts

Post a Comment

Berlangganan Gratis!

Daftarkan email anda untuk mendapatkan pemberitahuan setiap update artikel terbaru, dan jangan lupa untuk IKUTI Blog kami