Cara Mudah Mempercepat Loading Blog

Banyak faktor yang mempengaruhi lambatnya waktu muat halaman blog / website. Jaringan internet yang lambat menjadi faktor yang paling krusial. Akan tetapi, sebagai pemilik blog kita dituntut untuk membuat situs yang ramah pengguna (user friendly), baik dari segi tampilan maupun bagaimana cara membuat agar loading blog tetap cepat meskipun pada jaringan internet yang lambat. Jangan sampai calon pengunjung membatalkan kunjungannya hanya karena terlalu lama menunggu proses loading blog. Tentu ini sangat merugikan, baik dari segi jumlah klik maupun reputasi blog kita di mata mesin telusur. Dan dampak terburuk adalah menurunnya peringkat pada hasil indeks mesin telusur / SERP, lantaran blog Anda dianggap tidak maksimal dalam memenuhi kebutuhan para pencari informasi. Bahkan salah satu dari 200 lebih faktor penentu SERP adalah kecepan waktu muat.

Sebagai indikasi pentingnya kecepatan loading blog, google menyediakan PageSpeed Insights, alat yang bisa digunakan secara online dan gratis untuk mengukur kecepatan sebuah website atau blog. Selain itu alat tersebut juga menyediakan informasi tentang penyebab berikut solusi untuk meningkatkan performa kecepatan blog. Hanya saja seperti kita ketahui, kebanyakan informasi dari google masih bersifat umum. Informasi seperti ini butuh pemahaman lebih, terlebih untuk para pemula, perlu penjelasan dan contoh sederhana agar mudah dipahami, sebagaimana yang pernah saya alami.

Berdasarkan pengalaman tersebut, saya mencoba untuk membuat tutorial cara meningkatkan kecepatan blog yang mudah dipahami, bahkan untuk seorang pemula sekalipun. Berikut beberapa cara yang bisa Anda lakukan untuk mempercepat loading blog.

# Menonaktifkan tampilan Navbar

Seperti kita ketahui, bahwa widget Navbar terletak paling atas pada suatu halaman blog, sementara di dalamnya terdapat satu sumber daya yang memblokir perenderan content di bawahnya, yaitu script js plusone dan dua sumber daya yang memiliki masa aktif penyimpanan chace browser sangat singkat. Hal itu menyebabkan lambatnya proses loading blog. Oleh karena itu kebanyakan Blogger memilih untuk menonaktifkan widget Navbar untuk mempercepat loading blog. Karena itu adalah cara paling mudah untuk mangatasi tiga sumber daya yang menghambat pelukisan konten utama.

Masuk ke menu tata letak >> klik edit pada elemen navbar selanjutnya pilih menu off (paling bawah), klik simpan.

# Optimalkan pengiriman CSS ekternal

Mengoptimalkan pengiriman CSS ekternal yang memblokir perenderan content pada paruh atas dapat meningkatkan kecepatan loading blog, sebab content utama akan langsung dimuat tanpa harus menunggu pengunduhan stylesheet ekternal selesai. Berikut ini cara jitu mengoptimalkan javascript dan pengiriman CSS eksternal.

Menunda pemuatan CSS stylesheet eksternal pada tag head.

Belakangan ini cukup marak penggunaan Font Awesome dan Jquery sebagai penyokong untuk membuat tampilan blog menjadi lebih cantik dan menarik. Tapi sayangnya butuh link eksternal untuk menjalalankannya, tentu saja hal itu menyebabkan beban tambahan saat pemuatan content blog. Menunda sementara sampai content utama selesai dimuat adalah salah satu cara paling mudah untuk mengurangi beban pada tag head guna mempercepat loading blog. Hanya saja, berdasarkan hasil percobaan yang saya lakukan, teknik ini hanya bisa berjalan pada template standar Blogger.

• Pindahkan semua link stylesheet eksternal dan script Jquery yang ada di dalam tag head, tempatkan di atas kode </body>.

Contoh link stylesheet ekternal dan script yang umum digunakan pada template Blogger :


