SEO Faka'ata 5: UX / Me'akai e Ngaue'aki

Ko e Faka'ata 5 ia o e SEO Faka'ata 13. Ko e me'akai e ngaue'aki na'e hoko ko e ngaahi hanga ko e ranking — loaʻa hono tohi e fehoanaki o e kau tū'uvai mo e ngaahi me'akai e fa'ahinga e faingamalie, accessibility, mo e me'akai mālie.

---

Ko e ngaahi fakafuofua e pupuni (Faka'ata 3) ko e me'akai e kaunga. Ko e linkbuilding (Faka'ata 4) ko e fakapounamu. Pea kevika ko e kau tū'uvai e 'i he 'u pātaka ni pea faka-transa tu'u ki he lahi, break, pe to'otō e tangata — ko e ngāue'aki e kī ne pehē. Ko e Google e track e ngaahi signals ko ia mo e fa'u'i e rankings.

Mai he 2021, na'e faka'osi e updates e Page Experience ko Google e UX ko e me'akai e fa'ahinga ʻo e ranking. I he 2024, na'e toe ke fakafo'isia e INP (Interaction to Next Paint) ko e Core Web Vital. I he 2026, ko e ngaahi signals ko ia e totongi e lahi taha kehekehe ko e ao e Google ko e 'i he kī e maʻu lele kehekehe e well-being o e tagata mu'e 'ene.

Ko e Ux e Faka'ata SEO e Ngāue'aki

Ko e UX hofoa kehekehe e SEO e vae e 6:

1. Core Web Vitals — Ko e ngaahi metrics UX ko Google (LCP, INP, CLS)
2. Hofoa Fakakotahi — Ko e design responsive, touch targets, viewport
3. Accessibility (WCAG) — Ko e toe ke maʻua e ho'o pā ki he ngaahi tangata kotoa
4. Page Experience Signals — HTTPS, tšo, safe browsing
5. Navigation Patterns — Ko e funga me 'a e faingamalie e ki he tagata mo e crawlers
6. Above-the-Fold Hofoa — Ko e fehu'i e ki he tagata e 'o e scrolling

1. Core Web Vitals (CWV)

Ko e Core Web Vitals ko e tolu o e UX metrics ko Google e hiki 'aupito. Ko e ngaahi metrics ko ia e track 'i he Chrome User Experience Report (CrUX) data mo e to'ou e rankings.

Ko e tolu o e metrics:

Metric	Measures	Vai	Vakaheke	Tēvolo
LCP (Largest Contentful Paint)	Loading speed	< 2.5s	2.5s - 4.0s	> 4.0s
INP (Interaction to Next Paint)	Responsiveness	< 200ms	200ms - 500ms	> 500ms
CLS (Cumulative Layout Shift)	Visual stability	< 0.1	0.1 - 0.25	> 0.25

LCP — Largest Contentful Paint

Ko e LCP e ngaahi tu'utu'uni ko e ta'e ke nau hoku 'a e faka'osi e me'akai. Ko e “me'akai lāngoa” ko e 'i he maau mô e 'aku he tamai vavalu oma.

Ko e ngaahi tefito?

Tefito	Patanga	Taki	Vakahekega
Hero image noe he hofoa	+2-5s	WebP fakatekinolosi, proper sizing, fetchpriority="high"
Render-blocking CSS/JS	+1-3s	Inline critical CSS, defer non-critical
Slow server response (TTFB)	+1-4s	CDN, server caching, edge deployment
Web fonts blocking render	+0.5-2s	font-display: swap, preload critical fonts
Third-party scripts	+1-3s	Defer analytics/chat widgets, lazy load ads

LCP hofoa:

<!-- 1. Preload the LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. Inline critical CSS (first 14KB) -->
<style>/* Above-the-fold styles only */</style>

<!-- 3. Defer non-critical CSS -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

<!-- 4. Hero image with explicit dimensions -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Descriptive alt text">

Quick win: Faka'osi e PageSpeed Insights ki ho'o homepage. Fakafoki e LCP element e faka'osi. Kevika ko e me'akai, peti ki he WebP, pau e explicit width/height, mo e toe 'a e fetchpriority="high". Ko e transient ko ia e nau tefelili e LCP e 1-2 seconds.

INP — Interaction to Next Paint

Ko e INP e fa'ahinga ke fakafoki ko e lahi e page mo e vākava ki he kaungā mo e tangata e ngāue'aki (click, tap, type). Ko e Tracking e ngāue'aki kotoa.

Ko e ngaahi tefito?

Tefito	Patanga	Taki	Vakaheke
Long JavaScript tasks	+200-1000ms	Break into smaller tasks, use requestIdleCallback
Heavy event handlers	+100-500ms	Debounce, throttle, use requestAnimationFrame
Layout thrashing	+50-300ms	Batch DOM reads/writes, use will-change
Third-party scripts	+100-500ms	Defer, load after interaction, use Web Workers
Synchronous API calls	+200-2000ms	Async/await, loading states, optimistic UI

INP hofoa:

// Sā lele: Blocks main thread
button.addEventListener('click', () => {
  const data = heavyComputation(); // Blocks for 400ms
  updateDOM(data);
});

// Ōku: Yields to main thread
button.addEventListener('click', async () => {
  // Show immediate feedback
  button.textContent = 'Loading...';

  // Break heavy work into chunks
  await scheduler.yield();
  const data = heavyComputation();

  await scheduler.yield();
  updateDOM(data);
});

Quick win: Faka'osi ke 'oku na'ā Hapo e Google DevTools > Performance tab. Kalukalu e ho'o site mo e ngali mo e "Long Tasks" (red triangles). Ko e tefito e tō kehe e long task ko ia e hoa e third-party script — defer e, pe toe ke pa'u ke toe tu'u.

CLS — Cumulative Layout Shift

Ko e CLS e ngaahi faingamalie e loku — ko e ngaahi me'akai e lahi e pōtungā 'aki e lōmukī. Ko e me'akai e kāfoʻu ko ia e hiki e fehoanaki ki e kai manako.

Ko e ngaahi tefito?

Tefito	CLS Patanga	Taki
Images without dimensions	0.1-0.5	Always set width and height
Ads loading late	0.1-0.3	Reserve space with min-height
Web fonts causing reflow	0.05-0.2	font-display: optional or size-adjusted fallback
Dynamic content insertion	0.1-0.4	Reserve space, use content-visibility
Cookie banners pushing content	0.05-0.2	Overlay design (not push-down)

CLS prevent checklist:

<!-- Always specify dimensions for media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Reserve space for dynamic content -->
<div style="min-height: 250px;">
  <!-- Ad will load here without shifting -->
</div>

<!-- Use aspect-ratio for responsive media -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Quick win: Fakafoki e explicit width mo height attributes ki he toe foo e mo ki ho'o top 10 pages. Ko e faingamalie ko ia e fakamālō e CLS.

2. Hofoanga Fakakotahi

Ko e Google e fa'ahinga e mobile-first indexing — ko ho'o mobile experience ko e ho fo'i experience. Kevika ko e site e tefito mo e dynamic chang a me casio.

Faka'ata hofoa fakakotahi:

Element	Requirement	Common failure
Viewport meta	width=device-width, initial-scale=1	Missing entirely
Touch targets	Minimum 44x44px	Tiny links, cramped buttons
Font size	Minimum 16px body text	12px unreadable on mobile
Content width	No horizontal scrolling	Fixed-width elements
Tap spacing	8px minimum between targets	Adjacent links touching
Responsive images	srcset with appropriate sizes	Desktop-sized images on mobile

Responsive design patterns:

/* Mobile-first approach */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Touch-friendly targets */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Responsive typography */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }

/* No horizontal overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Mobile SEO signals ko e Google e fa'ahinga:

• Ko e viongozi 'e malava ke no tayo e zoom
• Ko e ngaahi kōpaki e kei ta loma
• Ko e content e fit viewport width (no horizontal scroll)
• Ko e Flash pe ngaahi tekonolosi 'oku 'ikai ke foaki
• Ko e interstitials e kei tā 'a e content
• Ko e page e lahi e effeke maite he 4G/3B connections

Quick win: Faka'osi ho'o site ki ho'o telefoni. Fakapa e totonu ke mai klik e kotoa. Kevika e loma ko e pā si fa ké, pe 'alu a upu 'oku tata 'o e talk.

3. Accessibility (WCAG)

Ko e accessibility 'oku 'ikai na'e atā ko e ma'u lele - e SEO signal. Ko e Google e tu'u mo e tau ki e UI e tangata kotoa, ko e accessibility mo e ulungaanga. Ko e compliance e WCAG (Web Content Accessibility Guidelines) e homai o faingamalie kehekehe e rankings.

Ko e ngaahi me'akai ko 'eni:

Element	Requirement	SEO impact
Alt text on images	Descriptive text for all meaningful images	Direct (image SEO + accessibility)
Heading hierarchy	H1 → H2 → H3 without skipping	Direct (content structure)
Color contrast	4.5:1 for normal text, 3:1 for large text	Indirect (usability)
Keyboard navigation	All interactive elements reachable via Tab	Indirect (usability)
ARIA labels	Labels for icons, buttons without text	Indirect (screen reader UX)
Focus indicators	Visible focus ring on keyboard navigation	Indirect (usability)
Form labels	Every input has an associated	Indirect (usability)
Link text	Descriptive (not "click here")	Direct (anchor text SEO)

Ko e ngaahi taumu'a ko 'eni:

1. Automated scan — Faka'osi e Lighthouse, axe-core, pe WAVE (faka'aonga ki he 30-50% o e me'akai)
2. Keyboard test — Fakafoki e ko e site a ho'o e Tab, Enter, Escape
3. Screen reader test — Faka'aonga e VoiceOver (Mac) pe NVDA (Windows) ki he ngaahi taukave
4. Color contrast — Fakafoki e kotoa e 'ī kotoa ki he background (faka'aonga e DevTools contrast checker)
5. Zoom test — Zoom kotoa ki he 200% — ko e kei uhu 'a e me'akai?

Ko e ngaahi faingamalie:

<!-- Images: descriptive alt text -->
<img src="chart.png" alt="Bar chart showing 40% increase in organic traffic from January to March 2026">

<!-- Buttons: clear labels -->
<button aria-label="Close navigation menu">
  <svg>...</svg> <!-- Icon-only button needs aria-label -->
</button>

<!-- Forms: associated labels -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Links: descriptive text -->
<a href="/guide">Faka'osi e SEO guide ko 'eni</a>
<!-- Tēvolo: <a href="/guide">Klik ko 'eni</a> -->

<!-- Skip navigation for keyboard users -->
<a href="#main-content" class="skip-link">Faka'osi e to'u ki he content</a>

Quick win: Faka'osi e Lighthouse ki ho'o homepage mo e Accessibility puaki. Faka'osi e kotoa e "Fails" ko ia — ko e nātipuni e alt text, nātipuni e heading hierarchy, mo e low contrast text. Ko e ngaahi faingamalie ko ia e tefili e 30 miniti mo e fakamahu ki he to e kākau 20+ points.

4. Page Experience Signals

Tō e Core Web Vitals, ko e Google e fa'ahinga e ngaahi signals e me'akai e 'o e rankings.

Ko e ngaahi signals e ta'e 'o:

Signal	Requirement	Check
HTTPS	Ko e site teuteu 'o e HTTPS	Mixed content breaks it
No intrusive interstitials	Kuo 'ikai ke covering content ki he entrance	Popups covering >30% on mobile
Safe browsing	Kuo 'ikai e malware, phishing, deceptive content	Google Safe Browsing status
Mobile-friendly	Passes mobile-friendly test	Google Mobile-Friendly Test
No deceptive ads	Ko e ngāu 'e 'ikai ke hā e content	Disguised download buttons

Ko e ngaahi tu'ai ko 'eni:

Allowed	Penalized
Age verification (legally required)	Full-screen popup on page entry
Cookie consent (legally required)	Email signup covering entire content
Login walls for paywalled content	"Download our app" blocking content
Small banners using <30% of screen	Countdown timers before content access
After user scrolls/interacts	Before user sees any content

HTTPS checklist:

• [ ] SSL certificate valid and not expired
• [ ] All pages redirect HTTP → HTTPS (301)
• [ ] No mixed content (HTTP resources on HTTPS pages)
• [ ] HSTS header enabled (with includeSubDomains)
• [ ] Internal links use HTTPS (not HTTP)
• [ ] Sitemap uses HTTPS URLs
• [ ] Canonical tags use HTTPS

Quick win: Faka'osi e mixed content — open e DevTools Console ki ho'o ngaue'aki. Ko e fakakaukau "Mixed Content" e fāpena 'o e lungao e HTTP resources 'i he HTTPS page. To e liliu ia ki HTTPS. Ko ia e ha to e pā.

5. Navigation Patterns

Ko e lelei 'a e navigation e fainga mo e articles. Ko e fehoanaki e 'e fa'a mei ki ho'o 'a ki e site pehē ha.

Navigation best practices:

Pattern	Benefit	Implementation
Flat architecture	Pages within 3 clicks of home	Hub pages, breadcrumbs
Breadcrumbs	Users know where they are	Schema markup + visible trail
Logical URL structure	Predictable paths	/category/subcategory/page
Footer navigation	Secondary pages accessible	Legal, about, contact, sitemap
Internal search	Users find specific content	Search box with suggestions
Related content	Reduces bounce, increases depth	"Related articles" sections

Ideal site architecture:

Homepage (1 click from everything important)
├── /products/ (category hub — links to all products)
│   ├── /products/category-a/
│   │   ├── /products/category-a/product-1
│   │   └── /products/category-a/product-2
│   └── /products/category-b/
├── /blog/ (content hub — links to all posts)
│   ├── /blog/topic-cluster-1/ (pillar page)
│   │   ├── /blog/subtopic-1a
│   │   └── /blog/subtopic-1b
│   └── /blog/topic-cluster-2/
├── /tools/ (utility pages)
└── /about/ (trust pages)

Breadcrumb implementation:

<!-- Visible breadcrumb -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">SEO Faka'ata 5</li>
  </ol>
</nav>

<!-- Schema markup (BreadcrumbList) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "SEO Faka'ata 5" }
  ]
}
</script>

Navigation red flags:

• Pages more than 4 clicks from homepage (too deep)
• No breadcrumbs (users and Google lose context)
• JavaScript-only navigation (crawlers may miss links)
• Orphan pages (no internal links pointing to them)
• Mega menus with 200+ links (dilutes per-link value)

Quick win: Faka'osi e ngaahi me'akai e ngaahi pa'anga ko e me'akai — o e koi ke fa'a mai ku fehoanaki mai e kahau. Kevika e 'i he 3, toe koi e mohu e fo na'ua. Faka'osi puaki mai e funga.

6. Above-the-Fold Hofoa

Ko e me'akai e 'i he scrolling ko e fāēmuli e ke a'usi. Ko e me'akai e 'o e ne va'inga e pa ha 'a e lako ke nofo ai.

Ko e me'akai e 'i he:

Element	Why	Common failure
Clear headline (H1)	Confirms relevance to query	Generic or missing
Value proposition	Why should they stay?	Buried below fold
Primary CTA	What should they do next?	Hidden or unclear
Hero image/media	Visual engagement	Slow-loading, causing LCP issues
Trust signals	Why should they trust you?	No logos, reviews, or credentials

Ko e layouts ko 'eni:

Desktop (1440px viewport):
┌──────────────────────────────────────┐
│ Navigation bar                        │
├──────────────────────────────────────┤
│                                      │
│  H1: Clear headline matching query   │
│  Subtitle: Value proposition         │
│                                      │
│  [Primary CTA Button]               │
│                                      │
│  Trust signals: logos, stats, badges │
│                                      │
├──────────────────────────────────────┤
│ ↓ Content continues below fold       │
└──────────────────────────────────────┘

Mobile (375px viewport):
┌────────────────────┐
│ Nav (hamburger)    │
├────────────────────┤
│                    │
│ H1: Headline       │
│ (shorter on mobile)│
│                    │
│ [CTA Button]       │
│ (full-width, 44px+)│
│                    │
│ Trust badge        │
│                    │
├────────────────────┤
│ ↓ Scroll for more  │
└────────────────────┘

Critical above-the-fold rules:

• H1 must be visible without scrolling (matches search query)
• CTA must be visible without scrolling (reduces bounce)
• No layout shift in above-the-fold content (CLS killer)
• Hero image must load fast (it's usually the LCP element)
• Mobile: reduce above-the-fold content (less viewport space)

Quick win: Faka'osi e screenshot 'o ho'o homepage 'i he mobile (375px width). Ko e H1 visible? Ko e CTA button visible? Ko e fainga 'o e site 'oku 'i he 2 seconds? Kevika e toe ko e nai, o e fokotu'u mai e fehoanaki.

The UX Audit Checklist

Faka'osi e ngaahi mafai ia:

• [ ] LCP under 2.5 seconds (hero image optimized, critical CSS inlined)
• [ ] INP under 200ms (no long JavaScript tasks blocking interaction)
• [ ] CLS under 0.1 (all images have dimensions, no late-loading shifts)
• [ ] Mobile-friendly (44px touch targets, 16px+ text, no horizontal scroll)
• [ ] Accessible (alt text, heading hierarchy, color contrast, keyboard nav)
• [ ] HTTPS everywhere (no mixed content, HSTS enabled)
• [ ] No intrusive interstitials (consent overlays OK, content-blocking popups not)
• [ ] Breadcrumbs present (with BreadcrumbList schema)
• [ ] Navigation depth under 4 clicks to any important page
• [ ] Above-the-fold optimized (H1 visible, CTA visible, fast LCP)

Ko e ngaahi faitoko e UX e LANGR

Ko e module e UX ko LANGR e totonu ko e:

• Core Web Vitals module — Me'akai LCP, INP, CLS mai he Chrome User Experience Report (real user data)
• PageSpeed module — Full Lighthouse performance audit mo e mobile mo desktop scores
• Mobile module — Viewport configuration, touch target sizing, text readability
• Accessibility module — WCAG compliance checks, ARIA usage, color contrast
• Layout Scan module — AI-powered evaluation of mobile mo desktop layouts
• Page Experience module — Interstitial detection, HTTPS status, safe browsing

Ko e ngaahi module e hoko ke he faingamalie kotoa, tu'u e ki ho'o e me'akai e nātipuni — pea hā ko e fai ke hā ko e maʻu e rankings.

Ko e ngaahi faingamalie UX (Lauhaki e ngaahi Loto)

1. Tu'ā e mobile — 60%+ e firiki e mobile; ko e mobile 'okú 'iai = broken rankings
2. Unoptimized images — Ko e #1 cause o e slow LCP (mo e to'e 'a e me'akai)
3. No explicit image dimensions — Ko e layout shifts e 'āu e CLS scores
4. Third-party script bloat — Chat widgets, analytics, ads blocking INP
5. Missing accessibility basics — No alt text, no heading hierarchy, no contrast
6. Content-blocking interstitials — Full-screen popups before users see content
7. Deep site architecture — Important pages buried 5+ clicks from homepage
8. No above-the-fold value — Ko e tagata 'oku 'ikai ke to'o ha o e kahi 'oku 'i he scrolling

Ko e 'i he 'enau ke o e

Faka'ata 6: Monitoring & Ranking — Faka'osi 'o e ko e faingamalie ko e fehu'i. Ko e 'au ki, sione ngaue, 'ī e ngaue, mo 'ato mo e monitoring.

---

Ko e guide ko 'eni ko e faingamalie e LANGR e 13. Faka'osi e a free audit ke fakafoki ko ho'o site te 'oku e fai ki e ngaahi faingamalie e 13.