⚠️ Halaman ini membutuhkan JavaScript untuk tampil dengan benar. Mohon aktifkan JavaScript di pengaturan browser Anda.

10 Script Ampuh agar website Kamu Ngebut! 

Deddy Hidayat
Deddy Hidayat
10 Script Ampuh agar website Kamu Ngebut!

Kalau kamu pengen cara plug and play yang anti ribet, ada 10 script ringan tapi ampuh yang bisa langsung kamu pasang untuk meningkatkan kecepatan situs kamu. Jika tidak cocok? ya dihapus saja, Yuk, simak daftarnya dan lihat perubahan instan!

Daftar Isi

1. Quicklink.js

Url : https://getquick.link/

Fungsi: Bayangin gini, kamu baru mau ngeklik sebuah link di website, eh halaman tujuannya itu udah mulai di-download duluan di belakang layar! Keren, kan? Itu dia kerja si ⚡ Quicklink.js. dan ini buatan google loh.

Script:

<script src="https://unpkg.com/quicklink@2.2.0/dist/quicklink.umd.js"></script>  
<script>quicklink();</script>

Cara Penggunaan: Tempelkan script ini tepat di atas tulisan </body> (penutup body) di file HTML website kamu.

Bagus untuk: Semua jenis website, terutama yang punya banyak link internal. Cocok banget buat blog, portal berita, atau toko online yang pengen pengunjungnya ngerasa website-nya super cepat pas ngeklik.

2. Instant.page

Url : https://instant.page/

Fungsi: Mirip sama Quicklink.js, Instant.page juga punya misi *� bikin halaman langsung kebuka. Tapi, dia punya trik sendiri. Instant.page ini kerjanya pas kamu ngarahin kursor mouse ke sebuah link sekitar 60 milidetik (ini cepet banget, bahkan gak kerasa!) langsung mulai nyiapin halaman tujuan. Jadi, pas kamu klik, halamannya udah siap nongol deh. Ini bikin website kamu kerasa responsif banget!

Script:

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnSoxPneXRULJvJ/Kc0xIwrg/wQxXh08KmsyG6p2v/gB9R2W+SjeO/jB7p9r7c8L"></script>

Cara Penggunaan: Tempelkan script ini tepat di atas tulisan </body> di file HTML website kamu.

Bagus untuk: Semua website. Ini ampuh banget buat ningkatin “rasa” website kamu itu cepat di mata pengunjung. Pas banget buat Blogspot, WordPress, dan website kustom lainnya.

3. Flying Pages

Fungsi: 🏎️ Flying Pages ini bantu website kamu dengan cara memuat halaman bertahap. Konten dasarnya muncul duluan yang ringan dan cepat, nah baru deh setelah itu elemen-elemen yang lebih besar atau rumit dimuat di belakang layar. Jadi, pengunjung ngerasa website kamu itu ngebut banget dari awal, padahal proses loading masih jalan di baliknya.

Script:

<script src="https://unpkg.com/flying-pages"></script>

Cara Penggunaan: Tempelkan script ini tepat di atas tulisan </body> di file HTML website kamu.

Bagus untuk: Website yang punya banyak konten atau halaman yang kompleks. Ini bikin website kamu kerasa “ngebut” terus meskipun isinya bejibun.

4. Lazysizes (Buat Gambar & Video)

Url : https://github.com/aFarkas/lazysizes

Fungsi: Punya banyak gambar atau video di website? Kalau semua dimuat barengan pas halaman dibuka, pasti website jadi berat dan lemot!

Lazysizes ini solusinya! Script ini bakal menunda pemuatan 🏞️ gambar dan video sampai layar kamu (pas kamu scroll ke bawah). Jadi, halaman awal website kamu bisa dimuat lebih cepat karena gak perlu nunggu semua media selesai di-download.

Script:

<script src="https://unpkg.com/lazysizes@5.3.2/lazysizes.min.js" async=""></script>

Cara Penggunaan:

  • Tempelkan script ini di dalam <head> (kepala halaman) atau tepat di atas </body> di HTML kamu.
  • Ubah elemen media jadi lazy-load:
    <img data-src="gambar-kamu.jpg" alt="Deskripsi Gambar" class="lazyload">
    <video data-src="video-kamu.mp4" class="lazyload"></video>

Bagus untuk: Website yang punya banyak gambar atau video, seperti blog fotografi, portofolio online, toko online, atau galeri gambar.

5. Font Face Observer (Buat Font Kustom)

url : https://fontfaceobserver.com/

Fungsi: Font Face Observer ini bantu kamu ✒️ ngatur pemuatan font biar gak ganggu kecepatan. Script ini bisa tahu kapan font udah siap, jadi teks kamu bisa langsung muncul dengan rapi dan benar tanpa bikin website kelihatan “kosong” atau aneh sebentar.

Script:

<script src="https://unpkg.com/fontfaceobserver@2.1.0/fontfaceobserver.min.js"></script>  
<script>  
  var font = new FontFaceObserver('Nama Font Kamu'); // Ganti ‘Nama Font Kamu’ dengan nama font yang kamu pakai  
  font.load().then(function () {  
    document.documentElement.className += ' fonts-loaded';  
  });  
</script>

Cara Penggunaan:

  • Tempelkan script ini tepat di atas tulisan </body>.
  • Tambahkan CSS di file style kamu:
    body { font-family: sans-serif; }
    html.fonts-loaded body { font-family: 'Nama Font Kamu', sans-serif; }

Bagus untuk: Website yang pakai font kustom dari Google Fonts atau host sendiri.

url : https://turbo.hotwired.dev/

