11 Tips Mobile & Core Web Vitals untuk Local SEO

212 juta pengguna internet Indonesia — dan mayoritas dari mereka mengakses internet dari smartphone, bukan laptop atau komputer.¹ Artinya: jika website bisnis Anda lambat atau tidak nyaman digunakan di HP, Anda kehilangan pelanggan sebelum mereka sempat melihat produk atau layanan Anda.

Sejak 2021, Google secara resmi menjadikan Core Web Vitals sebagai faktor ranking.² Ini bukan teori SEO — ini kebijakan resmi Google yang memengaruhi semua website, termasuk website bisnis lokal Anda.

11 tips berikut mencakup perbaikan yang bisa langsung diterapkan, disusun dari yang paling mudah hingga yang membutuhkan bantuan teknis.

---

Panduan Core Web Vitals: Benchmark Skor

Metrik	Baik ✅	Perlu Perbaikan ⚠️	Buruk ❌
LCP (Largest Contentful Paint)	< 2.5 detik	2.5 – 4 detik	> 4 detik
INP (Interaction to Next Paint)	< 200ms	200 – 500ms	> 500ms
CLS (Cumulative Layout Shift)	< 0.1	0.1 – 0.25	> 0.25

Cara audit skor Anda sekarang: Buka pagespeed.web.dev, masukkan URL website Anda, dan klik “Analisis.” Gratis, tidak perlu akun.

---

Prioritas Perbaikan

Tingkat	Tips	Waktu Pengerjaan
🔴 Hari Ini	1, 2, 3, 9	1–2 jam
🟡 Minggu Ini	4, 5, 6, 10, 11	3–5 jam
🟢 Butuh Developer	7, 8	1–3 hari

---

🔴 Lakukan Hari Ini

Tip #1 — Test di HP Android Mid-Range, Bukan di MacBook

Ini kesalahan paling umum: developer dan pemilik bisnis menguji website di laptop atau komputer dengan koneksi WiFi cepat — sementara pelanggan membukanya di HP Android mid-range dengan koneksi 4G yang tidak stabil.

Cara test yang benar:

• Gunakan HP Android mid-range (Samsung Galaxy A series atau Xiaomi Redmi) untuk test
• Atau gunakan Chrome DevTools: buka website di Chrome → F12 → tab “Network” → pilih “Fast 3G” dan “Mobile” untuk simulasi kondisi nyata
• Test di koneksi 4G, bukan WiFi

Apa yang terasa lambat di mata Anda saat test di kondisi ini adalah yang dirasakan sebagian besar pelanggan Indonesia Anda.

💡 Pro Tip: Minta seseorang yang bukan tim IT Anda untuk membuka website dari HP mereka sendiri dan amati berapa lama mereka menunggu. Reaksi “wah kok lama” adalah feedback paling jujur yang bisa Anda dapat.

---

Tip #2 — Perbaiki LCP: Load Gambar Hero di Bawah 2.5 Detik

LCP (Largest Contentful Paint) mengukur berapa lama konten terbesar di halaman — biasanya gambar hero atau banner utama — selesai dimuat. Ini adalah metrik yang paling berdampak pada persepsi kecepatan oleh pengguna.

Cara memperbaiki LCP:

1. Kompres gambar hero ke ukuran maksimal 200KB menggunakan Squoosh (squoosh.app — gratis)
2. Gunakan format WebP — 25–35% lebih kecil dari JPEG/PNG dengan kualitas yang sama
3. Tambahkan atribut fetchpriority="high" pada tag <img> gambar hero agar browser memprioritaskan loadingnya
4. Hindari lazy loading pada gambar hero — lazy loading berguna untuk gambar di bawah fold, tapi kontraproduktif untuk gambar yang langsung terlihat saat halaman dibuka

---

Tip #3 — Pasang Tombol WhatsApp & Telepon di Atas Fold

Above the fold adalah area yang terlihat tanpa scrolling saat halaman pertama dibuka. Untuk website bisnis lokal, menempatkan tombol aksi utama di area ini adalah konversi dan UX sekaligus.

