Gidimme SEO Pa Step 5: UX / T'expérience Utilisateur

Yenn ci Step 5 ci Gidimme SEO 13-Step. T'expérience utilisateur mën na la jëfandikoo ci rank — Google muy jëfandikoo ni ñi jàpp ci sa njaxlaf, te reew naa ay sité yu jëfandikoo ci biiri, jàmm ak jëfandikoo yu rafet.

---

Njàngat bi (Step 3) dañu ko taxaw, ndaxte élaboration (Step 4) dafay ànd ak sa ndokke. Waaye bu ñi jàpp ci sa page te ginnaaw bu ñuy jàpp ci yoon bu ndaw, bu amul dëkk, bu mënul gëna am jàmm — bés bu ñu wéy. Google dal na lépp bi ak yenn ci yam ci yalu ni, te yéddoo ci suñu njiit.

Ci weer bu 2021, Google jëndu na Page Experience bu mën a jëfandikoo UX ci rank. Ci 2024, INP (Interaction to Next Paint) moy na FID ci Core Web Vital. Ci 2026, ay sigal yi ngi am ci jafe jafe, jëm ci Google tadalafil luy jëfandikoo yu jóge ci ni u.req ak yeneen.

What UX for SEO Covers

Optimisation UX ci SEO dañu ko dindi ci 6 àdduna:

1. Core Web Vitals — Metrics UX bu wér (LCP, INP, CLS)
2. Mobile Optimization — Design jawriñ, yoon yu jàpp, viewport
3. Accessibility (WCAG) — Jëfandikoo sa sité moon dla am jur
4. Page Experience Signals — HTTPS, bu nuy jàpp interstitials, safe browsing
5. Navigation Patterns — Jàmm ak jàmm bu dunde seetlu
6. Above-the-Fold Optimization — Loolu yi ñi jàpp ci ginnaaw bu jàpp

1. Core Web Vitals (CWV)

Core Web Vitals dañu ko ak metrics UX yu ñuy def. Dinanu jëfandikoo ci Chrome User Experience Report (CrUX) te jëfandikoo ci rank.

Ay metrics njiit:

Metric	Measures	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	Jàmm bu wér	< 2.5s	2.5s - 4.0s	> 4.0s
INP (Interaction to Next Paint)	Responsiveness	< 200ms	200ms - 500ms	> 500ms
CLS (Cumulative Layout Shift)	Jàmm visual	< 0.1	0.1 - 0.25	> 0.25

LCP — Largest Contentful Paint

LCP dañu ko may nañu loolu ci niñu jàpp ci sa page. "Content bu wér" mooy l'image bu màndarga, njaay bi ak l'arit bu réew.

Ay loolu gi am nañu ci LCP ak ay fixes:

Problem	Impact	Fix
L'image bu màndarga amul jàmm	+2-5s	WebP format, njaay bu metti, fetchpriority="high"
CSS/JS bu blokka	+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

Priorité optimisations LCP:

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

<!-- 2. Inline CSS bu metti (first 14KB) -->
<style>/* Styles bu wergi u mbind mi */</style>

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

<!-- 4. L'image bu màndarga ak dimensions bu metti -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Descriptive alt text">

Quick win: Run PageSpeed Insights ci sa homepage. Jokk ci LCP element bi mu jëfandikoo. Bu amul jàmm, jëfandikoo WebP, set width/height, te jëfandikoo fetchpriority="high". Bi loolu, dinaa jëfandikoo LCP bu metti 1-2 seconds.

INP — Interaction to Next Paint

INP dañu ko may nañu ni sa page mën na jàmm ci ñi am jàmm (click, tap, type). Di jëfandikoo interaction buy am ci ginnaaw bu lëkk mi, te jëfandikoo it.

Ay loolu gi am nañu ci INP ak ay fixes:

Problem	Impact	Fix
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

Techniques optimisations INP:

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

// Bop: 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: Open Chrome DevTools > Performance tab. Jàpp ci sa sité te gë̀nna jàpp "Long Tasks" (red triangles). Ay loolu yi dañu di blokke main thread. Ay loolu bu amul jàmm bu tar na loolu ak script bu ëllëg — defar ko walla jàpp ko ginnaaw bu jàpp.

CLS — Cumulative Layout Shift

CLS dañu ko may nañu jàmm visual — bu ñuy jël, sa page mën na ñu jàpp ni la mu jàmm ci. Lu mëna jëfandikoo moum bayyi, bu ñuy jàpp ci.

Ay loolu gi am nañu ci CLS ak ay fixes:

Problem	CLS Impact	Fix
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)

Checklist prevention CLS:

<!-- 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: Jëfandikoo width ak height attributes fanaan bu ñuy jëfandikoo ci ñi jàpp ci sa top 10 pages. Loolu la fi luy yëng ciy yéen CLS bu mënees — images loading ak pushing content down.

2. Mobile Optimization

Google jëfandikoo mobile-first indexing — sa mobile expérience MOOM, sa rank expérience. Bu sa site amul jàmm ci mobile, du yàgg lu jëm ci sa desktop version.

Mobile optimization checklist:

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 Google checks:

• Text readable without zooming
• Links/buttons not too close together
• Content fits viewport width (no horizontal scroll)
• No Flash or unsupported technologies
• Interstitials don't block content on entry
• Page loads quickly on 4G/3G connections

