SEO Vola Tiko 5: UX / Yalomatua ni Piyasa

Oqo na Roko 5 ni iVola ni SEO 13-Roko. Na yalomatua ni piyasa e dua na vuna e lomasaki — E rabailevu na Google na sala e ra kila kina na bisita tiko kei na nodra bisai na iwebsaiti e tukuna ni ra sa vakarautaki koya rawa, e rawa talega ni ra raica tu na iwebsaiti e vesu kei na iwalewale dodonu.

---

Na itukutuku ni veika e baleta (Roko 3) e vakarautaka na veika e rawa ni o vakalesea. Na linkbuilding (Roko 4) e vakaraitaka na nomu i vakatavulici. Ia, ke ra na bisita e raica na nomu itukutuku ka na biu vakatotolo ni sa roro, sa taura na veika e sega ni yaga. E ra sa taura na Google na iTukutuku e vakalevulega tu.

Mai na 2021, na Google Page Experience sa taura na UX me dua na veika e vakalewai. E 2024, na INP (Interaction to Next Paint) e sa liu na FID me Core Web Vital. E 2026, na iTukutuku oqo e taura me levu cake ni berabera na Google e totoka tikoga na itukutuku ni viavia ni bisita se senikau.

Na Vuna e Tiko na UX me baleta na SEO

Na UX e seuni ena SEO e tiko e 6 na veika:

1. Core Web Vitals — Na Google sa vakaraitaka na iTukutuku ni UX (LCP, INP, CLS)
2. Mobile Optimization — Na itovo e dikevi, na sala ni tauri, kei na viewport
3. Accessibility (WCAG) — Me vukei na bisita e veivuke
4. iTukutuku ni Piyasa — HTTPS, sega ni iTukutuku ni totolo, na veika e dodonu
5. iWasewase ni Navigasau — Na iwalewale ni vuni ni iwebsaiti e vukea na bisita kei na crawlers
6. Above-the-Fold Optimization — Na veika e raica na bisita e sega ni vakanuinui

1. Core Web Vitals (CWV)

Core Web Vitals e tolu na iTukutuku ni UX e vakaraitaka na Google. E ra sa taura ena Chrome User Experience Report (CrUX) na data ka ra tukuna na lomasaki.

Na tolu na iTukutuku:

| iTukutuku | e Vakaraitaka | Vinaka | E gadrevi na veisau | Mudu | |-----------|---------------|--------|---------------------|------| | LCP (Largest Contentful Paint) | Na veidiqaqa ni loading | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | Na veika e rui qari | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | Na veisau ni tiko e tauri | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — Largest Contentful Paint

LCP e vakaraitaka na vuna e rui naku me vakakina e Mata ni itukutuku. Na "lavi levu" e toso na imaiti ni yalo, na itukutuku, se na backlink.

Na veika e laurai tu ka veisau tiko:

| Mato | Na iTukutuku | Veivakurabuitaki | |---------|--------|-----| | Imini ni hero e sega ni sautu | +2-5s | Na format WebP, na bukawaqa ena levu, fetchpriority="high" | | CSS/JS e vakatobuakotaki | +1-3s | Inline critical CSS, defer non-critical | | Na veisau ni server response (TTFB) | +1-4s | CDN, server caching, edge deployment | | Na fonts ni web e vaqaqacotaki | +0.5-2s | font-display: swap, preload critical fonts | | Na scripts e sa tenitaka | +1-3s | Defer analytics/chat widgets, lazy load ads |

Na iwalewale ni LCP:

<!-- 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: Dikeva na PageSpeed Insights ena nomu home page. Raurauna na LCP element. Ke na duana, me sa veisau ki na WebP, me sa taura na levu na width/height, ka me vakalevu na fetchpriority="high". Oqo na vuna e rawa ni veisau na LCP e 1-2 seconds.

INP — Interaction to Next Paint

INP e vakaraitaka na veika e ra tatau e buli yani na nomu itukutuku ni ra sa vakadu ke ra tauri (click, tap, type). E taura na veika e ra dau sa veiwasei qai vakavuna na neimuni.

Na veika e laurai duadua:

| Mato | Na iTukutuku | Veivakurabuitaki | |---------|--------|-----| | Na veika JavaScript e baleti | +200-1000ms | Raraba in smaller tasks, use requestIdleCallback | | Na veika e caka | +100-500ms | Debounce, throttle, use requestAnimationFrame | | Layout e naquri ni veivakunduraga | +50-300ms | Batch DOM reads/writes, use will-change | | Na scripts e sa tiqosi | +100-500ms | Defer, load after interaction, use Web Workers | | Synchronous API calls | +200-2000ms | Async/await, loading states, optimistic UI |

Na iwalewale ni INP:

// Vinaka: E baleti na main thread
button.addEventListener('click', () => {
  const data = heavyComputation(); // E baleta 400ms
  updateDOM(data);
});

