Silakan dihapus ganti dengan kode dibawah ini

<!----></body>
Simpan template.

Asingkron Loading CSS EksternalTerkadang dalam sebuah template blog ada sebuah css eksternal yang harus dipanggil seperti misalnya: font sangat penting untuk blog, kita tidak bisa menghilangkannya atau menyembunyikannya baik font untuk tampilan tulisan ataupun font icon seperti font awesome karena akan berpengaruh terhadap tampilan blog anda. Disisi lain CSS font ini merupakan CSS eksternal yang harus dipanggil dan tentunya menyebabkan masalah render blocking css pada PageSpeed Insight, berikut solusi mengatasinya yaitu dengan menggunakan script javascript yang bisa menload css eksternal blog anda seperti google font, dan font awesome secara asingkron sehingga tidak membebani loading blog. Silakan simpan diatas kode

Anda bisa menganti link css eksternalnya diatas 

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

dan kalau lebih dari satu css yang mau diload secara asingkron tinggal tambahkan lagiloadCSS ("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
maka menjadi seperti ini.

Asingkron Loading Javascript Eksternal dan Mengabung Javascript EksternalJavascript sangatlah menyumbang loading blog kita, sebenarnya banyak cara untuk membuat blog anda tetap ringan meskipun banyak javascript. Ya saran saya sebisa mungkin dikurangi penggunaan javascript yang tidak penting, akan tetapi kalau tinggal yang penting tapi masih berat loadingnya dan terdapat masalah render blocking js maka bisa dicoba cara mudah dibawah ini.
Untuk Javascript Eksternal, misal kodenya:

Maka cukup tambahkan async="async" sehingga kodenya menjadi seperti ini

Bisa anda terapkan untuk semua javascript eksternal kecuali jquery (ada caranya nanti berbeda), selain itu letakan juga kode javascript eksternal dibagian bawah sendiri atau diatas kode
Untuk Javascript Internal, blog anda pasti memiliki banyak javascript eksternal walaupun tidak begitu memberatkan tetapi agar loading blog lebih ringan saya sarankan untuk mengabungnya menjadi satu saja. Contoh:
JS 1:

JS 2:

Maka bisa anda gabung menjadi satu, mejadi seperti ini:

Setiap kelompok js ada pemisah ; agar tidak tercampur fungsinya. Sama seperti javascript eksternal saya sarankan diletakan diatas kode .

Mengatasi Render Blocking Jquery LibraryJavascript dari jquery library ini teryata menyumbang masalah render blocking js pada PageSpeed Insights, hal ini tentunya membuat blog anda berat. Akan tetapi cara penangannya berbeda dengan javascript eksternal yang sudah saya terangkan diatas tinggal tambahkan async="async" masalah selesai, bila diterapkan di javascript jquery library maka jquery blog anda tidak akan berfungsi. Berikut cara mengatasi render blocking dari javascript jquery library:
Silakan hapus kode jquery blog anda, dari (tergantung versi jquery blog anda masing-masing):

Ganti menjadi seperti ini:

Simpan template.

Menganti Gambar Pada CSS dengan Base64Dalam css blog anda pasti ada yang menggunakan url Gambar baik digunakan untuk background, ataupun icon. Dengan menggunakan url tersebut menambah permintaan http blog anda sehingga waktu loadnya menjadi agak lama. Solusinya adalah dengan mengubah link gambar pada css dengan base64, misal: 

#nav {
    font: bold normal 11px Arial, sans-serif;
    background: #333 url(http://2.bp.blogspot.com/-lqUfhYdJt_U/U7gGFr_ojMI/AAAAAAAAAW0/yz6DrC0_A80/s1600/hiasan.png) no-repeat bottom center;
    margin: 0 auto;
    padding: 0 0;
    text-transform: uppercase;
    height: 36px;
}

Maka saya ganti menjadi base64 menjadi berikut:

#nav {
    font: bold normal 11px Arial, sans-serif;
    background: #333 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7EAAAACCAYAAACOlVsfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAGDSURBVFhH7di9S0JhFMfx50JrtAmFexBBFGq6hk1B/4BJ0OjQJjUUWfSKonJJIhDKxJauiEtLEGINgUpDWZQVqeUShuXLo3LvPT3+Ec+9DWf4cfbv9jlEkEqA06BBvAwk8QkkXpQHwvnqrCv5sWMLtA7HvXBg9sO+BcerQcgSgJBVBNHsk0MjK9/HxoXKicHRig3OwemQE2I4bg2irG2EdZaM85AddkFtwg1d8zK0TEvQxHFrQFlbylrXJ9yNun3zpbt49NRdkxqwkQBYlwA8ZzhuDRKges6h7Yl22tuOr3awn410VJEAiAKOZ4OgAHJAUGlYkOmFoCg51vuWrXezON4NaE5Qy/dEfnwgSuGZwFsBx7NB8ZXAO2t8l++jyYyh6k+NNrdSVmU3bYO99CSOYwPftQm8qTF19XLmx3kVKU3fVGpTGarYcxTs2TrbL06DBgQBqwFge48CRKxuUEfE6gd1RKw+WEfE6ol0RKxuWEfE6op1RKy2aEfE6gd1ROz/QPof/xJz8oYz+iAAAAAASUVORK5CYII=') no-repeat bottom center;
    margin: 0 auto;
    padding: 0 0;
    text-transform: uppercase;
    height: 36px;
}

