Aplikasi Buku Keuangan Bendahara / Kas Umum Sekolah v4.00 Siap Cetak
Mempercepat Loading Blog Dengan Tag Kondisional Untuk Akses Mobile

Mempercepat Loading Blog Dengan Tag Kondisional Untuk Akses Mobile

Mempercepat Loading Blog Dengan Tag Kondisional Untuk Akses Mobile

Mempercepat Loading Blog Dengan Tag Kondisional Untuk Akses 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 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 == &quot;item&quot;'>
  <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 == &quot;false&quot;'>
.........................
</b:if>
Jika ada kode yang khusus tampil di perangkat mobile seperti 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 bisa gabungkan dengan tag kondisional postingan menjadi seperti berikut:

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
.........................
</b:if>
Jika kita aplikasikan untuk menghilangkan kode HTML kolom komentar di perangkat mobile, bisa menjadi seperti 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 menggunakan 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 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...

Share On :

Note :
  • Gunakan bahasa ramah lingkungan. Link promo masuk Spam
  • Jika tidak memiliki akun disqus, silahkan login dengan akun media sosial anda.
  • Gunakan parse tool untuk style teks dan kode HTML.
Copyright © | Proudly powered by Blogger
DMCA.com Protection Status