Jadi Berilmu Mempercepat Loading Blog Dengan Tag Kondisional Untuk Jalan Masuk Mobile

Kecepatan loading blog merupakan salah satu tehnik SEO yang sudah banyak dibahas dan diterapkan oleh kaum blogger untuk kenyamanan pengunjung dan mesin pencari. Apalagi ketika ini google sudah menganjurkan penggunaan template blog dengan accelerated mobile pages (AMP) alasannya ialah 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 alasannya ialah banyak instruksi HTML yang khusus tampil di perangkat mobile masih terbaca / di load oleh browser ketika diakses melalui perangkat desktop, atau sebaliknya.

Karena itu disini aku ingin membuatkan sedikit pandangan kepada teman-teman blogger. Blog aku ini (bisa juga blog anda) sangat jarang sekali ada komentar dari pengunjung unik terutama pengunjung dari perangkat mobile, bahkan tidak ada sama sekali. Sehingga aku berinisiatif untuk menghilangkan kolom komentar di perangkat mobile.

Maka untuk menghilangkan kolom komentar di perangkat mobile tidak cukup hanya memakai CSS menyerupai ini:

 @media screen and (max-width:610px){
 #comments{display:none !important;}
 }

alasannya ialah dengan hanya memakai CSS tersebut kolom komentar hanya tidak tampil, tapi tetap terbaca oleh browser.

Untuk itu, perlu tag kondisional semoga instruksi HTML untuk komentar juga tidak di load oleh browser;

 <b:includable id='comments' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='comments' id='comments'>
     <b:include data='post' name='disqus-comment'/>
   </div>
  </b:if>
 </b:includable>

yang aku tandai ialah tag kondisional halaman postingan, kita perlu menambahkan tag kondisional khusus perangkat mobile berikut ini:

Untuk menghilangkan instruksi di perangkat mobile, silahkan gunakan tag kondisional berikut:

 <b:if cond=' data:blog.isMobileRequest == &quot;false&quot;'>
 .........................
 </b:if>

Jika ada instruksi yang khusus tampil di perangkat mobile menyerupai tombol share whatsapp (WA), silahkan gunakan tag kondisional berikut:

 <b:if cond=' data:blog.isMobileRequest == &quot;true&quot;'>
 .........................
 </b:if>

Dari tag kondisional mobile tersebut, kita dapat gabungkan dengan tag kondisional postingan menjadi menyerupai berikut:

 <b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
 .........................
 </b:if>

Jika kita aplikasikan untuk menghilangkan instruksi HTML kolom komentar di perangkat mobile, dapat menjadi menyerupai ini

 <b:includable id='comments' var='post'>
 <b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
   <div class='comments' id='comments'>
   <b:include data='post' name='disqus-comment'/>
   </div>
 </b:if>
 </ b:includable>

Begitu juga untuk script disqus (jika memakai komentar disqus)

 <b:includable id='disqus-comment' var='post'>
 <b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
  <script type='text/javascript'>
   ...............
   ...............
  </script>
 </b:if>
 </b:includable>

Sidebar

 <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
   <div id='sidebar-right'>
   ....................
   </div>
 </b:if>

widget

 <b:widget id='HTML2' locked='false' title='' type='HTML' visible='true'>
   <b:includable id='main'>
  <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
   .....................
   .....................
  </b:if>
   </b:includable>
 </b:widget>

Jika blog anda hanya memakai komentar disqus saja, maka anda dapat menghapus isi dari 2 instruksi 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 rujukan saja, selebihnya dapat anda aplikasikan sendiri. Dengan begitu, maka instruksi HTML blog anda akan diakses oleh browser sesuai peruntukannya masing-masing. Selesai dan selamat mencoba...