Bisa anda bandingkan loadinya cepat mana ? http (biasa) dengan

base64:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7EAAAACCAYAAACOlVsfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAGDSURBVFhH7di9S0JhFMfx50JrtAmFexBBFGq6hk1B/4BJ0OjQJjUUWfSKonJJIhDKxJauiEtLEGINgUpDWZQVqeUShuXLo3LvPT3+Ec+9DWf4cfbv9jlEkEqA06BBvAwk8QkkXpQHwvnqrCv5sWMLtA7HvXBg9sO+BcerQcgSgJBVBNHsk0MjK9/HxoXKicHRig3OwemQE2I4bg2irG2EdZaM85AddkFtwg1d8zK0TEvQxHFrQFlbylrXJ9yNun3zpbt49NRdkxqwkQBYlwA8ZzhuDRKges6h7Yl22tuOr3awn410VJEAiAKOZ4OgAHJAUGlYkOmFoCg51vuWrXezON4NaE5Qy/dEfnwgSuGZwFsBx7NB8ZXAO2t8l++jyYyh6k+NNrdSVmU3bYO99CSOYwPftQm8qTF19XLmx3kVKU3fVGpTGarYcxTs2TrbL06DBgQBqwFge48CRKxuUEfE6gd1RKw+WEfE6ol0RKxuWEfE6op1RKy2aEfE6gd1ROz/QPof/xJz8oYz+iAAAAAASUVORK5CYII=

copy di address bar lalu tekan enter, cepat mana loadingnya.
Untuk mengubah gambar menjadi base64 caranya cukup mudah, silakan buka http://dopiaza.org/tools/datauri/index.php lalu pilih yang Retrieve file from a URL disini anda tinggal mengopy saja url gambarnya maka otomatis menjadi bentuk base64, copy deh base64nya ganti url gambar yang ada pada css dengan gambar base64. Ada penambahan ' ' jika menggunakan base64 bisa dilihat pada kode diatas (ini-link-gambar.jpg) menjadi ('data:image/png;base64......'). 

Mendefer Loading Gambar BlogGambar-gambar diblog baik yang ada diwidget maupun postingan merupakan salah satu faktor yang menyebabkan loading blog anda berat, berikut ada trik tersendiri untuk mengakalinya agar blog anda tetap ringan meskipun menggunakan banyak gambar.
Silakan simpan kode dibawah ini diatas kode

Fungsi kode diatas adalah menambahkan gambar tipuan yang hanya berukuran beberapa byte pada gambar yang ada diblog anda. Gambar tipuan tersebut diletakan di src="" dan gambar asli ditaruh pada data-src="" dimana browser nantinya mengira gambar aslinya adalah gambar tipuan, dan gambar asli baru diload setelah semua diload. Jadi loading blog jauh lebih ringan.
Mengompress Gambar Yang Ada di Blog Anda
Ini penting, saya menyarankan anda mengompress setiap gambar yang ada diblog anda baik diwidget yang berupa baner iklan, ataupun gambar yang ada dipostingan. Dengan mengompress gambar kita bisa mendapatkan gambar dengan kualitas gambar yang sama tetapi dengan ukuran yang lebih kecil. Tentunya hal ini dapat meringankan loading blog anda.
Kalau saya sendiri biasa menggunakan //kraken.io/web-interface ada dua mode disana yaitu lossy (kompresi tingi dengan sedikit menurunkan kualitas gambar) dan lossless (kompresi ringan tanpa menurunkan kualitas gambar) yang tinggi kompresinya tentunya ukuran gambar akan menjadi lebih kecil dan lebih ringan ketika diload.
Mengompress Template Blog Yang Anda Gunakan
Dalam sebuah template pasti ada baris kosong hal ini membuat proses rendering atau pembacaan blog menjadi lebih lama, anda bisa mengompress template blog anda untuk merapatkan barisan.
Berikut caranya:
- Silakan buka template blog anda di editor template blog, copy semua kodenya.
- Buka //htmlcompressor.com/compressor/
- Silakan pastekan kode template anda pada tab source, lalu klik tombol berwarna hijau compress. Dan bila ada munculan untuk mengubah code type menjadi blogger/xml silakan diklik change saja.
- Maka akan keluar kode yang sudah dicompress, silakan dicopy, dan pastekan di editor template blogger anda. Simpan template.

Itu dia cara yang bisa anda coba untuk mempercepat loading blog anda, selamat mencoba dan jangan lupa untuk mentestnya lagi setelah mencoba tutorial ini di PageSpeed Insights. Semoga bermanfaat.

Artikel Dari : Masarif