Tombol yang wajib ada di atas fold untuk website bisnis lokal:

• Chat WhatsApp — dengan link wa.me/628xxxxxxxxx?text=Halo, saya ingin bertanya...
• Telepon Sekarang — dengan link tel:+628xxxxxxxxx
• Petunjuk Arah — dengan link ke Google Maps bisnis Anda

Ketiganya juga meningkatkan sinyal interaksi pengguna yang dimonitor Google sebagai indikator kualitas halaman.

---

Tip #9 — Kompres Semua Gambar ke Format WebP Sebelum Upload

Gambar adalah penyebab nomor satu halaman website yang lambat. Format WebP yang dikembangkan Google menawarkan kompresi 25–35% lebih baik dari JPEG dan 26% lebih baik dari PNG, dengan kualitas visual yang tidak berbeda secara signifikan.²

Cara konversi ke WebP:

• Online gratis: Squoosh (squoosh.app) atau CloudConvert
• Bulk konversi: Plugin Converter for Media (WordPress) atau Sharp (Node.js)
• Target ukuran: < 100KB untuk gambar konten, < 200KB untuk gambar hero

⚠️ Perhatian: Pastikan website Anda menggunakan atribut <picture> dengan fallback ke JPEG/PNG untuk browser lama yang tidak mendukung WebP — meskipun di 2026 hampir semua browser modern sudah mendukung WebP.

---

🟡 Minggu Ini

Tip #4 — Embed Google Maps Tanpa Memperlambat Halaman

Google Maps embed adalah fitur penting untuk website bisnis lokal — tapi embed standar via <iframe> menambahkan ratusan KB request yang memperlambat halaman, terutama di mobile.

Solusi: Gunakan “click-to-load” Maps embed:

<!-- Tampilkan gambar thumbnail Maps dulu, baru load iframe saat diklik -->
<div id="map-container" onclick="loadMap(this)">
  <img src="map-thumbnail.webp" alt="Lokasi [Nama Bisnis] di Google Maps" />
  <button>Tampilkan Peta</button>
</div>

Alternatif lebih mudah: gunakan plugin Lazy Load for Google Maps (WordPress) yang secara otomatis menunda loading Maps hingga pengguna scroll ke area tersebut.

---

Tip #5 — Hilangkan CLS: Elemen yang Bergeser Saat Loading

CLS (Cumulative Layout Shift) terjadi ketika elemen di halaman bergeser posisi setelah konten lain selesai dimuat — misalnya teks yang tiba-tiba turun karena gambar di atasnya baru selesai dimuat. Ini sangat mengganggu di mobile.

Penyebab CLS yang paling umum:

• Gambar tanpa atribut width dan height yang ditentukan
• Iklan atau embed (Google Ads, Facebook Pixel widget) yang muncul terlambat
• Font custom yang menyebabkan “flash of unstyled text” (FOUT)
• Banner cookie atau popup yang muncul mendorong konten ke bawah

Cara fix cepat: Selalu tambahkan atribut width dan height pada semua tag <img>:

<img src="foto.webp" width="800" height="600" alt="deskripsi gambar">

---

Tip #6 — Ukuran Font Responsif — Tidak Perlu Zoom di HP

Teks yang terlalu kecil di mobile memaksa pengguna untuk memperbesar (pinch-to-zoom) — pengalaman yang sangat buruk dan meningkatkan bounce rate. Google merekomendasikan ukuran font minimal 16px untuk body text di mobile.

CSS yang direkomendasikan:

body {
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  body { font-size: 16px; } /* Jangan turun di bawah ini */
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
}

---

Tip #10 — Pre-Connect ke Google Fonts & Maps API

Pre-connect adalah teknik yang memberitahu browser untuk memulai koneksi ke domain eksternal lebih awal — sebelum resource dari domain tersebut benar-benar dibutuhkan. Ini menghemat waktu handshake DNS yang bisa mencapai 100–300ms.

Tambahkan ke bagian <head> website Anda:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://maps.googleapis.com">

---

Tip #11 — Sticky Bar WhatsApp & Telepon di Bagian Bawah Layar Mobile

Sticky CTA bar di bagian bawah layar adalah elemen yang selalu terlihat saat pengguna scrolling — meningkatkan konversi secara signifikan tanpa mengganggu pengalaman membaca konten.

Untuk website bisnis lokal, sticky bar yang efektif mengandung:

• Ikon WhatsApp + teks “Chat Sekarang”
• Ikon telepon + teks “Hubungi Kami”
• Opsional: Ikon Maps + “Petunjuk Arah”

CSS dasar:

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 999;
}

@media (min-width: 769px) {
  .sticky-cta { display: none; } /* Hanya tampil di mobile */
}

---

🟢 Butuh Developer

Tip #7 — Aktifkan Lazy Loading untuk Gambar Non-Prioritas

Lazy loading adalah teknik yang menunda loading gambar hingga pengguna scroll mendekati area gambar tersebut. Ini mengurangi jumlah resource yang dimuat saat halaman pertama dibuka, memperbaiki LCP dan waktu loading keseluruhan.

Cara paling mudah: tambahkan atribut loading="lazy" pada semua gambar yang tidak berada di above-the-fold:

<img src="foto-produk.webp" loading="lazy" width="800" height="600" alt="deskripsi">

⚠️ Perhatian: Jangan tambahkan loading="lazy" pada gambar hero atau gambar yang muncul di bagian atas halaman — ini justru akan memperlambat LCP.

---

Tip #8 — Kurangi INP: Minimalkan JavaScript Berat di Halaman Lokal

INP (Interaction to Next Paint) mengukur seberapa cepat halaman merespons interaksi pengguna (klik, ketik, tap). JavaScript yang berat adalah penyebab utama INP yang buruk.

Cara mengurangi JavaScript yang tidak perlu:

• Audit script menggunakan Chrome DevTools → tab Coverage — hapus script yang tidak terpakai
• Tunda loading JavaScript non-kritis dengan atribut defer atau async
• Hindari plugin chat, widget, atau tracker yang menambahkan JavaScript berat tanpa manfaat signifikan
• Gunakan teknik code splitting jika menggunakan framework JavaScript

---

Tools Gratis untuk Audit Mobile & Core Web Vitals

Tool	Fungsi	URL
PageSpeed Insights	Skor CWV per halaman + rekomendasi	pagespeed.web.dev
Google Search Console	Data CWV real-user seluruh website	search.google.com/search-console
Chrome DevTools	Debugging teknis langsung di browser	Built-in di Chrome (F12)
Squoosh	Kompresi & konversi gambar ke WebP	squoosh.app
WebPageTest	Test kecepatan dari berbagai lokasi & device	webpagetest.org

---

Pertanyaan yang Sering Ditanyakan (FAQ)

Apa itu Core Web Vitals dan mengapa penting untuk local SEO? Core Web Vitals adalah tiga metrik resmi Google (LCP, INP, CLS) yang mengukur kecepatan dan pengalaman pengguna. Sejak 2021, ini adalah faktor ranking resmi — website dengan skor baik mendapat keuntungan ranking.²

Apakah Core Web Vitals memengaruhi ranking di Google Maps? Secara tidak langsung. Website lambat meningkatkan bounce rate dan melemahkan sinyal perilaku pengguna yang dipertimbangkan dalam local ranking.

Berapa skor Core Web Vitals yang dianggap baik oleh Google? LCP < 2.5 detik, INP < 200ms, CLS < 0.1. Target: semua tiga metrik masuk kategori baik untuk 75% kunjungan halaman.

Tools gratis apa yang bisa digunakan untuk audit? PageSpeed Insights (pagespeed.web.dev), Google Search Console, Chrome DevTools, dan Squoosh untuk optimasi gambar — semuanya gratis.²