Quick win: Jëfandikoo sa sité ci sa téér. Jëfandikoo sa togg la ci ginnaaw. Bu ginnaaw dafa mënul, walla bu ñuy jàpp ci ginnaaw ci sa yoon yi, nan ci ginnaaw — ay loolu la am, loolu jàmm ci.

3. Accessibility (WCAG)

Accessibility duñu ñeex — mooy signal SEO. Google yi am ni dal na ay site yu mën a jëfandikoo ci yéen, ak niñuy jëfandikoo ci screen readers, keyboard-only navigation, walla visual impairments. Njàngat yi ci WCAG (Cédul Sa Twén) dinaa ko jëfandikoo, mooy jëfandikoo ci ranking.

Ay jàmm fanaa mën:

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)

Accessibility testing process:

1. Automated scan — Run Lighthouse, axe-core, or WAVE (catches ~30-50% of issues)
2. Keyboard test — Jàpp ci sa site ci jëfandikoo sous Tab, Enter, Escape
3. Screen reader test — Jëfandikoo VoiceOver (Mac) walla NVDA (Windows) ci ay pages
4. Color contrast — Jëfandikoo lépp text ci backgrund yeeker (jokk ci DevTools contrast checker)
5. Zoom test — Zoom to 200% — ndax loolu yomb nañu?

Ay loolu gu jàmm:

<!-- 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: Run Lighthouse ci sa homepage po' funaay. Jëfandikoo lépp doxun "Fails" dafa am mbaa yenn loolu ak alt text, missing form labels, ak low contrast text. Ay loolu baye di ko jëfandikoo 30min ak 20+ points.

4. Page Experience Signals

Doko ci Core Web Vitals, Google jëfandikoo ci yenn pendaay eyu page experience signals bu jëfandikoo ci ranking.

Page experience factors:

Signal	Requirement	Check
HTTPS	Tèye bu jëfandikoo ci HTTPS	Mixed content breaks it
No intrusive interstitials	Dëkkul ci content boole	Popups covering >30% on mobile
Safe browsing	No malware, phishing, deceptive content	Google Safe Browsing status
Mobile-friendly	Passes mobile-friendly test	Google Mobile-Friendly Test
No deceptive ads	Ads don't mimic content	Disguised download buttons

Guidaay interstitials (lu mën a jëfandikoo vs. lu béejay):

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 ak duñuy expired
• [ ] Lépp pages redirect HTTP → HTTPS (301)
• [ ] No mixed content (HTTP resources on HTTPS pages)
• [ ] HSTS header enabled (with includeSubDomains)
• [ ] Links internes jëfandikoo HTTPS (duñuy HTTP)
• [ ] Sitemap jëfandikoo HTTPS URLs
• [ ] Canonical tags jëfandikoo HTTPS

Quick win: Jëfandikoo mixed content — open DevTools Console ci sa pages bu metti. Yenn "Mixed Content" warnings mën nañu jëfandikoo HTTP resources ci page HTTPS. Jëfandikoo yenn URLs ak HTTPS. Loolu mooy loolu bu mëna jëfandikoo ci page experience issues.

5. Navigation Patterns

Loolu jëfandikoo fanaan bopp ak Google. Yennyi mënna jàpp loolu ak jëfandikoo. Google crawlers am nañu loolu ngir jàpp bukku yaakaar ak distribute PageRank ci wergi.

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">Gidimme SEO Pa Step 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": "Gidimme SEO Pa Step 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: Jëfandikoo sa pages bu tudd jafe-jafe — nit ki nekk 3 clicks ci sab homepage? Bu mëne na, jëfandikoo loolu ak dai links law. Lexiy jàppe jël an, ak jàmm ak lëmmou.

6. Above-the-Fold Optimization

Loolu yi ñi jàpp ci ginnaaw bu jàpp, dañu ko jëfandikoo bu mëna yay yoon. Loolu yi mën na jëfandikoo di na loolu dox.

Above-the-fold must-haves:

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

Above-the-fold layout patterns:

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: Jëfandikoo screenshot ci sa homepage ci mobile (375px width). Ndax H1 luy nekk? Ndax CTA button luy nekk? Mën nañu gë́n di na baax. Ndax buñuy nekk "ndax," yoon yi mën nañu jëfandikoo.

The UX Audit Checklist

Run through this for your top pages:

• [ ] 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)

How LANGR Scans Your UX

LANGR's UX-related scan modules include:

• Core Web Vitals module — Measures LCP, INP, CLS from Chrome User Experience Report (real user data)
• PageSpeed module — Full Lighthouse performance audit with mobile and 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 and desktop layouts
• Page Experience module — Interstitial detection, HTTPS status, safe browsing

Ay modules yi di jëfandikoo ci lépp scans, nangu na yaw loolu jëfandikoo, ak loolu mën nañu jëfandikoo ci dobe yu metti.

Common UX Mistakes (Ranked by Impact)

1. Ignoring mobile — 60%+ of searches are mobile; broken mobile = broken rankings
2. Unoptimized images — The #1 cause of slow LCP (and often the easiest fix)
3. No explicit image dimensions — Layout shifts destroy 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 — Users can't tell what the site does without scrolling

What's Next?

Step 6: Monitoring & Ranking — Duñu mëna jëfandikoo lu yaram mën a jëfandikoo. Bayo positions, score tracking, change reports, ak uptime monitoring.

---

Loolu ginaar mën na ci LANGR's 13-step SEO series. Run a free audit ngir jëfandikoo sa sité ak lépp ci 13 disciplines.