Untuk mengoptimalkan elemen .JS dan CSS agar bisa meningkatkan skor di PageSpeed Insights pada blog sangat perlu untuk dilakukan agar bisa mempercepat loading blog kita. jadi dengan menggunakan metode CSS Inline, atau mungkin menambahkan kode async pada beberapa baris javascript akan menambah skor pada hasil uji di Google PageSpeed Insights, otomatis blog kita akan semakin fast loading.
Jadi tulisan ini saya tujukan untuk blogger yang sama-sama cupu mengenai optimisasi template blog-nya. yang udah mahir dalam hal ini, mohon jangan di cemooh.. ampun lah.. hhehheheee...
Baca juga : Download Template Fast Loading serta Valid HTML5 Gratis
Oke, jadi yang perlu pertama kali dilakukan adalah dengan menguji speed (template) blog yang kita gunakan ke Google PageSpeed Insight dibawah ini:
Google PageSpeed Insights
Setelah terbuka, masukkan saja alamat blog kalian ditempat yang sudah disediakan, lalu seperti biasa.. klik tombol Analyze dan tunggu hasil akhirnya hingga menampilkan skor. jika sudah ijo-ijo semua, maka gak perlu ikutin panduan ini lah.. 😳
Apabila pada bagian keterangan dibawah, ada tulisan Consider Fixing atau mungkin Should Fix, coba di lihat saja baris-baris keterangan script .js ataupun CSS yang menyumbang lambat-nya akses blog kita.
Pada umumnya pada bagian ini sering kali kita disuguhi dengan istilah Eliminate render-blocking JavaScript and CSS in above-the-fold content, atau terkadang pula ada suguhan saran dengan istilah Leverage browser caching. istilah apa ini mah?! secara saya gak mudeng..
tapi berkat ketabahan dan ketegaran, kita diwajibkan tenang sembari mencari solusi. 👳
Setelah kalian mengetahui beberapa laporan script javascript ataupun CSS yang butuh untuk dioptimisasi, lalu catat dalam memori atau kalau mudah lupa catet aja nama script ataupun CSS-nya ke dalam notepad. umum-nya saya hanya mengingat satu atau dua kata pada keterangan tersebut, lalu kita butuh masuk ke seting template blogspot kita. yaitu masuk ke menu Template >> Edit HTML. lalu kita lanjut pada bagian dibawah ini:
Pengoptimalan CSS Delivery
Setelah kalian catat nama-nama baris css ataupun javascript yang membuat lambat, maka tinggal kita cari saja pada template editor di blogspot, ketik saja kombinasi tombol keyboard Ctrl+f.
Setelah itu ketik atau copast nama css yang akan kita optimalkan. dalam contoh ini elemen yang akan saya optimalkan adalah css dari Font Awesome serta css Font Googleapis.
Kurang lebih kode yang ada didalam template blog-nya seperti dibawah ini:
<link href="//fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet" type="text/css"></link>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
Untuk mengoptimalkan kedua elemen diatas, caranya cukup dengan memodifikasi-nya dengan script seperti dibawah ini :
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans+Condensed:700"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>Hint: Dibagian tulisan berwarna biru tebal adalah elemen css-nya, sedangkan pada bagian yang berwarna merah tebal adalah kode script tambahan-nya.Setelah kalian modifikasi seperti diatas, letakkan script hasil modifikasi diatas pada tag sebelum </body> di template yang kamu pakai, dan hapus line css yang awal. dan simpan hasil modifikasinya. lalu ulangi uji di Google PageSpeed Insights untuk melihat hasil-nya. bila skor bertambah, maka anda berhasil.
Pengoptimalan elemen Javascript
Pada bagian ini sering disebut dengan istilah Leverage Render Caching atau Render Blocking, yang mana menurut anjuran dari Google PageSpeed, kita malah disuruh untuk menghapus baris elemen tersebut. saya makin bingung... bila elemen tersebut dihapus, kira-kira fungsi template yang kita pakai akan jadi seperti apa?
Akhirnya karena saya sendiri sangat minim mengenai urusan seperti ini, ada beberapa cara yang bisa saya dapatkan dan mampu menghilangkan peringatan tersebut pada anjuran Google PageSpeed.
Beberapa cara yang bisa ditempuh, diantaranya :
Menambahkan kode async='async' pada baris elemen .js tersebut, contoh-nya seperti dibawah ini :
Menambahkan kode async='async' pada baris elemen .js tersebut, contoh-nya seperti dibawah ini :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Lalu dirubah menjadi seperti ini :
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Kelemahan pada metode ini, menurut yang saya alami, pada elemen jquery seringkali malah membuat tampilan blog serta beberapa fitur tidak bekerja sebagaimana mestinya. namun kalian bisa coba-coba, karena pada tiap-tiap template juga berbeda-beda.
tapi bila penambahan kode async seperti diatas kita tambahkan ke selain elemen jquery, hasilnya aman-aman saja.
Pilihan kedua yaitu memindah elemen dengan extensi .js kebaris paling bawah, yang jelas pada posisi diatas tag </body>.
Sesuai anjuran dari Google sendiri yaitu dengan membuat metode inline pada elemen-elemen javascript. panduan-nya bisa dilihat pada tautan dibawah ini agar saya tidak capek mengetik.
Metode Inline Javascript
Atau bisa melihat referensi gambar dibawah ini, mudah kok untuk memahaminya.
Mengganti Tag </head> Dan Tag </body>
Mengganti kode </head> ke kode seperti dibawah ini:
</head><!--<head/>-->Mengganti kode </body> ke kode seperti dibawah ini:
<!--</body>--></body>Namun yang perlu di ingat, bila sudah mengganti kode </body> menjadi seperti diatas, pastikan setting ataupun penambahan pada widget sudah diselesaikan terlebih dahulu.
Apabila ingin menambahkan widget, rubah tag diatas ke kondisi semula --> </body>, lalu setelah selesai mengkonfigurasi widget, rubah lagi tag </body> dengan tag seperti diatas. dan jangan lupa simpan konfigurasi template-nya.
Kira-kira seperti itulah langkah-langkah yang sudah pernah saya lakukan, walhasil... blog saya masih belum mendapatkan hasil yang memuaskan, maklum... masih pake template gratisan. hahahahahaaaa...
Oke teman.. mudah-mudahan tips untuk Mengoptimalkan template blog agar fast loading bisa bermanfaat. apabila tulisan ini terkesan ngawur serta banyak kekurangan, mohon dimaklumi.. soalnya yang nulis masih cupu. tapi apapun demi cepatnya akses ke blog yang kita miliki harus selalu di upayakan, bila saja internet di seluruh indonesia ini mempunyai internet yang sangat cepat serta merata, mungkin optimisasi semacam ini tidak perlu dilakukan. tapi ya entahlah... Wassalam!!