Cara Gampang 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 menciptakan situs yang ramah pengguna (user friendly), baik dari segi tampilan maupun bagaimana cara menciptakan biar loading blog tetap cepat meskipun pada jaringan internet yang lambat. Jangan hingga calon pengunjung membatalkan kunjungannya hanya karena terlalu usang menunggu proses loading blog. Tentu ini sangat merugikan, baik dari segi jumlah klik maupun reputasi blog kita di mata mesin telusur. Dan dampak terburuk yakni menurunnya peringkat pada hasil indeks mesin telusur / SERP, karena blog Anda dianggap tidak maksimal dalam memenuhi kebutuhan para pencari informasi. Bahkan salah satu dari 200 lebih faktor penentu SERP yakni kecepan waktu muat.

Sebagai indikasi pentingnya kecepatan loading blog, google menyediakan PageSpeed Insights, alat yang sanggup dipakai secara online dan gratis untuk mengukur kecepatan sebuah website atau blog. Selain itu alat tersebut juga menyediakan warta perihal penyebab berikut solusi untuk meningkatkan performa kecepatan blog. Hanya saja menyerupai kita ketahui, kebanyakan warta dari google masih bersifat umum. Informasi menyerupai ini butuh pemahaman lebih, terlebih untuk para pemula, perlu klarifikasi dan teladan sederhana biar gampang dipahami, sebagaimana yang pernah saya alami.

Berdasarkan pengalaman tersebut, saya mencoba untuk menciptakan tutorial cara meningkatkan kecepatan blog yang gampang dipahami, bahkan untuk seorang pemula sekalipun. Berikut beberapa cara yang sanggup 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 mempunyai masa aktif penyimpanan chace browser sangat singkat. Hal itu mengakibatkan lambatnya proses loading blog. Oleh karena itu kebanyakan Blogger menentukan untuk menonaktifkan widget Navbar untuk mempercepat loading blog. Karena itu yakni cara paling gampang untuk mangatasi tiga sumber daya yang menghambat pelukisan konten utama.

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

# Optimalkan pengiriman CSS ekternal

Mengoptimalkan pengiriman CSS ekternal yang memblokir perenderan content pada paruh atas sanggup meningkatkan kecepatan loading blog, karena content utama akan eksklusif 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 menciptakan tampilan blog menjadi lebih elok dan menarik. Tapi sayangnya butuh link eksternal untuk menjalalankannya, tentu saja hal itu mengakibatkan beban perhiasan ketika pemuatan content blog. Menunda sementara hingga content utama jawaban dimuat yakni salah satu cara paling gampang untuk mengurangi beban pada tag head guna mempercepat loading blog. Hanya saja, menurut hasil percobaan yang saya lakukan, teknik ini hanya sanggup berjalan pada template standar Blogger.

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

<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 instruksi </body>.
Khusus untuk mengatasi stylesheet CSS bundle, anda sanggup 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 sanggup mempercepat waktu pengunduhan gambar, sekaligus menghemat jumlah data yang dipakai pengunjung. Saya biasa memakai 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 instruksi HTML dan CSS yang tidak terpakai lagi untuk mengurangi / mengecilkan ukuran template, sanggup 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 sanggup menjadi dua kali lipat dari aslinya. Bisa Anda dibayangkan, kerangkanya saja sudah tidak mengecewakan cukup berat, apalagi kalau ada isinya. Nah, untuk itu lakukan langkah-langkah berikut untuk mengecilkan kembali ukurannya. Meskipun jadinya tidak 100% mengembalikan ukurannya menyerupai semula. Tapi cara ini cukup efektif untuk meringankan beban blog.

Hapus semua instruksi CSS versi mobile.

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

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

Hapus instruksi HTML versi mobile di dalam widget Blog1

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

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

Hasilnya akan terlihat menyerupai ini (jangan ikut-ikutan diberi goresan pena 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