11 Mobile & Core Web Vitals Tips for Local SEO

212 million internet users in Indonesia — and most of them access the web from a smartphone, not a laptop or computer.[^1] This means if your business website is slow or uncomfortable to use on mobile, you’re losing customers before they see a single product or service.

Since 2021, Google has officially made Core Web Vitals a ranking factor.[^2] This isn’t SEO theory — it’s a Google policy that affects all websites, including local business websites.

These 11 tips cover fixes you can apply directly, ordered from easiest to those requiring developer assistance.

---

Core Web Vitals Benchmarks

Metric	Good ✅	Needs Improvement ⚠️	Poor ❌
LCP (Largest Contentful Paint)	< 2.5s	2.5 – 4s	> 4s
INP (Interaction to Next Paint)	< 200ms	200 – 500ms	> 500ms
CLS (Cumulative Layout Shift)	< 0.1	0.1 – 0.25	> 0.25

Audit your scores now: Open pagespeed.web.dev, enter your URL, and click “Analyse.” Free, no account needed.

---

Priority Order

Level	Tips	Time Required
🔴 Today	1, 2, 3, 9	1–2 hours
🟡 This Week	4, 5, 6, 10, 11	3–5 hours
🟢 Needs Developer	7, 8	1–3 days

---

🔴 Do Today

Tip #1 — Test on a Mid-Range Android Phone, Not a MacBook

The most common mistake: developers and business owners test their website on a fast laptop with WiFi — while customers open it on a mid-range Android phone on an unstable 4G connection.

The right way to test:

• Use a mid-range Android phone (Samsung Galaxy A series or Xiaomi Redmi) to test
• Or use Chrome DevTools: open the website in Chrome → F12 → “Network” tab → select “Fast 3G” and “Mobile” to simulate real-world conditions
• Test on 4G connection, not WiFi

What feels slow to you when testing in these conditions is what most of your Indonesian customers experience. Ask someone outside your technical team to open the website on their own phone and watch how long they wait — their reaction is the most honest feedback you can get.

Tip #2 — Fix LCP: Load Hero Image Under 2.5 Seconds

LCP measures how long the largest content element on the page — usually the hero image or main banner — takes to finish loading. This is the metric that most directly affects a user’s perception of speed.

How to fix LCP:

1. Compress the hero image to a maximum 200KB using Squoosh (squoosh.app — free)
2. Use WebP format — 25–35% smaller than JPEG/PNG at equivalent quality
3. Add fetchpriority="high" attribute to the hero <img> tag so the browser prioritises its loading
4. Don’t lazy-load the hero image — lazy loading is useful for below-fold images, but counterproductive for the image that’s immediately visible when a page opens

Tip #3 — Place WhatsApp and Call Buttons Above the Fold

Above the fold is the area visible without scrolling when a page first opens. For local business websites, placing primary action buttons here is both a conversion and UX improvement simultaneously.

Buttons that must be above the fold for a local business website:

• Chat on WhatsApp — with link wa.me/62xxxxxxxxx?text=Hi, I'd like to enquire...
• Call Now — with link tel:+62xxxxxxxxx
• Get Directions — with link to your Google Maps business listing

These also increase the user interaction signals that Google monitors as page quality indicators.

Tip #9 — Compress All Images to WebP Before Uploading

Images are the number one cause of slow websites. The WebP format developed by Google offers 25–35% better compression than JPEG and 26% better than PNG, with no visually significant quality difference.[^2]

How to convert to WebP:

• Free online: Squoosh (squoosh.app) or CloudConvert
• Bulk conversion: “Converter for Media” plugin (WordPress) or Sharp (Node.js)
• Target sizes: under 100KB for content images, under 200KB for hero images

Ensure your website uses the <picture> element with a JPEG/PNG fallback for browsers that don’t support WebP — though by 2026 virtually all modern browsers support it.

---

🟡 This Week

Tip #4 — Embed Google Maps Without Slowing the Page

A Google Maps embed is important for local business websites — but the standard <iframe> embed adds hundreds of KB of requests that slow the page, especially on mobile.

Solution: Use a “click-to-load” Maps embed:

<div id="map-container" onclick="loadMap(this)">
  <img src="map-thumbnail.webp" alt="[Business Name] Location on Google Maps" />
  <button>Show Map</button>
</div>

Alternatively: use the “Lazy Load for Google Maps” WordPress plugin that automatically defers Maps loading until the user scrolls to that area.

