Cara Gue Ngehasilin Website Cepat Tanpa Framework Berat

 

🧠 Pembuka — Ketika Framework Mulai Bikin Lelah

Gue inget banget waktu itu gue lagi ngerjain proyek kecil buat temen.
Cuma website portfolio sederhana, tapi karena terbiasa pakai framework besar kayak React atau Next.js, gue otomatis mulai setup project pakai mereka.

Tapi pas baru setup aja, ukurannya udah lebih dari 250MB 😅
Belum install dependency, belum build. Gue mulai mikir,

“Ini website cuma 3 halaman, tapi setup-nya kayak bikin SaaS.”

Akhirnya gue ambil keputusan berani — bikin dari nol, tanpa framework besar.
Cuma pakai HTML, CSS, dan sedikit JavaScript.
Awalnya gue kira bakal susah, tapi hasil akhirnya justru lebih cepat, bersih, dan ringan banget 🚀

---

💻 Isi — Nyari Jalan Tengah antara Simpel dan Cepat

🧩 Langkah Pertama: Struktur Dasar yang Efisien

Gue mulai dari bikin struktur folder yang super sederhana:

/project
 ┣ index.html
 ┣ /assets
 ┃ ┣ style.css
 ┃ ┗ script.js
 ┗ /images

Tanpa config, tanpa package.json, tanpa node_modules.
Semuanya manual dan langsung jalan di browser.
Gue bahkan gak pakai server lokal dulu, cukup buka file index.html langsung dari browser.

HTML-nya pun gue buat sebersih mungkin: gak ada div berlebihan, gak ada elemen yang gak perlu.
Karena semakin kompleks struktur DOM lo, semakin berat juga browser nge-render-nya.

---

🎨 Langkah Kedua: Styling Efisien tanpa Framework

Biasanya gue pakai Bootstrap atau Tailwind, tapi kali ini gue pengen pure CSS.
Biar gak ngulang gaya di tiap elemen, gue bikin utility mini CSS versi gue sendiri.

Contohnya:

.flex { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.btn {
  background: #2563eb;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.btn:hover { background: #1d4ed8; }

Dengan begini, gue punya class reusable yang mirip Tailwind tapi jauh lebih kecil ukurannya — cuma 5KB!
Gue juga pakai font sistem kayak system-ui biar gak perlu load font eksternal.
Itu lumayan banget buat ngurangin waktu loading.

---

⚙️ Langkah Ketiga: JavaScript Secukupnya

Gue cuma butuh beberapa fungsi interaktif kayak menu dropdown, animasi kecil, dan form validation.
Daripada install library besar kayak jQuery atau GSAP, gue nulis skrip kecil manual.

Misalnya buat toggle menu:

const menuBtn = document.getElementById("menu-btn");
const nav = document.getElementById("nav");

menuBtn.addEventListener("click", () => {
  nav.classList.toggle("open");
});

Selesai! Tanpa dependensi, tanpa build tool.
Ukuran script.js gue bahkan cuma 3KB.

Dan karena gak ada proses bundling, waktu refresh atau reload jadi instan banget.

---

🚀 Langkah Keempat: Optimasi Performa

Nah, di bagian ini gue mulai serius mainin performa.
Tujuannya cuma satu: load secepat mungkin tanpa kehilangan tampilan.

Berikut trik yang gue pake:

1. Gambar dikompres maksimal.
   Gue pakai tinypng.com buat compress semua gambar.
   Ukuran turun 70% tanpa ngorbanin kualitas.

2. Lazy load untuk gambar bawah.

   <img src="hero.jpg" loading="lazy" alt="Hero Image" />
   

   Jadi gambar bawah baru ke-load kalau udah kelihatan di layar.

3. Minify CSS & JS.
   Pakai ekstensi VS Code Minify All. Hasilnya, style.css turun dari 12KB ke 4KB.

4. Gunakan preload font & asset penting.

   <link rel="preload" href="/assets/style.css" as="style" />
   

5. Gunakan meta tag cache.
   Biar browser nyimpen file lokal dan gak download ulang setiap buka halaman.

Hasil akhir: website statis dengan skor Lighthouse 99/100 dan ukuran total halaman cuma 60KB. 😎

---

💡 Langkah Kelima: Hosting Super Cepat dan Gratis

Biar makin ringan, gue hosting di GitHub Pages.
Simple banget — cukup push file ke repo dan aktifin Pages.
Tiap update tinggal git push, website langsung ke-refresh.

Alternatif lainnya bisa juga pakai Netlify atau Vercel.
Mereka punya CDN global, jadi walaupun lo gak pakai framework besar, website lo tetap super cepat di-load dari mana aja 🌍

---

🌈 Penutup — Kadang “Less is More” Itu Beneran Nyata

Setelah proyek itu selesai, gue dapet insight yang bener-bener nempel di kepala:

“Framework bukan keharusan. Tujuan utama kita tetap: bikin web cepat, efisien, dan enak dipakai.”

Sekarang setiap kali mulai proyek baru, gue selalu mikir dulu:
Apakah bener-bener butuh framework besar, atau cukup HTML + CSS + JS?

Kadang, dengan setup sederhana, kita justru bisa lebih fokus ke pengalaman pengguna dan isi konten, bukan ribet di konfigurasi.
Website kecil tapi cepat, itu yang akhirnya bikin pengunjung betah dan balik lagi.

---

🔧 Kesimpulan: Kunci Website Cepat Tanpa Framework Berat

• Gunakan struktur sederhana (HTML, CSS, JS dasar).

• Hindari library besar kalau gak perlu.

• Kompres semua aset (gambar, CSS, JS).

• Gunakan caching dan lazy load.

• Hosting di platform yang punya CDN global (kayak GitHub Pages / Netlify).

---

🚀 CTA Penutup

Pingin website lo ngebut tapi gak mau ribet setup framework?
Coba cara ini dulu — kadang yang simpel justru paling efektif! 💪

---

Keyword SEO:
website cepat tanpa framework, optimasi web ringan, cara bikin web cepat, frontend ringan, cerita web developer, tanpa React atau Bootstrap