Fungsi: Turbolinks (sekarang bagian dari Hotwire Turbo) bikin pindah-pindah halaman di website kamu kerasa super cepat, kayak aplikasi di HP! Saat kamu ngeklik link internal, ⚡ Turbolinks bakal ngambil halaman baru tanpa reload penuh. Dia cuma ganti isi <body> lama dengan yang baru. Jadi, berselancar di website kamu kerasa mulus dan cepat.

Script:

<script type="module">  
  import { start } from "https://unpkg.com/@hotwired/turbo@7.3.0/dist/turbo.es2017-esm.js";  
  start();  
</script>

Cara Penggunaan: Tempelkan script ini di <head> atau tepat di atas </body>.

Bagus untuk: Website multi-halaman yang ingin navigasi mulus seperti aplikasi.

7. Preload.js

url : https://createjs.com/preloadjs

Fungsi: Kalau kamu punya hero image atau file CSS/JS penting di bagian atas halaman, Preload.js bisa minta browser ⏳ mengunduhnya lebih dulu. Dengan begitu, elemen kunci muncul secepat mungkin.

Script:

<script>  
  (function() {  
    var link = document.createElement('link');  
    link.rel = 'preload';  
    link.href = 'path/ke/gambar-penting.jpg'; // Ganti dengan file kamu  
    link.as = 'image';  
    document.head.appendChild(link);  
  })();  
</script>

Cara Penggunaan: Tempelkan di <head>, dan ubah href serta as sesuai file.

Bagus untuk: Semua website dengan elemen penting di viewport awal.

8. No-JS Fallback (Pakai Tag noscript)

Fungsi: Ini bukan script JavaScript, tapi trik di HTML yang pintar banget. Dia bantu mastikan website kamu gak “⛔ rusak” dan tetap bisa dilihat meskipun JavaScript belum dimuat, lagi dimuat, atau bahkan dimatiin sama pengunjungnya.

<noscript>
  <link rel="stylesheet" href="path/ke/style-tanpa-js.css">
  <div class="pesan-tanpa-js">
    Maaf, website ini butuh JavaScript untuk berfungsi penuh.
  </div>
</noscript>
/* Sembunyikan elemen yang cuma bisa jalan kalau ada JS */
.elemen-hanya-js {
  display: none !important;
}
/* Tampilkan elemen pengganti ini kalau gak ada JS */
.elemen-pengganti-tanpa-js {
  display: block !important;
}

Cara Penggunaan: Kamu tempatkan tag <noscript> ini di dalam <head> atau <body> kamu. Di dalamnya, kamu bisa taruh link ke file CSS khusus atau tulisan yang akan muncul cuma kalau JavaScript mati.

Bagus untuk: Semua website, sebagai cara aman dan mudah diakses kalau ada masalah JavaScript atau kalau pengunjung memang mematikan JS di browser mereka.

9. UpUp (Bikin Website Bisa Offline & Cepat Pakai Cache)

url : https://www.talater.com/upup/

Fungsi: UpUp ini cara super gampang buat bikin website kamu bisa diakses 🌐 offline dan secara otomatis nyimpen data (cache) di browser pengunjung. Ini berguna banget buat pengunjung yang balik lagi ke website kamu. Daripada harus download ulang semua file website.

Script:

<script src="//unpkg.com/upup/upup.min.js"></script>
<script>
  UpUp.start({
    'content-url': 'index.html', // Ini halaman utama yang mau disimpen (di-cache)
    'assets': ['/css/style.css', '/js/app.js', '/images/logo.png', '/tentang-kami.html'] // Daftar file lain yang mau disimpen
  });
</script>

Cara Penggunaan: Tempelkan script ini tepat di atas tulisan </body> (penutup body) di HTML kamu. Jangan lupa ganti index.html dan daftar assets dengan file-file yang bener-bener ada di website kamu.

Bagus untuk: Semua website, terutama yang pengen ngasih pengalaman super cepat buat pengunjung yang kembali, dan bahkan ngasih akses pas offline.

Url : https://www.talater.com/upup/

10. Cache-Control Meta Tag (Atur Cache Browser)

Fungsi: Ini bukan script JavaScript, tapi sebuah kode kecil di HTML yang penting banget buat ngatur gimana browser kamu nyimpen data website (cache). Dia ngasih tahu browser seberapa lama dia harus nyimpen file-file 💾 website kamu (kayak gambar, CSS, JS, dll.) di komputer pengunjung. Makin lama file itu disimpen di cache browser pengunjung, makin cepat website kamu kebuka pas kunjungan berikutnya, karena gak perlu download ulang!

Script (Ini adalah meta tag, bukan script JS):

<meta http-equiv="Cache-Control" content="max-age=604800, public">

Cara Penggunaan: Tempelkan baris kode ini di dalam <head> (kepala halaman) HTML kamu.

  • max-age=604800: Angka ini adalah waktu dalam detik. Artinya, browser akan menyimpan konten selama 604800 detik (yaitu 7 hari atau 1 minggu) sebelum ngecek lagi ke server. Kamu bisa ubah angka ini sesuai kebutuhan (misalnya, 3600 untuk 1 jam, 86400 untuk 1 hari).
  • public: Ini artinya konten ini boleh disimpan di cache browser pengunjung maupun di server perantara (proxy).

Bagus untuk: Semua website, karena ini adalah dasar dari teknik cache di sisi pengunjung yang efektif. Sangat gampang diterapkan di platform mana pun kayak Blogspot, WordPress (kalau kamu bisa ngedit bagian <head> template), atau website kustom.

Anda mungkin suka: