Kecepatan loading blog merupakan salah satu tehnik SEO yang sudah banyak dibahas dan diterapkan oleh kaum blogger untuk kenyamanan pengunjung dan mesin pencari. Apalagi saat ini google sudah menganjurkan penggunaan template blog dengan accelerated mobile pages (AMP) karena template menjadi faktor utama untuk loading super cepat.
Namun banyak kaum blogger yang tidak menyadari bahwa meskipun loading blognya sudah cepat, ternyata masih sedikit lambat karena banyak kode HTML yang khusus tampil di perangkat mobile masih terbaca / di load oleh browser ketika diakses melalui perangkat desktop, atau sebaliknya.
Karena itu disini saya ingin berbagi sedikit pandangan kepada teman-teman blogger. Blog saya ini (bisa juga blog anda) sangat jarang sekali ada komentar dari pengunjung unik terutama pengunjung dari perangkat mobile, bahkan tidak ada sama sekali. Sehingga saya berinisiatif untuk menghilangkan kolom komentar di perangkat mobile.
Maka untuk menghilangkan kolom komentar di perangkat mobile tidak cukup hanya menggunakan CSS seperti ini:
@media screen and (max-width:610px){
#comments{display:none !important;}
}karena dengan hanya menggunakan CSS tersebut kolom komentar hanya tidak tampil, tapi tetap terbaca oleh browser.
Untuk itu, perlu tag kondisional supaya kode HTML untuk komentar juga tidak di load oleh browser;
<b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>
</b:if>
</b:includable>yang saya tandai adalah tag kondisional halaman postingan, kita perlu menambahkan tag kondisional khusus perangkat mobile berikut ini:
Untuk menghilangkan kode di perangkat mobile, silahkan gunakan tag kondisional berikut:
<b:if cond=' data:blog.isMobileRequest == "false"'>
.........................
</b:if>
<b:if cond=' data:blog.isMobileRequest == "true"'>
.........................
</b:if>Dari tag kondisional mobile tersebut, kita bisa gabungkan dengan tag kondisional postingan menjadi seperti berikut:
<b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "false"'>
.........................
</b:if>
<b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "false"'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>
</b:if>
</ b:includable>Begitu juga untuk script disqus (jika menggunakan komentar disqus)
<b:includable id='disqus-comment' var='post'>
<b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "false"'>
<script type='text/javascript'>
...............
...............
</script>
</b:if>
</b:includable>Sidebar
<b:if cond='data:blog.isMobileRequest == "false"'>
<div id='sidebar-right'>
....................
</div>
</b:if>
<b:widget id='HTML2' locked='false' title='' type='HTML' visible='true'>
<b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
.....................
.....................
</b:if>
</b:includable>
</b:widget>Jika blog anda hanya menggunakan komentar disqus saja, maka anda bisa menghapus isi dari 2 kode js untuk threaded comment berikut ini;
<b:includable id='threaded_comment_js' var='post'>
...............
ISI YANG PERLU DIHAPUS
...............
</b:includable>
<=========================>
<b:includable id='threaded-comment-form' var='post'>
...............
ISI YANG PERLU DIHAPUS
...............
</b:includable>kode-kode diatas hanya sekedar contoh saja, selebihnya bisa anda aplikasikan sendiri. Dengan begitu, maka kode HTML blog anda akan diakses oleh browser sesuai peruntukannya masing-masing. Selesai dan selamat mencoba...