Tip #5 — Fix CLS: Elements That Shift During Loading

CLS occurs when page elements shift position after other content finishes loading — such as text suddenly jumping down because an image above it just finished loading. This is extremely disruptive on mobile.

Most common CLS causes:

• Images without explicit width and height attributes
• Ads or embeds (Google Ads, Facebook Pixel widget) that load late
• Custom fonts causing “flash of unstyled text” (FOUT)
• Cookie banners or popups that push content down

Quick fix: Always add width and height attributes to all <img> tags:

<img src="photo.webp" width="800" height="600" alt="image description">

Tip #6 — Responsive Font Sizes — No Zooming Required on Mobile

Text that’s too small on mobile forces users to pinch-to-zoom — a poor experience that increases bounce rate. Google recommends a minimum 16px font size for body text on mobile.

Recommended CSS:

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

@media (max-width: 768px) {
  body { font-size: 16px; } /* Don't go below this */
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
}

Tip #10 — Pre-Connect to Google Fonts and Maps API

Pre-connect tells the browser to start a connection to external domains early — before those resources are actually needed. This saves DNS handshake time that can amount to 100–300ms.

Add to the <head> section of your website:

<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 WhatsApp and Call Bar at the Bottom of Mobile Screen

A sticky CTA bar at the bottom of the screen is always visible while users scroll — improving conversions significantly without disrupting the reading experience.

For local business websites, an effective sticky bar contains:

• WhatsApp icon + “Chat Now” text
• Phone icon + “Call Us” text
• Optional: Maps icon + “Get Directions”

.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; } /* Mobile only */
}

---

🟢 Requires a Developer

Tip #7 — Enable Lazy Loading for Non-Priority Images

Lazy loading defers image loading until the user scrolls near that image. This reduces the resources loaded when the page first opens, improving LCP and overall load time.

Simplest approach: add loading="lazy" to all images that aren’t above the fold:

<img src="product-photo.webp" loading="lazy" width="800" height="600" alt="description">

Do not add loading="lazy" to hero images or images in the upper section of the page — this will slow down your LCP.

Tip #8 — Reduce INP: Minimise Heavy JavaScript

INP measures how quickly a page responds to user interaction (clicks, taps, keystrokes). Heavy JavaScript is the primary cause of poor INP.

How to reduce unnecessary JavaScript:

• Audit scripts using Chrome DevTools → Coverage tab — remove unused scripts
• Defer non-critical JavaScript loading using the defer or async attribute
• Avoid chat widgets, trackers, or social plugins that add heavy JavaScript with minimal benefit
• Use code splitting if you’re using a JavaScript framework

---

Free Audit Tools

Tool	Function	URL
PageSpeed Insights	Core Web Vitals score + recommendations	pagespeed.web.dev
Google Search Console	Real-user Core Web Vitals for your entire site	search.google.com/search-console
Chrome DevTools	Direct technical debugging in browser	Built into Chrome (F12)
Squoosh	Image compression and WebP conversion	squoosh.app
WebPageTest	Speed testing from multiple locations and devices	webpagetest.org

---

Open pagespeed.web.dev now, enter your business website URL, and click analyse. Check the score in the Mobile tab — that’s what matters most for your Indonesian audience.

If your LCP is above 4 seconds, start with Tips #2 and #9 — image compression. This single step can improve your score significantly within a few hours.

---

Want a full technical audit of your website? Our team can identify all Core Web Vitals and Mobile SEO issues and provide a specific improvement roadmap for your platform. Free audit request →

References

1. DataReportal. (2025). Digital 2025: Indonesia. datareportal.com/reports/digital-2025-indonesia — Indonesian internet users and mobile device data.
2. Google Search Central. (2025). Core Web Vitals. web.dev/explore/learn-core-web-vitals — Official Google documentation on Core Web Vitals definitions, thresholds, and fixes.
3. Google Developers. (2025). PageSpeed Insights. developers.google.com/speed/pagespeed/insights — Official PageSpeed Insights tool documentation.
4. Whitespark. (2024). Local Search Ranking Factors. whitespark.ca/local-search-ranking-factors — Data on website performance signals’ impact on local ranking.
5. Google Search Central. (2024). Understanding page experience in Google Search results. developers.google.com/search/docs/appearance/page-experience — Official documentation on Core Web Vitals as a ranking factor.