7 Kesalahan Mobile Website yang Mahal

Buka website bisnis Anda sekarang dari HP. Bukan dari laptop — dari HP, dengan jaringan 4G biasa.

Berapa detik loading-nya? Bisa dibaca teksnya tanpa zoom? Tombol WhatsApp-nya mudah ditekan? Apakah ada sesuatu yang bergeser atau berubah posisi saat halaman dimuat?

Jika Anda belum pernah melakukan ini, kemungkinan besar ada masalah yang selama ini tidak Anda sadari — sementara calon pelanggan sudah merasakannya dan pergi diam-diam.

96% pengguna internet Indonesia mengakses web via smartphone.¹ Artinya hampir semua calon pelanggan Anda bertemu bisnis Anda pertama kali di layar 6 inci, bukan monitor 24 inci. Website yang tidak dioptimasi untuk pengalaman ini bukan hanya kehilangan konversi — ia aktif mengusir calon pelanggan ke kompetitor.

Artikel ini mengidentifikasi 7 kesalahan mobile yang paling spesifik dan paling merusak — bukan teori umum “website harus cepat”, tapi kesalahan teknis konkret yang bisa Anda cek sendiri hari ini.

---

Verdict Cepat

Kesalahan	Tingkat Kerusakan	Skor
Gambar tidak dioptimasi — loading lambat	Sangat Tinggi	💀 9.5/10
Tidak ada click-to-call / WhatsApp button	Sangat Tinggi	💀 9/10
Viewport tidak dikonfigurasi	Tinggi	💀 8.5/10
Layout shift (CLS tinggi) saat halaman dimuat	Tinggi	💀 8/10
Font terlalu kecil — tidak terbaca tanpa zoom	Tinggi	💀 8/10
Tombol terlalu rapat — salah tekan terus	Sedang–Tinggi	💀 7.5/10
Form tidak mobile-friendly	Sedang	💀 7/10

---

Kesalahan #1 — Gambar Tidak Dioptimasi: Pembunuh Loading Paling Umum

Tingkat Kerusakan: Sangat Tinggi | Skor: 💀 9.5/10

Ini penyebab nomor satu website bisnis lokal lambat di mobile. Foto produk, foto tim, foto interior yang diambil dari kamera HP atau DSLR memiliki ukuran 2–8MB per gambar. Di jaringan 4G Indonesia rata-rata, gambar 3MB membutuhkan waktu 4–6 detik untuk dimuat — sendiri.²

Cara cek:

Buka PageSpeed Insights → masukkan URL → pilih Mobile → lihat rekomendasi “Properly size images” dan “Serve images in next-gen formats”. Jika keduanya muncul, gambar Anda adalah masalah utama.

Yang harus diubah:

Format Lama	Target Format	Ukuran Maksimal	Tools Gratis
JPEG/PNG besar	WebP	< 200KB per gambar	Squoosh.app
GIF animasi	WebP animasi / video MP4	< 500KB	Squoosh.app
PNG logo	SVG atau WebP	< 50KB	SVGOMG

Dampak nyata: Mengoptimasi gambar saja — tanpa perubahan lain — bisa memotong waktu loading 40–70% dan mendorong skor LCP dari “Poor” ke “Good”.²

⚠️ Perhatian: Jangan hanya mengubah ukuran display gambar via CSS (width: 200px). Ini menyembunyikan gambar besar di layar tapi file tetap diunduh penuh. Ukuran file harus dikurangi sebelum diupload.

---

Kesalahan #2 — Tidak Ada Click-to-Call atau Tombol WhatsApp

Tingkat Kerusakan: Sangat Tinggi | Skor: 💀 9/10

Pengguna mobile yang mencari layanan lokal hampir selalu dalam kondisi “siap bertindak sekarang” — mereka butuh dokter, ingin pesan makanan, perlu bengkel. Setiap langkah tambahan antara niat dan tindakan menyebabkan sebagian dari mereka menyerah.

Tanpa tombol click-to-call, pengguna harus: lihat nomor → ingat atau screenshot → buka dialer → ketik manual → telepon. Lima langkah. Dengan tombol click-to-call: tekan → telepon. Satu langkah.

Cara mengimplementasi:

Tombol telepon:

<a href="tel:+6281234567890" class="btn-call">Hubungi Kami Sekarang</a>

Tombol WhatsApp:

<a href="https://wa.me/6281234567890?text=Halo%2C%20saya%20ingin%20konsultasi" class="btn-wa">Chat WhatsApp</a>

Posisi yang efektif:

• Di bagian atas halaman (above the fold) — terlihat tanpa scroll
• Di footer setiap halaman
• Di halaman kontak — paling besar dan paling jelas
• Sticky button di sisi kanan/bawah layar yang mengikuti scroll

💡 Pro Tip: Untuk klinik dan bisnis layanan, tambahkan pesan pre-filled di link WhatsApp — misalnya “Halo, saya ingin jadwal konsultasi” — sehingga calon pelanggan tidak perlu mengetik dari nol. Ini mengurangi friction dan meningkatkan tingkat respons pertama.

---

Kesalahan #3 — Viewport Tidak Dikonfigurasi

Tingkat Kerusakan: Tinggi | Skor: 💀 8.5/10

Ini adalah kesalahan paling fundamental tapi masih ditemukan di banyak website lama di Indonesia. Tanpa tag <meta name="viewport"> yang benar, browser mobile akan me-render website dalam lebar desktop penuh lalu mengecilkannya — menghasilkan tampilan yang terlihat seperti website dizooming out, teks sangat kecil, dan tidak bisa digunakan tanpa pinch-to-zoom.

Cara cek: Lihat source code halaman Anda (klik kanan → View Page Source) dan cari baris ini di dalam <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Jika tidak ada, atau jika ada user-scalable=no atau maximum-scale=1 — itulah masalahnya.

Yang benar:

<meta name="viewport" content="width=device-width, initial-scale=1">

Yang salah (dan mengapa):

Konfigurasi Salah	Dampak
Tidak ada tag viewport	Website terlihat seperti versi desktop dikecilkan
user-scalable=no	Pengguna tidak bisa zoom — aksesibilitas rusak, Google penalti
maximum-scale=1	Sama seperti user-scalable=no — dilarang Google
initial-scale=2	Halaman dimuat dalam kondisi sudah di-zoom — layout kacau

⚠️ Perhatian: user-scalable=no tidak hanya buruk untuk UX — ini secara eksplisit melanggar pedoman aksesibilitas web (WCAG 1.4.4) dan bisa menjadi faktor ranking negatif di Google Mobile-First Indexing.

---

Kesalahan #4 — Layout Shift (CLS Tinggi): Tombol yang Bergeser Saat Ditekan

Tingkat Kerusakan: Tinggi | Skor: 💀 8/10

Cumulative Layout Shift (CLS) adalah metrik yang mengukur seberapa banyak elemen halaman bergeser dari posisinya saat konten dimuat. Dampak paling merusak: pengguna yang akan menekan tombol “Hubungi Kami” — tiba-tiba tombol bergeser ke bawah setelah banner iklan dimuat, dan pengguna malah menekan iklan atau elemen lain.

Penyebab CLS yang paling umum:

1. Gambar dan iklan tanpa dimensi yang dideklarasikan — browser tidak tahu berapa ruang yang dibutuhkan sebelum gambar dimuat, sehingga konten di bawahnya bergeser
2. Font web yang dimuat terlambat — teks dirender dengan font sistem dulu (ukuran berbeda), lalu bergeser saat font asli dimuat (FOUT)
3. Banner atau widget yang dimuat dinamis (iklan, chatbot, cookie notice) yang mendorong konten ke bawah
4. Animasi yang menggunakan top, left, atau margin alih-alih transform

Cara cek CLS: PageSpeed Insights → tab Mobile → lihat nilai CLS. Target: di bawah 0.1. Di atas 0.25 dianggap “Poor” oleh Google.

Fix tercepat: Tambahkan atribut width dan height ke semua tag <img>:

<img src="foto-klinik.webp" width="800" height="600" alt="Klinik Sehat Bersama">

Ini memberi tahu browser berapa ruang yang harus disisihkan sebelum gambar dimuat — menghilangkan layout shift dari gambar.

---

Kesalahan #5 — Font Terlalu Kecil: Terbaca di Desktop, Tidak Terbaca di HP

Tingkat Kerusakan: Tinggi | Skor: 💀 8/10

Website yang dirancang di layar 24 inci dengan resolusi tinggi sering terlihat elegan dengan font 12–13px. Di HP 6 inci dengan layar yang tidak terlalu tajam, teks yang sama menjadi tidak terbaca tanpa memperbesar layar.

