Cara Menghapus Unused CSS Dari Template Blogger
Kenapa harus menghapus unused css dari template blog? Pada dasarnya unused css bukan merupakan masalah kritis yang mengganggu performa website, meskipun begitu unused css yang terlalu besar sangat penting dihilangkan atau dihapus dari template blog dengan alasan penghematan byte yang tidak diperlukan untuk konten paruh atas dan mengurangi byte yang tidak digunakan oleh aktivitas jaringan.
Artinya semakin kecil unused css, semakin baik perenderan konten paruh atas situs web/blog, sebaliknya jika terlalu banyak aturan yang tidak berlaku dari stylesheet (unused css) perenderan konten paruh atas situs web akan semakin buruk.
Maka dari itu, di tutorial kali ini saya akan menjelaskan dengan sebaik mungkin jenis-jenis unused css (css yang tidak digunakan untuk konten paruh) serta caranya menghapus unused css dari template blog (blogger).
Jenis-Jenis Unused Css Di Template Blogger
- Css Layout (body#layout).
- Css Group Description (Variable Stylesheet).
- Css Duplikat (Aturan css yang tidak berlaku).
- Css Widget Yang Tidak Digunakan.
- Css Unused Third Party (Font Awesome).
Css Layout (Body Layout)
Agar sukses menghapus unused css dari template blogger, pertama sekali yang harus kita amankan adalah css layout atau body layout. Css layout merupakan unused css (stylesheet yang tidak digunakan) untuk halaman paruh atas, tetapi css layout sangat penting untuk tampilan tata letak blog di dashboard blogger.Jadi untuk css layout kita hanya perlu menyembunyikan nya dari perenderan halaman paruh atas saja tanpa harus menghapusnya, dengan demikian css layout tidak akan dirender oleh browser dan tidak dianggap sebagai unused css yang menghambat penguraian css untuk halaman paruh atas.
Untuk menyembunyikan-nya simpan css body layout kedalam tag data:view.isLayoutMode seperti contoh di bawah ini;
<b:if cond='data:view.isLayoutMode'>
<b:template-skin>
<![CDATA[
body#layout disini
body#layout disini
more...
]]>
</b:template-skin>
</b:if>
Css Group Description (Variable Stylesheet)
Css Group Description tidak berguna (unused css) untuk halaman paruh atas tetapi untuk pengguna blogger yang belum mengerti tentang css sangat berguna, css group description memungkinkan pengguna untuk melakukan customize theme blogger seperti merubah font, color dan sebagainya dari tata letak theme designer.Jika kamu suadah ahli untuk melakukan customize theme blogger melalui edit html dan css, sebaiknya css ini dihapus saja karena ini merupakan css yang tidak digunakan (unused css) untuk halaman/konten paruh atas.
Cara Menghapus Css Group Description
- Buka url blog anda di browser chrome
- Kemudian tekan Ctrl+U untuk melihat source situs atau (view-source:https://www.cordial.blogspot.com/).
- Copy semua css pada source halaman tanpa menyertakan css group description (variable stylesheet).
- Kemudian ganti css original template blog dengan css yang dicopy dari source halaman.
- Pratinjau situs blog untuk memastikan tidak ada perubahan (error) pada tampilan blog.
Css Tidak Diparse
#layout div.widget{
float:$(startSide);
} Parse mode #layout div.widget{
float:left;
} Cara Menghapus Css Duplikat (Aturan css yang tidak berlaku).
Dari sekian banyak jenis unused css di template blogger, menurut yang saya amati yang paling mempengaruhi performa blog adalah css duplikat (aturan stylesheet yang tidak berlaku).Misalnya: Basik css pada html <em/> adalah font italic, jadi tidak ada gunanya jika menembahkan style css font-style:italic; pada elemen html <em/>, itu hanya menambah unused css pada halaman blog anda.
Apalagi menambahkan style css font-style:normal; pada elemen html <em/>, itu hanya akan membuat aturan css menjadi bertolak belakang dengan basiknya, jika ingin menampilkan elemen dengan font normal sebaiknya gunakan <span> atau <p>.
Pelajari lebih lanjut cara menghapus css duplikat lengkap dengan cara mendeteksi css duplikat (unused css).
Menghapus Unused Css Dari Widget Yang Tidak Digunakan.
Unused css jenis ini sebenarnya paling mudah untuk dihilangkan atau dihapus dan tidak menimbulkan kerusakan apapun pada tampilan blog, dan biasanya css untuk fitur atau widget disususn berurutan jika template blogger tersebut memiliki banyak fitur seperti kebanyakan template premium di themeforst.Jika kamu tidak terlalu paham fungsi semua css yang ada di template blog, gunakan webtool unused css detektor seperti jitbit.com/unusedcss/ untuk mendeteksi css yang tidak digunakan di templete blog anda.
Catatan: Css unused yang ditampilkan webtol mungkin tidak 100% akurat, jadi berhati-hati ketika menghapus unused css, lakukan dengan perlahan dan selalu pratinjau blog anda setelah menghapus unused css.
Css Third Party (Font Awesome)
Css unused third party dari font awesome sebenarnya sangat kecil, kisaran byte unused css yang berasal dari css third party seperti font awesome hanya 10 hingga 11 Kib saja, jika ingin menghapusnya berarti kamu menghaspus icon font awesome dari template blog.Itu memang masih memungkinkan untuk dilakukan, karena blog bisa saja menggunakan icon svg atau icon yang dibuat dari css dan html. Tetapi tentu saja itu akan memerlukan kerja keras dan keahlian yang mempuni.
Jika kamu tidak cukup ahli di html dan css kamu bisa abaikan bagian ini, cukup muat font awesome secara asynchron untuk menghindari render-blocking resources dari bundle css font awesome agar blog semakin ringan (cepat).[Lihat selengkapnya]
Kesimpulan: Menghapus unused css dari template blogger sebaiknya dilakukan dengan perlahan, jangan terburu-buru dalam melakukan penghapusan unused css. Unused css dalam jumlah kecil adalah hal biasa, tetapi jika terlalu banyak dan memungkinkan untuk dihapus sangat disayangkan jika tidak dihapus, karena ada peluang untuk meningkatkan performa blog terutama pada perenderan halaman paruh atas.
Komentar
Posting Komentar