Splash Page itu Apa sih? Kenapa Masih Penting di 2025?
Kalau kamu pernah buka situs lalu muncul halaman singkat berisi “Pilih bahasa / Verifikasi usia / Coming soon” sebelum masuk konten utama, itu namanya splash page. Fungsinya simpel: filter pengunjung, kasih info krusial, atau bikin branding kencang.
Bedanya dengan landing page: splash page cuma jeda 1-2 detik, bukan jualan. Tapi kalau salah desain, bounce rate langsung naik. Di artikel ini gue kasih step-by-step bikin splash page sendiri: mulai desain, kode, sampai optimasi supaya Google tetep sayang.
Penyebab Splash Page Bisa bikin Bounce Rate Tinggi
Masalah utamanya: kecepatan & clarity. Data Google PageSpeed Insights menunjukkan tiap detik delay bikin konversi turun 20%. Splash page sering jadi biangnya karena:
- Background video HD nggak dikompres.
- JavaScript loader dipanggil di head, blok render.
- Tidak ada “Skip” button di mobile.
- Meta robots nyuruh Google indeks halaman kosong.
Nah, setelah tahu penyebabnya, kita masuk ke solusi.
Solusi: Bikin Splash Page 3 Langkap (HTML-CSS-JS)
Stack yang gue pakai: plain HTML, CSS di <style>, vanilla JS. Tanpa framework biar file < 15 kB. Cocok buat WordPress, Hugo, atau Jekyll.
1. Struktur HTML
Buatlah file splash.html di root:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, follow">
<title>Pilih Negara - TokoKita</title>
<link rel="canonical" href="https://tokokita.id/">
<style>/* css ada di bawah */</style>
</head>
<body>
<main id="splash">
<h1>Pilih lokasi pengiriman</h1>
<button data-negara="id">Indonesia</button>
<button data-negara="sg">Singapore</button>
<a href="#" id="skip">Lewati</a>
</main>
<script>/* js ada di bawah */</script>
</body>
</html>2. CSS Tanpa Render-Block
/* Minified 1,2 kB */
*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;color:#222;background:#f7f7f7;display:flex;height:100vh;align-items:center;justify-content:center}main{text-align:center;padding:2rem}h1{font-size:1.25rem;margin-bottom:1rem}button{display:block;width:200px;margin:.5rem auto;padding:.75rem;border:none;background:#ff3b30;color:#fff;border-radius:4px;cursor:pointer;font-size:1rem}button:hover{background:#d70015}#skip{display:inline-block;margin-top:1rem;color:#555;text-decoration:underline}3. JavaScript + LocalStorage
const negara = localStorage.getItem('negara');
if (negara) window.location.replace('/'); // sudah pilih, langsung redirect
document.querySelectorAll('button[data-negara]').forEach(btn => {
btn.addEventListener('click', e => {
localStorage.setItem('negara', e.target.dataset.negara);
window.location.replace('/');
});
});
document.getElementById('skip').addEventListener('click', () => {
window.location.replace('/');
});Total ukuran: ~4 kB. Di hosting murah pun load < 300 ms.
Optimasi SEO & UX (Checklist 5 Menit)
- noindex, follow – jangan sampai splash page masih indeks.
- Preload font & gambar pakai
<link rel="preload">. - Lazy-load background image pakai
background-image: url("data:image/svg+xml,%3Csvg...")dulu, ganti ke file asli lewat JS. - Tes Lighthouse sampai skor > 95.
- Pasang Google Analytics event tracking tombol negara untuk audit konversi.
Kesimpulan
Splash page bukan sekadar “halaman cantik”—ia bisa jadi gatekeeper sekaligus branding tool. Tapi kecepatan & clarity adalah raja. Dengan kode di atas kamu bisa launching dalam 30 menit, ukuran file di bawah 15 kB, dan bounce rate tetap terkendali. Langkah selanjutnya: integrasikan ke CMS favorit (WordPress tinggal include file splash.php di functions.php), lalu A/B test copy & warna CTA. Praktikkan sekarang, lalu share hasil PageSpeed-mu di Twitter tag @kodekreator—gue RT!
FAQ
Splash page berisi konten (pilihan bahasa, verifikasi usia), sedangkan preloader cuma animasi loading—tujuannya hanya menunggu halaman utama selesai render.
Jangan. Pasang meta robots “noindex, follow” supaya Google lewat dan indeks halaman utama saja.
Maksimal 2 detik. Lebih dari itu pastikan ada tombol “Skip” yang terlihat jelas.