<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>



• Jika Javascript nya ada di dalam tag head, pindahkan juga, tempatkan di atas kode </body>.
• Khusus untuk mengatasi stylesheet CSS bundle, anda bisa lihat pada tutorial : Cara Optimalkan Pengiriman CSS pada Blogspot.

Tips : kumpulkan link stylesheet di atas kumpulan Javascript (agar tidak semrawut).

# Optimalkan gambar

Pilih format file gambar yang sesuai

• Sebaiknya gunakan PNG untuk gambar tangkapan layar / screenshoot.
• Gunakan JPG untuk semua gambar bergaya fotografi.
• Gunakan GIF untuk gambar grafik sederhana atau sangat kecil (misalnya kurang dari 10×10 piksel, atau palet warna yang kurang dari 3 warna) dan untuk gambar yang bergerak.

Kompres gambar sebelum diupload

Gunakan alat kompresi gambar untuk meminimalkan ukuran gambar tanpa mempengaruhi kualitas tampilan secara signifikan. Hal ini dapat mempercepat waktu pengunduhan gambar, sekaligus menghemat jumlah data yang digunakan pengunjung. Saya biasa menggunakan layanan kompresi gambar Online dari compressjpeg.com. di sana tersedia alat untuk kompresi gambar JPG / PNG dan fitur untuk mengubah format file gambar.

Tips :

Hindari penggunaan gambar sebagai background blog / web, cukup gunakan warna sebagai background.

Hindari penggunaan widget yang berlebihan, gunakan seperlunya saja.

# Mengecilkan ukuran template untuk meringankan beban blog.

Menghapus kode HTML dan CSS yang tidak terpakai lagi untuk mengurangi / mengecilkan ukuran template, bisa meringankan beban blog. Ukuran rata-rata template standar Blogger (original) biasanya kurang dari 100kb. Namun, ketika diubah menjadi template responsive dan mengikuti beberapa tutorial untuk mempercantik tampilan blog, ukurannya bisa menjadi dua kali lipat dari aslinya. Bisa Anda dibayangkan, kerangkanya saja sudah lumayan cukup berat, apalagi kalau ada isinya. Nah, untuk itu lakukan langkah-langkah berikut untuk mengecilkan kembali ukurannya. Meskipun hasilnya tidak 100% mengembalikan ukurannya seperti semula. Tapi cara ini cukup efektif untuk meringankan beban blog.

Hapus semua kode CSS versi mobile.

Namanya juga template responsive, sudah pasti tidak akan mengaktifkan fitur tampilan seluler. Oleh sebab itu, menyimpan CSS versi mobile sama dengan menyimpan sampah di dalam template blog. Hapus saja semua kode CSS versi mobile, kecuali kode CSS di bawah ini (jika halaman utama blog dialihkan ke versi mobile).

.mobile-index-contents {
color: $(body.text.color);
}

Hapus kode HTML versi mobile di dalam widget Blog1

Seperti halnya kode CSS versi mobile, semua kode HTML versi mobile di dalam widget Blog1 juga tidak digunakan lagi, kecuali jika halaman utama blog Anda dialihkan ke halaman utama versi mobile. Maka sisakan satu kode HTML versi mobile, yaitu <b:includable id='mobile-index-post' var='post'>...</b:includable>.

Perlu Anda ketahui, untuk menghapus kode HTML di dalam widget Blog1. Anda tidak boleh menghapus tag pembungkusnya, cukup hapus isinya saja. Karena bila tag pembungkusnya dihapus maka pekerjaan Anda akan sia-sia. Kenapa???...

Hasilnya akan terlihat seperti ini (jangan ikut-ikutan diberi tulisan kosong ya).

<b:includable id='mobile-main' var='top'>
Kosong
</b:includable>
<b:includable id='mobile-nextprev'>
Kosong
</b:includable>
<b:includable id='mobile-post' var='post'>
Kosong
</b:includable>

Sekian. Maaf hanya itu saja yang saya tahu, cara untuk meningkatkan kecepatan loading blog