Mengapa Lazy Load Pada Jquery Penting Untuk Website Segmen Mobile?

: 366 | : 0 | : 09 April 2017 | Programming


Kemong 69
- Kontributor

Tags | Javascript | Web programming

Dengan cara konvensional, website yang menampilkan banyak foto akan membutuhkan waktu yang sangat lama untuk dibuka, mengapa? Karena browser baru akan menampilkan sebuah halaman website secara utuh jika semua file sudah lengkap diambil dari server.

Sebelum membahas lazy load, mungkin ada yang belum mengerti tentang apa itu JQuery. JQuery adalah sebuah pustaka Javascript yang kaya akan fitur. Seperti pustaka lainnya dalam bahasa pemrograman, JQuery dimaksudkan untuk mempercepat proses pengembangan suatu aplikasi website tanpa harus melakukan proses penulisan kode berulang-ulang untuk beberapa fitur umum yang dapat dipakai di berbagai macam website.

Nah Lazy Load adalah salah satu plug-in yang berkerja di atas JQuery, artinya lazy load hanya dapat berfungsi apabila seorang pengembang web juga menyertakan pustaka JQuery pada aplikasi website mereka. Salah satu fitur penting yang diberikan oleh lazy load adalah dengan adanya pustaka tersebut, sebuah aplikasi web yang menampilkan banyak foto sekaligus dalam satu halaman (SPA - Single Page Application) layaknya Instagram dapat berkerja dengan lebih cepat, bahkan pada device dengan spesifikasi hardware minim.

Seperti gambar diatas, dan sering kita alami sebagai pengguna website modern, jika kita mengunjungi sebuah website maka perhatian kita akan fokus pada beberapa foto atau gambar yang ada di halaman paling atas saja. Sementara itu jika kita scroll layar ke bawah akan muncul foto-foto yang sangat banyak. Nah, sebuah aplikasi browser yang kita gunakan untuk melihat sebuah website, secara otomatis akan melakukan fetching alias mengambil gambar apapun yang ada pada file HTML suatu halaman, jika sebuah halaman website besar seperti Instagram yang dapat menampilkan 50 foto sekaligus berapa waktu yang dibutuhkan pengguna hanya untuk meliha halaman website tersebut terbuka? 

Dengan cara konvensional, website yang menampilkan banyak foto akan membutuhkan waktu yang sangat lama untuk dibuka, mengapa? Karena browser baru akan menampilkan sebuah halaman website secara utuh jika semua file sudah lengkap diambil dari server. Itu berarti sebuah website dengan 50 foto dalam satu halaman, dengan metode konvensional (src pada tag img) membutuhkan waktu 50x lebih lambat dari pada sebuah website yang menampilkan 1 foto dalam satu halaman, karena browser harus menghubungi server 50 kali untuk mengambil file tersebut lalu menampilkannya secara utuh sebagai satu kesatuan halaman web yang lengkap.

Lazy load mengatasi masalah koneksi yang lambat pada perangkat mobile seperti smartphone, tablet dan laptop yang biasanya memiliki koneksi internet lambat dengan mengakali proses pemuatan gambar-gambar tersebut. Misalnya ada 50 tag img pada 1 halaman, lazy load hanya akan mengambil foto dari server dan menampilkannya kepada pengguna hanya pada saat pengguna ingin melihatnya. Pada saat seorang pengguna membuka halaman web tersebut, biasanya hanya ada 3-4 foto yang langsung tampil di layar, nah hanya segitu lah file yang diambil oleh lazy load dari server, sisa tag img lainnya yang tersembunyi di bawah baru akan diproses oleh lazy load pada saat pengguna scroll layarnya kebagian dimana tag img tersebut berada. Jadi bisa dikatakan bahwa lazy load ini memuat file foto secara on demand.

Karena proses pengambilan file foto tadi bersifat on demand maka konten dalam halaman sebuah website akan dapat ditampilikan dengan lebih cepat daripada harus melakukan penjemputan file-file foto terlebih dahulu yang sebenarnya tersembunyi di bawah dan tidak terlihat oleh pengguna sebelum pengguna tersebut menggeser layar browsernya ke bawah. Karena memakan sedikit data internet, makan pustaka Lazy Load ini cocok digunakan untuk semua website yang menampilkan banyak gambar sekaligus. Sementara website yang isi teksnya lebih banyak dari fotonya justru akan mengalami kerugian jika memakai pustaka ini.

Mengapa? Karena setiap pengguna membuka sebuah halaman ia akan mengambil file JQuery + Lazy Load dari server dan ini ukurannya lumayan besar. Jadi sangat tidak effisien jika lazy load ini justru digunakan oleh website yang memiliki konten berupa teks lebih banyak dari konten berupa gambar.

Untuk tutorial penggunaan lazy load pada sebuah halaman website silakan ke artikel berikutnya.

Login untuk melihat komentar


Powered by: