Dizaman yang super cepat ini, siapa sih yang ga pengen punya website wuz wuz tanpa beban loading? Pastinya kebanyakan dari pemilik website mendambakan hal ini termasuk saya.
Mungkin beberapa dari kalian menyadari web ini dari beberapa hari yang lalu. Yap, loading saat berganti path atau berganti halaman bisa disebut sangat cepat bahkan bisa dibilang tanpa loading.
Nah karena itu, disini saya akan membagikan bagaimana cara agar website atau blog kamu menjadi super cepat dan tanpa loading. Dengan menggunakan @hotwired/turbo.
Sekaligus sedikit penjelasan detail kelebihannya selama 2 hari ini saya terapkan di blog ini dan apa saja kekurangannya? Apakah berpengaruh dengan adsense? dan Seberapa optimal jika diterapkan diwebsite kamu? Selenglapnya scroll kebawah.
Single-page Application
Etss.. ntar dulu.. Sebelumnya, mari berkenalan dulu dengan Single-page Application.
Single-page Application (SPA) atau bahasa indonesianya Aplikasi satu halaman. Yaitu aplikasi web atau situs web yang berinteraksi dengan pengguna dengan secara dinamis menulis ulang halaman web yang dibuka saat ini dengan data baru dari server web, alih alih metode default browser web yang memuat seluruh halaman baru.
Tujuannya adalah transisi yang lebih cepat yang membuat situs web terasa lebih seperti native app atau aplikasi asli.
Dalam SPA, refresh halaman tidak pernah terjadi. Sebagai gantinya, semua kode HTML, JavaScript, dan CSS yang diperlukan diambil oleh browser dengan satu pemuatan halaman, atau resource yang sesuai dimuat secara dinamis dan ditambahkan ke halaman jika diperlukan. Biasanya sebagai respons terhadap tindakan pengguna.
Belum paham? Mungkin kamu pernah menggunakan atau mengakses suatu website seperti youtube, google news, twitter, facebook, instagram, pada versi websitenya.
Saat kamu berganti path atau halaman biasanya pada progress bar pada perangkat mobile / handphone yang biasanya berupa garis biru. Namun yang membedakan dengan SPA, progress bar loading itu tergantikan dengan progress bar lain yang bisa dibilang berwarna kustom.
Atau malah tidak menampilkan loadingnya sama sekali seperti youtube. Walaupun pemuatannya memakan waktu agak lama diversi websitenya (kecepatan jaringan rumah saya), namun saya sama sekali tidak melihat ada loading pada saat memulai video atau berganti halaman disana.
 |
| Sebelum dipasang |
 |
| Setelah dipasang @hotwired/turbo |
Begitu pula pada web ini ketika berpindah halaman, progressbar / garis loading saya beri warna pink. Itulah salah satu ciri dari website yang menerapkan teknik ini.
Apa itu @hotwired/turbo ?
Dilansir dari website developernya https://hotwired.dev turbo merupakan serangkaian teknik pelengkap untuk mempercepat perubahan halaman dan pengiriman formulir, membagi halaman kompleks menjadi komponen, dan mengalirkan pembaruan halaman sebagian melalui WebSocket.
Semua tanpa menulis JavaScript sama sekali. Dan dirancang sejak awal untuk berintegrasi sempurna dengan aplikasi hybrid asli untuk iOS dan Android.
Mungkin untuk selebihnya kamu bisa melihat dokumentasinya disini https://turbo.hotwired.dev atau pada laman githubnya disini https://github.com/hotwired/turbo.
Dan sekarang bagaimana cara kita menerapkan Single-page Application pada website ataupun blogger dengan menggunakan library @hotwired/turbo.
Cara memasang @hotwired/turbo
Pertama, seperti biasa, jika kalian pengguna blogger maka kalian pergi dulu ke dashboard blogger. Kemudian edit HTML tema melalui setelan tema.
Selanjutnya kalian copy paste script dibawah ini diantara tag <head> dan </head>. Jika tidak ada, mungkin tag head sudah diparse menjadi <head>. Dan tinggal paste tepat dibawahnya.
<script async src='https://unpkg.com/@hotwired/[email protected]/dist/turbo.es2017-umd.js' />
Setelah itu jangan lupa save. Oh iya, kalian juga bisa kustomisasi progress bar loadingnya dengan menggunakan CSS.
Untuk pengguna blogger, kalian bisa memang kode CSS dibawah ini tepat di atas ]]></b:skin> pada edit HTML setelan tema.
.turbo-progress-bar {
height: 5px;
background-color: #ff1a94;
}
CSS diatas adalah untuk mengkustomisasi ukuran dan warna pada progress bar (garis saat loading). Sementara untuk menghilangkan progress bar alias agar terkesan sama sekali tanpa loading, kalian bisa ganti kode CSS diatas dengan kode:
.turbo-progress-bar {
visibility: hidden;
}
Setelah dipasang jangan lupa save tema. Dan ketika kalian kunjungi website kalian, akan jelas terasa perbedaannya. Website lebih wuz wuz, cepat tanpa loading.
Kekurangan & Efek samping
Eits tapi jangan senang dulu berikut beberapa kekurangan yang saya pribadi rasakan ketika menerapkan hotwired turbo pada blog ini.
- Terkadang script javascript yang ada pada halaman tidak terload sepenuhnya. Termasuk gambar pada related post.
- Setelah saya coba di website sebelah, saat ganti halaman memang terasa sangat cepat, namun CSS nya tidak tereksekusi, jadi harus refresh halaman dulu setiap ganti halaman.
- Dampak pada adsense, bagi yang menggunakan auto ads, masalah ini sering terjadi. Walau iklan display masih terload. Namun autoads sering tidak muncul.
Yaa kurang lebih itu saja masalah yang saya temukan dari 2 hari yang lalu saya mulai menerapkan @hotwired/turbo pada website ini (blogger based).
Sekian, Membuat Website / Blog Super Cepat Tanpa Loading dengan @hotwired turbo. Semoga bermanfaat.
Referensi:
www.evetry.com/cara-membuat-blogger-pindah-halaman-tanpa-reload