Standar minimum yang aman:³

• Body text: minimal 16px
• Teks sekunder/caption: minimal 14px
• Tidak ada teks fungsional di bawah 12px

Cara cek: PageSpeed Insights → tab Mobile → lihat peringatan “Text too small to read”. Atau buka website di HP dan coba baca paragraf penuh tanpa zoom — jika Anda perlu menyipitkan mata, ukurannya terlalu kecil.

Kesalahan tambahan yang sering menyertai:

Masalah	Dampak
Line-height terlalu rapat (< 1.4)	Baris teks terlalu dekat — sulit dibaca saat scroll
Kontras teks rendah (abu terang di putih)	Tidak terbaca di layar outdoor / sinar matahari
Teks dekoratif tipis (font-weight: 300)	Terlihat elegan di desktop, menghilang di mobile

💡 Pro Tip: Gunakan WebAIM Contrast Checker untuk memvalidasi rasio kontras teks Anda. Rasio minimum 4.5:1 untuk teks normal, 3:1 untuk teks besar (18px+). Teks yang lolos standar aksesibilitas juga lebih terbaca di kondisi cahaya apapun.

---

Kesalahan #6 — Tombol Terlalu Rapat: Salah Tekan Terus

Tingkat Kerusakan: Sedang–Tinggi | Skor: 💀 7.5/10

Jari manusia rata-rata memiliki lebar ujung sekitar 9–10mm. Google dan Apple sama-sama merekomendasikan ukuran tap target minimal 48x48px untuk semua elemen yang bisa ditekan. Tombol, link navigasi, checkbox, dan ikon yang lebih kecil dari ini menghasilkan “fat finger error” — pengguna menekan elemen yang salah.

Kasus yang paling merusak konversi:

• Link navigasi yang terlalu rapat satu sama lain — pengguna menekan halaman yang salah
• Tombol “Batal” dan “Konfirmasi” yang berdekatan di form — pengguna membatalkan formulir yang sudah diisi
• Ikon media sosial yang terlalu kecil di footer — tidak bisa ditekan dengan akurat
• Tombol CTA yang terlalu kecil di mobile padahal besar di desktop

Cara cek: PageSpeed Insights → tab Mobile → lihat peringatan “Tap targets are not sized appropriately”. Ini akan menampilkan daftar spesifik elemen mana yang terlalu kecil.

Aturan praktis:

• Semua tombol CTA: minimal 48px tinggi, lebar penuh layar atau minimal 200px
• Link navigasi: beri padding vertikal minimal 12px di setiap item
• Ikon interaktif: minimal 44x44px area sentuh, bahkan jika ikon visualnya lebih kecil

---

Kesalahan #7 — Form yang Tidak Mobile-Friendly

Tingkat Kerusakan: Sedang | Skor: 💀 7/10

Form kontak, form pendaftaran, atau form booking yang tidak dioptimasi untuk mobile adalah salah satu titik konversi yang paling sering bocor. Pengguna yang sudah berniat mengisi form — tapi kemudian menyerah karena form-nya menyulitkan — adalah kehilangan konversi yang seharusnya tidak terjadi.

Kesalahan form mobile yang paling umum:

Kesalahan	Dampak	Fix
Tidak ada inputmode / type yang tepat	Keyboard numerik tidak muncul untuk input telepon	Gunakan type="tel" untuk nomor HP
Field terlalu kecil — susah diketuk	Pengguna menekan field yang salah	Tinggi field minimal 44px
Label di dalam field (placeholder only)	Label hilang saat mulai mengetik — pengguna lupa isian apa	Gunakan label eksternal di atas field
Terlalu banyak field wajib	Pengguna malas mengisi	Minta hanya nama + nomor HP untuk kontak awal
Tidak ada autocomplete	Pengguna harus ketik manual semua	Tambahkan atribut autocomplete
Submit button tidak terlihat tanpa scroll	Pengguna tidak sadar ada tombol submit	Pastikan tombol submit selalu visible

Prinsip form mobile yang konversi tinggi: Kurangi field sebanyak mungkin. Untuk bisnis lokal, form terbaik seringkali hanya dua field: nama dan nomor HP. Sisanya bisa ditanyakan via WhatsApp atau telepon setelah kontak pertama terjadi.

---

Matriks Prioritas Perbaikan Mobile

Kesalahan	Kerusakan	Effort Fix	Prioritas
Optimalkan semua gambar	Sangat Tinggi	Sedang	🔴 Minggu ini
Tambah click-to-call & WhatsApp button	Sangat Tinggi	Rendah	🔴 Hari ini
Tambah/perbaiki tag viewport	Tinggi	Sangat Rendah	🔴 Hari ini
Fix CLS (tambah dimensi gambar)	Tinggi	Rendah	🔴 Minggu ini
Perbesar font body ke 16px+	Tinggi	Rendah	🟡 Minggu ini
Perbesar tap targets	Sedang–Tinggi	Sedang	🟡 Bulan ini
Perbaiki form mobile	Sedang	Sedang	🟡 Bulan ini

---

Checklist Audit Mobile Mandiri (30 Menit)

Cek via PageSpeed Insights

• Buka pagespeed.web.dev → masukkan URL → pilih Mobile
• Skor LCP — di bawah 2.5 detik?
• Skor CLS — di bawah 0.1?
• Ada peringatan “Text too small”?
• Ada peringatan “Tap targets not sized appropriately”?
• Ada rekomendasi “Properly size images”?

Cek Visual di HP

• Buka website di HP dengan jaringan 4G (bukan WiFi)
• Berapa detik sampai konten utama muncul?
• Bisa baca teks tanpa zoom?
• Ada tombol WhatsApp atau click-to-call yang terlihat jelas?
• Coba tekan setiap tombol — ada yang salah tekan karena terlalu rapat?
• Scroll dari atas ke bawah — ada elemen yang bergeser tiba-tiba?

Cek Source Code

• Ada <meta name="viewport" content="width=device-width, initial-scale=1">?
• Tidak ada user-scalable=no atau maximum-scale=1?
• Semua tag <img> punya atribut width dan height?

---

Pertanyaan yang Sering Ditanyakan (FAQ)

Bagaimana cara mengecek apakah website saya sudah mobile-friendly? Gunakan PageSpeed Insights (pagespeed.web.dev) — masukkan URL, pilih Mobile. Atau buka website langsung dari HP dengan jaringan 4G untuk pengalaman nyata pengguna.²

Berapa ukuran font minimum yang aman untuk mobile? Minimal 16px untuk body text. Di bawah 12px akan ditandai sebagai masalah oleh PageSpeed Insights dan mengurangi keterbacaan secara signifikan.³

Apa itu CLS dan mengapa berbahaya? CLS mengukur seberapa banyak elemen halaman bergeser saat dimuat. CLS tinggi berarti tombol atau link berpindah posisi saat pengguna hendak menekannya — frustrasi langsung dan sinyal negatif untuk Google.²

Apakah click-to-call benar-benar meningkatkan konversi? Ya. Pengguna mobile yang mencari layanan lokal seringkali siap bertindak sekarang. Menghilangkan friction antara niat dan tindakan secara langsung meningkatkan jumlah panggilan masuk.

Seberapa besar pengaruh gambar tidak dioptimasi? Gambar adalah penyebab paling umum LCP yang buruk. Mengoptimasi gambar ke format WebP di bawah 200KB bisa memotong waktu loading 40–70% tanpa penurunan kualitas visual yang terlihat.²

---

Audit Mobile Anda Sekarang

💡 Cek skor mobile website Anda sekarang di PageSpeed Insights. Jika skor di bawah 70, hampir pasti ada satu atau lebih dari 7 kesalahan di atas yang aktif mengusir calon pelanggan. Untuk pemahaman lebih dalam tentang Core Web Vitals dan dampaknya pada ranking lokal, baca 11 tips mobile dan Core Web Vitals yang langsung pengaruhi ranking lokal.

Mulai dari yang paling mudah: tambahkan tombol click-to-call dan WhatsApp hari ini. Tidak membutuhkan developer, tidak membutuhkan redesign — tapi langsung menutup satu titik konversi yang paling sering bocor.

---

Website bisnis Anda sudah diaudit mobile dan hasilnya mengkhawatirkan? Tim kami bisa mengaudit dan memperbaiki performa mobile website Anda dari awal — dengan Astro.js yang secara default menghasilkan skor mobile 90+ tanpa optimasi tambahan. Konsultasi gratis sekarang →

