Modifikasi Script Untuk Memperbaiki Kinerja Widget Dan Mempercepat Loading - Bagian #2

Sebagai pengguna handphone Samsung GT C3312 Duos alias Samsung Champ Deluxe Duos, lambatnya proses loading atau penayangan adalah salah satu hal yang kerap kali terjadi ketika membuka laman web dengan muatan gambar cukup besar. Hal ini tidak lain disebabkan karena kemampuannya belumlah seberapa apabila dibandingkan dengan kemampuan perangkat mobile lain seperti iPhone ataupun perangkat yang telah menggunakan sistem operasi Android didalamnya.

Samsung GT C3312 Duos alias Samsung Champ Deluxe Duos merupakan salah satu diantara sekian banyak perangkat seluler yang menggunakan sistem operasi Java. NetFront v4.2 sebagai browser bawaan dan Opera Mini 6 sebagai browser lain yang terdapat didalamnya terasa kurang optimal apabila dipakai untuk mengakses dengan muatan laman cukup besar. Atas dasar pengalaman inilah kemudian penulis mencoba melakukan beberapa eksperimen guna menemukan solusi atas beratnya beban loading ketika membuka laman yang memiliki muatan besar dengan memakai perangkat mobile.

Modifikasi script atau kode untuk widget yang terpasang akhirnya menjadi sebuah pilihan yang dapat dijadikan sebagai salah satu cara guna meminimalkan muatan laman. Sehingga dengan demikian kinerja laman serta widget yang terpasang pun menjadi lebih optimal karena beban laman yang dimuat oleh browser menjadi berkurang, yang akhirnya berdampak pada peningkatan kecepatan loadng atau penayangan laman yang dibuka.

Contoh script atau kode widget yang dapat dimodifikasi misalnya adalah script untuk widget entri populer. Dalam hal ini misalnya modifikasi dimaksudkan untuk meniadakan cuplikan pratinjau gambar yang terdapat dalam artikel, walaupun setelan yang sebenarnya diterapkan terhadap widget tersebut adalah menampilkan daftar entri populer disertai dengan gambar. Guna memperjelas maksud dari hal tersebut, silakan Anda lihat terlebih dulu bagian bertanda kotak merah yang ditunjukkan dengan tanda panah pada gambar di atas.

Bagian yang bertanda kotak merah pada gambar di atas merupakan bagian yang menayangkan daftar entri populer versi desktop dan seluler blog ini. Namun seperti yang tampak pada gambar dapat Anda lihat bahwa keduanya ditayangkan dengan model tampilan yang berbeda yaitu, daftar judul artikel populer disertai dengan gambar pada tayangan komputer desktop dan hanya daftar judul artikel yang tidak disertai gambar pada tampilan seluler.

Sebagaimana termuat dalam artikel dengan judul “Modifikasi Script Untuk Mempercepat Loading Dan Memperbaiki Kinerja Widget - Bagian #1 ”, bahwasanya untuk membuat widget popular post menjadi seperti itu maka tidak lepas dari cara yang digunakan untuk membuat laman blog menjadi seperti tampilan web profesional. Dalam hal ini cara yang dimaksud adalah dengan memanfaatkan salah satu fungsi atau tag kondisional blogger untuk membedakan atau memisahkan prosedur yang dijalankan pada laman versi web dan mobile dengan langkah-langkah seperti di bawah ini.

Perhatikan bahwa popular post widget memiliki rangkaian script dengan format dasar seperti yang teringkas di bawah ini.

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Entri Populer' type='PopularPosts'>
  <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content popular-posts'>
      <ul>
        <b:loop values='data:posts' var='post'>
          <li>
            <!-- rangkaian kode default -->
          </li>
        </b:loop>
      </ul>
    </div>
  </b:includable>
</b:widget>

Dengan format yang seperti itu maka ketika template diberikan setelan khusus untuk tampilan mobile, daftar artikel populer yang ditayangkan pada tampilan mobile pun akan memiliki model yang sama dengan model yang ditayangkan pada tampilan desktop. Sehingga dengan menambahkan fungsi atau tag kondisional <b:if cond='data:blog.isMobile'>  pada rangkaian script tersebut pada akhirnya script yang akan dijalankan pada tampilan seluler dan desktop pun dapat dibedakan. Sebagai contoh misalnya apabila model daftar entri populer untuk tayangan desktop berisikan daftar judul artikel yang disertai gambar dan kemudian menginginkan agar yang ditayangkan pada tampilan mobile hanya berisikan judul artikelnya saja, maka rangkaian kode di atas dapat dimodifikasi sedemikian rupa sehingga menjadi seperti contoh di bawah ini.

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Entri Populer' type='PopularPosts'>
  <b:includable id='main'>
    <b:if cond='data:blog.isMobile'> <!-- 1 -->
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
            <li>
              <a expr:href='data:post.href'>
                <data:post.title/>
              </a>
            </li>
          </b:loop>
        </ul>
      </div>
    <b:else/> <!-- 2 -->
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
            <li>
              <!-- rangkaian kode default -->
            </li>
          </b:loop>
        </ul>
      </div>
    </b:if> <!-- 3 -->
  </b:includable>
</b:widget>

Perhatikan bahwa pada rangkaian kode tersebut akhirnya terdapat beberapa tambahan yang terletak pada bagian dengan keterangan angka 1 sampai dengan 2 dan dan pada bagian dengan keterangan angka 3. Yang artinya karena pada rangkaian script tersebut telah ditambahkan tag kondisional khusus <b:if cond='data:blog.isMobile'>, maka bagian yang terletak diantara keterangan angka 1 sampai dengan 2 akan berfungsi untuk menampilkan daftar artikel populer pada tampilan mobile, sedangkan bagian yang terletak diantara keterangan angka 2 sampai dengan 3 akan berfungsi untuk menampilkan daftar entri populer pada tampilan desktop.

Namun demikian perlu diingat bahwasanya teknik tersebut hanya berlaku jika Anda menerapkan setelan khusus pada widget yang terpasang. Dalam hal ini setelan yang dimaksud adalah setelan yang digunakan untuk menampilkan widget pada tampilan mobile yaitu dengan cara menambahkan mobile='yes' pada kode widget sehingga akhirnya widget yang dimaksud tidak hanya ditampilkan pada tayangkan desktop akan tetapi juga dimunculkan pada tayangan mode seluler.

Kecermatan, ketelitian, dan kehati-hatian juga sangat diperlukan dalam mengimplementasikan teknik ini, karena bila terjadi sedikit saja kekeliruan maka bisa jadi malah akan menimbulkan error pada template. Oleh sebab itu bila Anda ingin mencoba menerapkan teknik tersebut, sangat disarankan agar dilakukan backup terlebih dulu pada template sehingga bila terjadi kesalahan dapat segera dilakukan pemulihan.

Semoga berguna serta bermanfaat, dan apabila Anda mengalami kendala atau kesulitan dalam mengimplementasikan teknik tersebut, maka silakan poskan komentar untuk artikel ini guna menyampaikan permasalahan yang Anda alami dalam pengimplementasiannya.