Cara Membuat Loading Blog Terasa Lebih Cepat

Teman-teman pasti sudah tau beberapa website besar seperti facebook dan lainnya tidak merefresh halamannya pada saat berpindah halaman. Hal ini dikare
Rahasia Blog Memiliki Loading Cepat

Optimasi Blog - Pada artikel ini blog auqri akan sharing terkait bagaimana cara membuat loading blog terasa lebih cepat. Teman-teman pasti sudah tau beberapa website besar seperti facebook, twitter, youtube, dan lainnya tidak merefresh halamannya pada saat berpindah halaman. Hal ini dikarenakan website-website tersebut dibangun menggunakan Single page application (SPA). 

Single Page Application merupakan implementasi aplikasi web yang memuat hanya satu dokumen web. Dokumen yang dimuat diantaranya Javascript API seperti XML, HTTP Request (Ajax), dan fetch. Nah pada artikel ini blog auqri akan membahas bagaimana cara agar blog tidak me-reload halaman layaknya website yang menggunakan SPA.

Cara Membuat Loading Blog Terasa Lebih Cepat

Langkah pertama yang akan dilakukan yaitu memasang library hotwired/turbo, library ini diletakkan diatas kode </head> pada pada laman Edit HTML. Gunakan shortcut CTRL + F untuk memudahkan pencarian. 

Cara Membuat Loading Blog Terasa Lebih Cepat
<script async src='https://unpkg.com/@hotwired/turbo' /> 

Setelah ditambahkan lalu simpan template blog, dan lihat hasilnya. Nanti akan ada progress bar yang muncul diatas halaman, jika ingin dihilangkan atau ingin diubah warnanya bisa menggunakan kode yang ada dibawah ini:

Kode untuk menyembunyikan progress bar:

Untuk menghilangkan progress bar yang muncul, cukup tambahkan kode css berikut diatas kode ]]></b:skin>

.turbo-progress-bar {
  visibility: hidden;
}

Kode untuk mengubah warna progress bar:

Untuk mengubah warna progress bar yang muncul, tambahkan kode css berikut diatas kode ]]></b:skin>

.turbo-progress-bar {
  height: 5px; /*ukuran progress bar*/
  background-color: yellow; /*warna progress bar*/
}

Demikian tutorial cara membuat loading blog terasa lebih cepat, terkait demonya teman-teman bisa melihat demonya pada halaman blog auqri.blogspot.com ini. Blog auqri sudah dipasang library hotwired/turbo, hal ini akan membuat seakan punya blog dengan loading serasa berkedip

Jika ada pertanyaan silahkan tanyakan pada kolom komentar. 

Halo, saya adalah seorang partime blogger yang sudah aktif sejak tahun 2015. Saat ini saya tinggal di Belitung.

13 komentar

  1. Artikel-artikel lamaku nih mba, yang aku tilis sejak 2014 itu foto-fotonya masih gede-gede banget. Aku sendiri baru kenal SEO itu 2019. Bisa dibayangkan selama itu kalo aku posting di blog pakai foto segede gaban. Aku pun malas edit fotonya satu satu. Jadi yaaa loading blogku gak optimal deh. Gak ada yang otomatis gitu ya bisa menaikkan loading blog lebih cepat untuk WP.
  2. Kalo di wordpress caranya gimana ya om?
    Udah lama ga pake blogger soalnya :(
  3. Tengkyu for the trik my friend. :D
  4. Pas nih. AKu bisa percobaan sama blogku yang masih blogspot. Hehehee

    Siapa sih yang nggak pengen kalau loading blognya cepet. Kan bikin betah pengunjung juga bagus untuk performa blog.
  5. So far sih saya no issue dengan page loading, tapi sepertinya cara ini perlu dicoba, let's see what'll happen.

    Thanks for share mas.
  6. Dijamin sukses disemua blog ndak ya mas Andri? 😆.
    Kadang saya pengen gitu ngoprek lagi blog sendiri kayak waktu jaman masih single. Sekarang keadaannya uda punya 2buntut, pengen ngoprek tapi klo salah koding rasanya jadi males pengen benerin 😆.
    Anyway, thanks for sharing yak ^^
  7. Wow kebetulan banget saya pake blogspot. Tapi bagaimana kalau utk wordpress? Krna sya ingin beralih ke wordpress
  8. Blogku yang wordpress nih masih PR banget
    Artikel lama pakai fotonya gede-gede banget. Harus diperbaikin satu-satu
    Duh kayaknya ku tak sangguuup hiks
  9. Okeee.. Aku bookmark dulu ya infonya. Ini beneran, bermanfaat buatku
  10. Nice tips nih. Secara blogku lumayan lambat gak tahu kenapa. Mungkin karena foto-foto yang terlalu besar ukurannya. Jadi pas loading gak bisa cepet.
  11. Baru tahu aku caranya begitu. Loading cepat ini emang ngaruh banget sama kenikmatan pengunjung yg baca blog kita
  12. udah saya coba trik ini sejak lama mas.. di tahun 2020 kemarin.. hanya saja tampaknya gak work. memang cepat secara loading, akan tetapi masih ada bug saat load gambar jadi gak tampil. Kadang templat yang kita gunakan gak cocok dengan librari ini. tapi worth it di coba.
  13. Wah makasih banget tipsnya, mas. Ntar mau aku coba ah buat blogku kali aja bisa lebih cepat loadingnya
Tambahkan komentar anda disini