---

Sumber Referensi

---

<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "7 Kesalahan Mobile Website yang Langsung Menghilangkan Separuh Calon Pelanggan Anda",
    "description": "7 kesalahan mobile website yang paling merusak konversi bisnis lokal Indonesia — dari viewport salah konfigurasi hingga tidak ada click-to-call.",
    "image": "https://eranyadigital.com/images/blog/kesalahan-mobile-website.webp",
    "author": {"@type": "Organization", "name": "Eranya Digital", "url": "https://eranyadigital.com"},
    "publisher": {"@type": "Organization", "name": "Eranya Digital", "logo": {"@type": "ImageObject", "url": "https://eranyadigital.com/images/logo.png"}},
    "datePublished": "2026-04-28",
    "dateModified": "2026-04-28",
    "mainEntityOfPage": {"@type": "WebPage", "@id": "https://eranyadigital.com/id/blog/kesalahan-mobile-website/"},
    "inLanguage": "id-ID",
    "keywords": ["kesalahan mobile website", "website tidak mobile friendly", "mobile optimization bisnis lokal", "cara perbaiki website mobile"],
    "articleSection": "SEO"
  },
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {"@type": "Question", "name": "Bagaimana cara mengecek apakah website saya sudah mobile-friendly?", "acceptedAnswer": {"@type": "Answer", "text": "Gunakan PageSpeed Insights di pagespeed.web.dev — masukkan URL dan pilih tab Mobile untuk melihat skor dan detail masalah. Untuk cek visual, buka website langsung dari HP dengan jaringan 4G biasa untuk merasakan pengalaman nyata pengguna Anda."}},
      {"@type": "Question", "name": "Berapa ukuran font minimum yang aman untuk pengguna mobile?", "acceptedAnswer": {"@type": "Answer", "text": "Google merekomendasikan minimal 16px untuk body text di mobile. Font di bawah 12px akan ditandai sebagai masalah di PageSpeed Insights. Pastikan juga ada cukup kontras antara teks dan latar belakang dengan rasio minimal 4.5:1."}},
      {"@type": "Question", "name": "Apa itu CLS dan mengapa berbahaya untuk bisnis lokal?", "acceptedAnswer": {"@type": "Answer", "text": "CLS (Cumulative Layout Shift) mengukur seberapa banyak elemen halaman bergeser tak terduga saat dimuat. CLS tinggi berarti tombol WhatsApp atau CTA bisa bergeser saat pengguna hendak menekannya — langsung merusak konversi dan merupakan faktor ranking negatif di Google."}},
      {"@type": "Question", "name": "Apakah click-to-call benar-benar meningkatkan konversi bisnis lokal?", "acceptedAnswer": {"@type": "Answer", "text": "Ya, signifikan. Pengguna mobile yang mencari layanan lokal seringkali siap bertindak sekarang. Click-to-call menghilangkan friction antara niat dan tindakan — dari 5 langkah manual menjadi satu ketukan. Bisnis yang menambahkan tombol ini melaporkan peningkatan panggilan masuk yang signifikan."}},
      {"@type": "Question", "name": "Seberapa besar pengaruh gambar yang tidak dioptimasi terhadap kecepatan loading mobile?", "acceptedAnswer": {"@type": "Answer", "text": "Sangat besar. Gambar JPEG/PNG berukuran 2–5MB adalah penyebab paling umum LCP yang buruk. Mengkonversi ke WebP dan mengkompresi ke bawah 200KB bisa memotong waktu loading 40–70% tanpa penurunan kualitas visual yang terlihat."}}
    ]
  }
]
</script>

Footnotes

1. DataReportal. (2025). Digital 2025: Indonesia. datareportal.com/reports/digital-2025-indonesia — Data penggunaan internet mobile di Indonesia: 96% akses via smartphone. ↩

2. Google. (2025). Core Web Vitals. web.dev/vitals — Dokumentasi resmi Google tentang metrik LCP, CLS, INP dan dampaknya pada ranking serta pengalaman pengguna. ↩ ↩² ↩³ ↩⁴ ↩⁵

3. Google. (2025). Mobile-Friendly Test & Best Practices. developers.google.com/search/mobile-sites — Panduan resmi Google untuk optimasi website mobile termasuk ukuran font dan tap target minimum. ↩ ↩²