// Vinaka: E sa veiyipaki na main thread
button.addEventListener('click', async () => {
  // Rairai ga na feedback
  button.textContent = 'Loading...';

  // Ra dodolaki nai tavi
  await scheduler.yield();
  const data = heavyComputation();

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

Quick win: Kerei na Chrome DevTools > Performance tab. Raici na nomu iwebsaiti ka raica na "Long Tasks" (red triangles). Oqo na veika e veivakararawataki na main thread. Na iwa eliu ni veika e sa veisau o na iwebsaiti e dua na script e dua e laurai — veisea na i-defer se load ena iwalewale ni vakayagataki.

CLS — Cumulative Layout Shift

CLS e vakaraitaka na veisoliyaka — na levu ni tilai ni itukutuku e ra sa dodolakitaka. Na veika e veivakalewai ni taura na bisita e tarogi na boton vakadongado e veina na pilai ni iwebsaiti e misai.

Na veika e laurai na iwalewale:

| Mato | CLS Na Vuna | Veivakurabuitaki | |---------|-----------|-----| | Na ima e sega ni sautu | 0.1-0.5 | Vola na width kei height | | Na ads e laurai tale | 0.1-0.3 | Ra leqai na itukutuku e na min-height | | Na fonts ni web e sa yaqona na veivaisa | 0.05-0.2 | font-display: optional se size-adjusted fallback | | Na veika e tu ena veitarogi | 0.1-0.4 | Ra veiqaravi, me vakayagataki content-visibility | | Na cookie banners e na veiakuli | 0.05-0.2 | Overlay design (sega ni veineita) |

Na CLS e taura na iwalewale:

<!-- Me ra sa vakarautaka na `width` kei na `height` ena media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Ra taura na veika eda so na tulukau -->
<div style="min-height: 250px;">
  <!-- Na ad e na load kina qo ena sega ni dikevi -->
</div>

<!-- Me ra taura na aspect-ratio e na media -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Quick win: Raica na vakadei width kei height na veika e sa dikevi ena kei ena nomu itukutuku 10 e vuqa. Oqo na iwalewale e laurai tu na CLS —

2. Mobile Optimization

Na Google e se kisi e na mobile-first indexing — na nomu iwebsaiti e raura me kunei na doc. Ke iwebsaiti e rawa ni tauri i walewale ena mobile, e sega ni yaga na desk top.

Na iwalewale ni mobile:

| Na iTukutuku | Na iVakasaqa | Na iTukutuku ni veivakalewai kei na kena | |---------|-------------|----------------| | Meta ni Window | width=device-width, initial-scale=1 | E sega ni tu vata | | Na tocancies | Hika 44x44px | Na ivakarau lailai, na veivialevu | | Laivaki ni font | Hika 16px | 12px e yaga tu | | iTukutuku | No horizontal scrolling | Na ivakarau ni ivakarau | | Na vakaraitaki | 8px hika na tocani | Na iwalewale e raica | | Responsive media | srcset e na iwalewale vata | Na images sa taura ena mobile |

Na iwalewale in responsive:

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

Na mobile SEO signals na Google e dikeva:

• Na ivakarau e rawa ni raica na veika e ra vakasaqa
• Na link/ veivakau ni veigoca e sega ni tiqosi vata
• Na itukutuku e na taura i noda window (sega ni horizontal scroll)
• Sega ni Flash se na veika e sega ni talanoa
• Na interstitials e sega ni tiqosi na itukutuku
• Na page e rorogaka tu ena 4G/3G connections

Quick win: Tova na nomu iwebsaiti ena nomu fonu. Tiko walega sa raba e na teboka? De raica na veika e sa dikevi? Ke e dua, ena fiafia na sevusevu tu. Na veika e dua e na oca (sega ni tawa tu) e na ra na bisita nodrai wai.

3. Accessibility (WCAG)

Na accessibility e sega ni ke tamata eso — e ekai na signal ni SEO. Na Google e veidokai na iwebsaiti e ra sa vakayagataki e na bisita, sa saumi na tasting, e sega ni biu.

Na iwalewale ni accessibility:

| Na iTukutuku | Na iYanguage | Na yaga ni SEO | |---------|-------------|------------| | Alt text e na imaiti | Na vosa e yalataka na ivakarau ni loma e du tikoga | Yaga (iyaloyalo + accidental) | | Aleka o Heading | TODO | Dikevaki (na irokeda) | | Kera ni Aso | TODO | TODO | | Keyboard Navigations | Na veika e qaqa na i toso | TODO | | Labels e na ARIA | TODO | TODO | | Safe Browsing | Na veika e saumi tu | TODO |

Na iwalewale uoliva:

1. Vakadei me tocati — Na run Lighthouse, axe-core, se WAVE (na veika e na 30-50% ni veile)
2. Keyboard test — Iweiga na nomu iwebsaiti e na taica
3. Screen reader — Kawaki VoiceOver (Mac) se NVDA (Windows) e na veika e tu
4. Kera ni Aso — Dikeva na veika e du.*
5. Zoom test — Dikeva na 200% — e ceraka rawa na veika e tu?

Na iwalewale ni accessibility yen:

<!-- 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">Read the complete SEO guide</a>
<!-- NOT: <a href="/guide">Click here</a> -->

<!-- Skip navigation for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>

Quick win: Dikeva na iLighthouse ena nomu homepage ka e sa loma to e 10 — na veika i ya sa loma na e vukici e 20 me rui bibi.