Apakah harus memperbaiki semua masalah sekaligus? Tidak. Prioritaskan LCP dulu (biasanya perbaikan gambar), lalu INP, lalu CLS. Gunakan Search Console untuk melihat halaman mana yang paling kritis.

Apakah WordPress bisa mencapai Core Web Vitals yang baik? Bisa, tapi butuh usaha lebih. Gunakan plugin caching, optimalkan gambar, dan nonaktifkan plugin yang tidak perlu.

---

Mulai dari PageSpeed Insights Sekarang

💡 Kecepatan website adalah satu bagian dari optimasi lokal. Lengkapi dengan 15 tips on-page local SEO untuk cakupan optimasi website yang menyeluruh.

Buka pagespeed.web.dev sekarang, masukkan URL website bisnis Anda, dan klik analisis. Lihat skor di tab “Mobile” — ini yang paling penting untuk audiens Indonesia.

Jika skor LCP Anda di atas 4 detik, mulai dari Tip #2 dan #9 — kompres gambar. Ini satu langkah yang bisa memperbaiki skor secara signifikan dalam hitungan jam.

---

Ingin audit teknis lengkap website Anda? Tim kami bisa mengidentifikasi semua masalah Core Web Vitals dan Mobile SEO, serta memberikan panduan perbaikan yang spesifik untuk platform website Anda. Minta audit gratis sekarang →

---

Sumber Referensi

---

<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "11 Tips Mobile & Core Web Vitals yang Langsung Pengaruhi Ranking Lokal",
    "description": "11 tips mobile dan Core Web Vitals untuk local SEO bisnis Indonesia dengan benchmark skor dan tools gratis audit.",
    "image": "https://eranyadigital.com/images/blog/tips-mobile-core-web-vitals.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-26",
    "dateModified": "2026-04-26",
    "mainEntityOfPage": {"@type": "WebPage", "@id": "https://eranyadigital.com/id/blog/tips-mobile-core-web-vitals/"},
    "inLanguage": "id-ID",
    "keywords": ["tips mobile core web vitals local seo", "core web vitals indonesia", "optimasi mobile website lokal"],
    "articleSection": "SEO"
  },
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {"@type": "Question", "name": "Apa itu Core Web Vitals dan mengapa penting untuk local SEO?", "acceptedAnswer": {"@type": "Answer", "text": "Core Web Vitals adalah tiga metrik kecepatan dan pengalaman pengguna yang digunakan Google sebagai faktor ranking resmi sejak 2021: LCP mengukur kecepatan loading konten utama, INP mengukur responsivitas interaksi, dan CLS mengukur stabilitas visual. Website dengan skor baik mendapat keuntungan ranking."}},
      {"@type": "Question", "name": "Berapa skor Core Web Vitals yang dianggap baik oleh Google?", "acceptedAnswer": {"@type": "Answer", "text": "LCP baik < 2.5 detik, INP baik < 200ms, CLS baik < 0.1. Target: semua tiga metrik harus masuk kategori baik untuk 75% kunjungan halaman Anda."}},
      {"@type": "Question", "name": "Tools gratis apa yang bisa digunakan untuk audit Core Web Vitals?", "acceptedAnswer": {"@type": "Answer", "text": "Google menyediakan beberapa tools gratis: PageSpeed Insights (pagespeed.web.dev) untuk analisis per halaman, Google Search Console untuk data real-user dari seluruh website, Chrome DevTools untuk debugging teknis, dan Lighthouse untuk audit menyeluruh."}}
    ]
  }
]
</script>

Footnotes

1. DataReportal. (2025). Digital 2025: Indonesia. datareportal.com/reports/digital-2025-indonesia — Data pengguna internet dan perangkat mobile di Indonesia. ↩

2. Google Search Central. (2025). Core Web Vitals. web.dev/explore/learn-core-web-vitals — Dokumentasi resmi Google tentang definisi, threshold, dan cara memperbaiki Core Web Vitals. ↩ ↩² ↩³ ↩⁴