Tips Tutorial Cara Gampang Mempercepat Loading Blog

Banyak faktor yang menghipnotis 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 supaya 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 ialah 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 ialah 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 wacana penyebab berikut solusi untuk meningkatkan performa kecepatan blog. Hanya saja ibarat kita ketahui, kebanyakan warta dari google masih bersifat umum. Informasi ibarat ini butuh pemahaman lebih, terlebih untuk para pemula, perlu klarifikasi dan pola sederhana supaya 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 ialah cara paling gampang untuk mangatasi tiga sumber daya yang menghambat pelukisan konten utama.

Masuk ke sajian tata letak >> klik edit pada elemen navbar selanjutnya pilih sajian 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, alasannya ialah content utama akan pribadi 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 anggun dan menarik. Tapi sayangnya butuh link eksternal untuk menjalalankannya, tentu saja hal itu mengakibatkan beban pelengkap ketika pemuatan content blog. Menunda sementara hingga content utama jawaban dimuat ialah 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 arahan </body>.

Contoh link stylesheet ekternal dan script yang umum dipakai 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 arahan </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 menghipnotis 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 arahan 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 ibarat semula. Tapi cara ini cukup efektif untuk meringankan beban blog.

Hapus semua arahan CSS versi mobile.

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

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

Hapus arahan HTML versi mobile di dalam widget Blog1

Seperti halnya arahan CSS versi mobile, semua arahan 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 arahan HTML versi mobile, yaitu <b:includable id='mobile-index-post' var='post'>...</b:includable>.

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

Hasilnya akan terlihat ibarat 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