Materi Penting Untuk Mendapatkan Skor Tertinggi Blogger di GTMetrix (Pagespeed dan YSlow).
Dengan adanya penyisipan cdn blogger eksternal ( CSS yang tidak perlu) mungkin kalian juga pernah melihat list css dibawah ini dengan cara Ctrl+U pada source template kalian tepatnya dipaling bawah di atas </body> yang membuat score rendah maka dari itu cara inin juga bisa untuk mengatasi Add Expires header pada Gtmetrix
anda sendiri mungkin pernah menemukan script ini.
1. <link type = 'text / css' rel = stylesheet href = 'https: //www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css'/>
2. <link href = 'https: //www.blogger.com/dyn-css/authorization.css? TargetBlogID = 28300773 & zx = 71ea89df-0fe4-4b55-bbc4-0115c3e35696' rel = stylesheet />
Setelah berbulan-bulan lamanya optimasi demi optimasi mencari tutorial untuk blog blog saya sendiri, yang membutuhkan ribuan jam belajar dan mencari tahu untuk mencapai 100% Pagespeed dan 100% YSlow pada gtmetrik, karena saya sendiri tau hanya beberpa template saja yang bisa mencapai score itu bahkan penyedia template premium tidak bisa mencapainya. maka itu disitulah saya coba mengedit dan terus belajar.
Dengan kecepatan segini saya rasa cms blogger adalah yang terbaik dan mudah di edit
karena kecepatan adalah prioritas saya waktu itu dan selalu berfikir bagaimana cara agar lebih cepat tanpa hambatan karna saya juga tahu hosting blogger itu besar dan itu pasti terjamin kecepatannya :D, karena dengan memiliki template yang wus wus akan bagus untuk google dan kualitas pengalaman pengunjung.
Kenapa score Yslow di Gtmetrix selalu rendah?
Nah ini bisa jadi masalah yang banyak kalian cari solusinya :D yaitu nilai Add Expires header pada Gtmetrix selalu merah. dan disitulah gambar2 yang ada di homepage di jadikan masalah, cukup rumit memang apalagi kita salalu menyalahkan gambar dalam segi kecepatan, ya benar gambar bisa mengurangi kecepatan muatan laman di laman posting tapi tidak di halaman homepage!! disinilah masalahnya css eksternal bawaan blogger yang timbul dan memakan waktu saat proses pemuatan halaman blog di home page.
Ayo kita mulai guys :D jangan langsung ke inti kalian butuh waktu yang cukup lumayan untuk optimasi di tutorial ini dan saya juga nulis pegel gan :V
1. CTRL+U untuk memeriksa source template anda, coba cari ada css/js bawaan blogger gak? pake ctrl+f contoh .css untuk cari css eksternal .js untuk mencari js eksternal. coba lihat gambar dibawah ini.
Kalian mungkin pernah optimasi sana sini mentok 80/90 score di gtmetrix apalagi pagespeed lebih anjlok biasanya >_<, itulah di atas salah satu faktor yang bikin lelet blog kalian kek siput dan bikin page size membengkak.
tepatnya di atas </head> sama di atas </body> jangan cari template kalian pasti gak ketemu soalnya ter hide oleh blogger. sampai sini paham?
Baca seluruh artikel ini sebelum mengedit template anda !! blogger kok malas baca, yo lanjut cikidot.
Cara Menghapus Total css dan Js bawaan blogger untuk mempercepat loading pada blogger
Ini yang paling sering dilakukan dan ada sebagian template yang sudah memodifikasi/ menonaktifkan css/js bawaan blogger, jika di template anda sudah menerapkannya skip aja ke langkah berikutnya ok.1. tambah artibut b:css='false' pada tag html anda contoh.
<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>3. ubah tag penutup </body> jadi <!--</body> --> </body>
Sampai disini coba CTRL+U liat source template nya dan liat bagian Seperti gambar No 1 paling atas, seharusnya css eksternal sama js nya udah di hide dengan atribut <!-- di hide -->
Sampai sini kah? belum tentunya baca terus gan pantengin hehe :v pegel anjay maaf kalo belepotan dan ada yang gapaham soalnya ane juga pabalibet dan optimasi bisa semaleman wkwk tapi memuaskan, tulis kolom komentar kalo ada yang ditanyakan.
Lanjottt....
Cara ini adalah dengan mengganti tag <b:skin><![CDATA[/* dengan
<!-- /* <b:include data='blog' name='all-head-content' style='display:none'/> /* <b:skin><![CDATA[/*Css_bundle_v2.css" disini adalah file CSS yang membuata 3 kesalahan "Ekspresi" pada GTMetrix. (Add Expires headers)
Namun, Anda tidak akan dapat menghapusnya dan harus mengeksekusi, diamana Anda bisa menghapus code $ di seluruh bagian Css Variabel yang ada pada bungkus tag <b:skin><![CDATA[/*. Untuk melakukan/menghapus Variabel harus teliti jangan lupa backup template nya gan, takut ada kesalahan atau apa bisa di restor ulang.. tahap ini memakan waktu soalnya tidak bisa di replace kode nya berbeda2, dan skrang waktunya untuk mencari code $ pada semua css agan terutama bagian variabel dan kode tersebut adalah kode warna... yang terhubung ke customize layout blogger untuk mengganti nama tanpa coding.. nah itu yang akan kita hapus di css code $, harus teliti mana yang di hapus mana yang tidak
Contoh:
<example>
a: link {text-decoration: none; color: $(link.color);}
a: visited {text-decoration: none; color: $(link.visited.color);}
a: hover {text-decoration: underline; color: $(link.hover.color);}
</example>
a: visited {text-decoration: none; color: $(link.visited.color);}
a: hover {text-decoration: underline; color: $(link.hover.color);}
</example>
Pada contoh di atas itu code $ yaitu kode variabel blogger dan itu kode hex warna anda bisa menggantinya secara manual satu persatu jangan sampe ''TERSISA''
Tersisa gan bukan tersiksa :v
Contoh jadi seperti berikut:
<example>
a: link {text-decoration: none; color: #111;}
a: visited {text-decoration: none; color: #fff;}
a: hover {text-decoration: underline; color: #000;}
</example>
a: visited {text-decoration: none; color: #fff;}
a: hover {text-decoration: underline; color: #000;}
</example>
nah kode #fff kalian pasti tau itu putih dan #000 hitam, ganti seseuai fungsi tag nya biar ga warna wani tar blog ente :v
Goodluck. ^_^
Kalo semuanya sudah beres abis tu simpan template. cek score
Next di artikel ke 2 silahkan komentar hasilnya, ini tutorial belum termasuk lazyload , memperbaiki masalah gambar di gtmetrix dll. dan saya tidak memastikan score 100/100 tergantung anda yang lainnya sudah dioptimalkan atau tidak. tutorial ini untuk menghapus semua css/js ekasternal pada blogger pasti beda loadnya gan tinggal optimasi yang lainnya.
Oke mungkin cukupp sampai disini mohon maaf jika tutornya beliwet atau tidak jelas itu semua saya rangkum dan nanti disambung di artikel berikutnya, semoga berhasil.
Posting Komentar