Tips Ringan
Dalam proses pemuatan halaman web, template merupakan sumber beban utama yang mempengaruhi kecepatan pada saat proses tersebut terjadi.
Misalkan pada pemuatan halaman postingan blog. Jika postingan tersebut terdapat konten atau file berukuran besar sudah barang tentu akan semakin menambah beban muat setelah template itu sendiri yang mengurangi kecepatan halaman.
Karena template perannya mencakup seluruh halaman yang terdapat pada blog oleh karena itu ada baiknya melakukan pemilahan kode-kode yang terdapat dalam template untuk masing-masing halaman dengan tujuan :
untuk menampilkan kode yang berfungsi pada halaman dan menyembunyikan kode yang tidak berfungsi pada halaman tersebut.
Pada template Blogger pembagian jenis halaman bisa dilakukan menggunakan tag kondisional untuk memilah kode-kode dalam template.
Memilah kode-kode template Blogger
Seperti telah disebut diatas bahwa pada template Blogger pemilahan kode-kode template dapat dilakukan dengan memanfaatkan tag kondisional. Karena fungsi tag ini adalah untuk menentukan tampil atau tidaknya suatu elemen pada halaman yang dikunjungi. Namun tag tersebut juga dapat difungsikan juga pada kode-kode template.
Misal pada kode CSS, berikut ini selektor CSS yang sering ditemui :
.feed-view {}
.item-view {}
.search-view {}
.post-body {}CSS dengan selektor diatas biasanya banyak terdapat didalam template yang fungsinya menentukan jenis halaman.
Keterangan :
.feed-view hanya berfungsi pada halaman depan dan index (multiple item).
.item-view hanya berfungsi pada halaman postingan dan statis (single item).
.search-view hanya berfungsi pada halaman hasil pencarian saja.
.post-body hanya berfungsi pada postingan.
Tetapi semua kode CSS tersebut akan dirender disemua halaman meskipun tidak berfungsi disemua halaman sehingga terjadi pemuatan kode yang seharusnya tidak perlu dimuat.
Pada template asli Blogger terdapat 9 class body yang membedakan jenis halaman. class body tersebut berada dibawah tag <body>, seperti ini penampakan kode tag yang menentukan class body halaman: (berdasarkan tema SOHO)
<body>
<b:class cond='data:view.isPreview' name='preview'/>
<b:class cond='data:view.isHomepage' name='homepage-view'/>
<b:class cond='data:view.isArchive' name='archive-view'/>
<b:class cond='data:view.isLabelSearch' name='label-view'/>
<b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>
<b:class cond='data:view.isPost' name='post-view'/>
<b:class cond='data:view.isPage' name='page-view'/>
<b:class cond='data:view.isMultipleItems' name='feed-view'/>
<b:class cond='data:view.isSingleItem' name='item-view'/>
<b:class name='version-1-3-3'/>Lihat rincian atribut cond di postingan :Tag b:if
Praktik menyembunyikan kode template
Sebagai bahan praktik, terlebih dahulu buka salah satu halaman blog kamu lalu tekan tombol ctrl + u untuk melihat sumber halamannya.Setelah sumber halaman terbuka, tekan ctrl + f lalu ketikkan teks ini template-skin-1 atau copy paste saja teks tersebut ke kolom pencarian supaya lebih cepat lalu tekan enter.
Jika kode yang dicari sudah muncul seperti ini,
Selanjutnya, masuk di halaman edit html template blog tersebut. Cari kode CSS untuk b:template-skin seperti dibawah ini.
<b:template-skin>
<![CDATA[
body#layout .hidden,body#layout .invisible{display:inherit}
body#layout .page{width:60%}
body#layout.ltr .page{float:right}
body#layout.rtl .page{float:left}
body#layout .sidebar-container{width:40%}
body#layout.ltr .sidebar-container{float:left}
body#layout.rtl .sidebar-container{float:right}
]]>
</b:template-skin>Cara menyembunyikan kode CSS tersebut, tambahkan tag kondisional seperti ini :
<bif cond='data:view.isLayoutMode'> copy paste tag tersebut diatas tag <b:template-skin>.Kemudian buat buat tag penutup letakkan setelah tag </b:template-skin> sehingga akan tampil seperti ini :
<b:if cond='data:view.isLayoutMode'>
<b:template-skin>
<![CDATA[
body#layout .hidden,body#layout .invisible{display:inherit}
body#layout .page{width:60%}
body#layout.ltr .page{float:right}
body#layout.rtl .page{float:left}
body#layout .sidebar-container{width:40%}
body#layout.ltr .sidebar-container{float:left}
body#layout.rtl .sidebar-container{float:right}
]]>
</b:template-skin>
</b:if>Ini baru sebuah contoh kecil menyembunyikan kode yang tidak diperlukan pada halaman tertentu tapi tetap ditampilkan dan berfungsi pada halaman yang ditargetkan.
Cara yang digunakan pada praktik ini bisa diterapkan untuk memilah kode lainnya yang berfungsi pada masing-masing jenis halaman. Meskipun mungkin terkesan ringan / sepele tetapi cara ini bisa dicoba untuk membantu mengurangi beban pemuatan halaman seperti yang dimaksud.