មគ្គុទេសក៍ SEO ជំហានទី ៥: UX / អេហ្វៈអ្នកប្រើប្រាស់

នេះគឺជា ជំហានទី ៥ នៅក្នុង មគ្គុទេសក៍ SEO ១៣ ជំហាន។ ប្រភេទបទពិសោធន៍អ្នកប្រើប្រាស់ឥឡូវនេះជាទម្រង់ទម្រង់ដែកច្រើនដែលត្រូវបានវាស់វែងដោយ Google ពីរបៀបដែលអ្នកទស្សនាប្រព័ន្ធរបស់អ្នក មិនមានចលនាឡើយហើយគេក៏ផ្តល់រង្វាន់ជូនវេបសាយដែលផ្តល់បទពិសោធន៍លឿន, ងាយស្រួល, និងសប្បាយរីករាយ។

---

គំរោងខ្លឹមសារ (ជំហានទី ៣) កំណត់អ្វីដែលអ្នកចុះពុម្ព។ ការកសាងភ្ស (ជំហានទី ៤) បង្ហាញអាជ្យសិទ្ធិរបស់អ្នក។ ប៉ុន្តែបើអ្នកទស្សនាដាក់ជើងលើទំព័ររបស់អ្នកហើយចាកចេញភ្លាមៗព្រោះវា ងាយស្រួល, ខូចកាលវិភាគលើមូបាយ, ឬគ្មានការចូលដំណើរការ— គំនិតទាំងនេះមិនមានសារៈសំខាន់ទេ។ Google គ្រប់គ្រងសញ្ញាទាំងនេះហើយប្រើវា ដើម្បីកែប្រែដាន្តរដែង។

ចាប់តាំងពីឆ្នាំ ២០២១ ការអាប់ដេត Page Experience របស់ Google បានធ្វើឲ្យ UX មានតុល្យភាពជាអត្រា៖ ដីគគ្រា។ ក្នុងឆ្នាំ ២០២៤ INP (Interaction to Next Paint) បានជំនួស FID ជាធនធានCore Web Vital។ ក្នុងឆ្នាំ ២០២៦ សញ្ញាទាំងនេះលើកុមនោះបន្តទទួលយកអាទិភាពបង្គាត់ដោយ Google បានអ៊ុំបរិច្ឆេទបន្ថែម។

អ្វីដែល UX សំរាប់ SEO ធ្លាប់មាន

ការបង្កើត UX សំរាប់ SEO ធ្វើការពង្រឹងនេះសម្រាប់ ៦ តំបន់៖

1. Core Web Vitals — គណនីក្រោមការបច្ចេកទេសត្រឹមត្រូវរបស់ Google (LCP, INP, CLS)
2. Mobile Optimization — ការរចនាទាក់ទាញ ផ្តល់នូវគេហទំព័រ ការបង្ហាញនៅលើទំព័រ
3. Accessibility (WCAG) — ធ្វើឲ្យវេបសាយរបស់អ្នកអាចប្រើបានសម្រាប់គ្រប់គ្នា
4. Page Experience Signals — HTTPS, គ្មានអេឡិចត្រូនិច, ការរត់ដែលសុវត្ថិភាព
5. Navigation Patterns — រចនាសម្ព័ន្ធ។ ទំព័រដែលជួយអ្នកប្រើប្រាស់ និង crawlers
6. Above-the-Fold Optimization — អ្វីដែលអ្នកប្រើប្រាស់មើលដោយគ្មានការរុំលើអត្ថបទ

1. Core Web Vitals (CWV)

Core Web Vitals គឺជា ៣ អ្វីដែលស្ថិតក្នុងតម្លៃសមា្តត។ តម្លៃវាត្រូវបានចុះឈ្មោះនៅក្នុងរបាយការណ៍ Chrome User Experience Report (CrUX) ហើយប៉ះពាល់ដល់ដេីមនូវការតក់តាំង។

មាត្រចំនួន ៣៖

| មាត្រ | វាស់វែង | ល្អ | ត្រូវការកែលម្អ | អាក្រាត | |--------|----------|------|-------------------|------| | LCP (Largest Contentful Paint) | ល្បឿនផ្លូវចូល | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | ការឆាកបម្រើ | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | ស្ថិរភាពទូទៅ | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — Largest Contentful Paint

LCP វាស់វិធីដែលមាតិកាសំខាន់នៅលើទំព័ររបស់អ្នកក្លាយជាការមើលឃើញ។ “មាតិកាធំ” ភាគច្រើនគឺជារូបភាពស៊ិនមេ, ប្រធានបទសំខាន់, ឬផ្នែលធំជាងមួយនៅលើផ្នែកខាងលើ។

បញ្ហា LCP និងការកែប្រែ៖

| បញ្ហា | ប៉ះពាល់ | ការកែប្រែ | |---------|--------|-----| | រូបភាពស៊ិនមេមិនទាន់បង់ចំណូល | +2-5s | រូបភាព WebP, ទំហំត្រឹមត្រូវ, fetchpriority="high" | | CSS/JS រឹងតំណសភាព | +1-3s | Inline critical CSS, defer non-critical | | ឆ្លើយសេវាកម្មយឺត (TTFB) | +1-4s | CDN, ការបញ្ជូនសេវាកម្ម, edge deployment | | Web fonts បង្ហាញ | +0.5-2s | font-display: swap, preload critical fonts | | Scripts ថាគររង | +1-3s | Defer analytics/chat widgets, lazy load ads |

អាទិភាពក្នុងការកែលម្អ 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">

យល់ឃើញដោយភ្លាម៖ រត់ PageSpeed Insights នៅលើទំព័រ HTML ដើមរបស់អ្នក។ មើលស៊ីស្គេន LCP ដែលវាបង្កើត។ ប្រសិនបើវាជារូបភាព, បំលែងទៅ WebP, កំណត់ទំហំច្បាស់/ប្រហែល, ហើយបន្ថែម fetchpriority="high"។ អ្នកអាចលោត LCP របស់អ្នកដោយ ១-២ វិនាទី ។

INP — Interaction to Next Paint

INP វាស់វិធីដែលទំព័ររបស់អ្នកសំរេចចំណាក់ប្តូរក្រាហ្វិកនៅពេលដែលអ្នកប្រើប្រាស់ធ្វើការប្រើប្រាស់ (ចុច, ប៉ះ, វាយ)។ វាបង្កើតការមើលគ្រប់វិធីយ៉ាងឆ្នៃវិធីផ្ដល់.

បញ្ហា INP និងការកែប្រែ៖

| បញ្ហា | ប៉ះពាល់ | ការកែប្រែ | |---------|--------|-----| | ធ្វើការងារ JavaScript យឺត | +200-1000ms | បំបែកវាជាដំណើរការជាភាគតិច, ប្រើ requestIdleCallback | | ធ្វើ​ការ​ច្រកទ្រុមៗ | +100-500ms | Debounce, throttle, ប្រើ requestAnimationFrame | | ស្រោមបំបាត់ | +50-300ms | បង្ហុស DOM ទាំងស្រុង, ធ្វើការប្រៀបធៀប will-change | | Scripts ថាគររង | +100-500ms | Defer, load after interaction, use Web Workers | | ការអំឡង់ API | +200-2000ms | Async/await, loading states, optimistic UI |

បច្ចេកទេស INP Optimization:

// យ៉ាងហោចណាស់: បង្ហាញស្រទាប់សំរាប់តំណែល
button.addEventListener('click', () => {
  const data = heavyComputation(); // ផ្តូរដល់ 400ms
  updateDOM(data);
});

// ល្អ: ចែកចាយទៅនឹងស្រធាត្រ មានដើម
button.addEventListener('click', async () => {
  // បង្ហាញចម្លើយទាន់ហើយ
  button.textContent = 'Loading...';

  // បំបែកការងារអារក្សឯកសារ
  await scheduler.yield();
  const data = heavyComputation();

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

យល់ឃើញដោយភ្លាម៖ បើក Chrome DevTools > Performance tab។ ចុចតាមគេហទំព័រ របស់អ្នកហើយមើលសូម្បីមួយ "Long Tasks" (ត្រចៀកក្រហម។) ទាំងនេះគឺគ្រប់គ្រងលីតនូវស្រធាត្រ។ ការធ្វើតំណែលយ៉ាងខ្លាំងជាប្រចាំជាភាគចម្បងភាគីផ្សេងហើយបំបែកមួយឬចង់ម៉ៅ ។

CLS — Cumulative Layout Shift

CLS វាស់វិធីស្ថាប័ន视觉 — ពេលវេលាគាត់បណ្ដាលការកាត់ឡើងទៅភាពមើលគ្រូនំបញ្ចៀកសាង បានទេនោះក្មីទប់ស្កាត់ញ៉ាតលាយបូមស្និល។ អ្នកមិនមានច្រាំងក្លែងនៅសំខាន់ដែលចុចនុងផ្នែកខាងអាសន្ន និងគួរតែចុចផ្នែកផ្សេង។

បញ្ហា CLS និងការកែប្រែ៖

| បញ្ហា | CLS Impact | ការកែប្រែ | |---------|-----------|-----| | រូបភាពមិនមានការកំណត់ | 0.1-0.5 | តែងតែកំណត់ width និង height | | ផ្សព្វផ្សាយកើនឡើងយឺត | 0.1-0.3 | កំណត់ទីតាំងជាមួយ min-height | | Web fonts ធ្វើឲ្យបបានសកម្ម | 0.05-0.2 | font-display: optional ឬ ប្រើកំណត់ជាយ៉ាងផ្លូវទៅមុខ | | ជំរំការបន្ថែមសកម្ម | 0.1-0.4 | កំណត់ទីតាំង, ប្រើ content-visibility | | បន្ទាត់កូកូសស蹲ន៍កក់ | 0.05-0.2 | ផ្នែកប្រកែង (មិនដាក់ក្នុង) |

តារាងការវាង CLS:

<!-- តែងតែបញ្ជាក់ទ្រង់ទ្រាយសំរាប់មេឌា -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- កំណត់ទីតាំងសំរាប់មាតិកាជាប់សកម្ម -->
<div style="min-height: 250px;">
  <!-- ផ្សព្វផ្សាយនឹងកើតនៅទីនេះដោយគ្មានការសាចក្នុង, -->
</div>

<!-- ប្រើមាត្រទង់សំរាប់ប្រម៉ូស៊ីពេកមគ្គុទេសក៍ស្និល -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

យល់ឃើញដោយភ្លាម៖ បន្ថែមវត្ថុ width និង height ទាំងអស់ទៅរូបភាពបន្ថែម និង នៅលើទំព័រ ១០ ដំបូងរបស់អ្នក។ ហេតុផលនេះមិនខុសគ្នាឡើយប្រើក៏ដូចជេលមួយសម្រេចនឿបលោកអ្នករាតត្បាត។

2. Mobile Optimization

Google ប្រើការវាយតម្លៃលើមូទឹវិធីដំបូនមុន—ប្រភេទដង់ការដែលអ្នកថាសំរាប់។ ប្រសិនបើវេបសាយរបស់អ្នកកើតផលច្រលំរឺមានទីតាំងនៅលើមូទឹ វាយតម្លៃដើម្បីគ្រប់គ្រឹះសំរាប់។ Mobile Optimization Checklist:

| ធាតុ | ការទាមទារ | បរាជ័យទាំងក្រោយ | |---------|-------------|----------------| | viewport meta | width=device-width, initial-scale=1 | ខ្វះៈទាំងអស់ | | Touch targets | គ្រប់គ្រង 44x44px | លីងតិច, ក្បាលសន្រឹបច្រោះ | | ទំហំអក្សរ | ធាតុ 16px | 12px អាចមិនអាចអានបាននៅលើម៉ូបាយ | | ទំហំនៅកន្លែង | គ្មានការរុយអាជីគង្គ | ដំណេរប៊ីប្ដូរ | | ការចង្អុលបេយសក្រាត់ខ្ពស់ | 8px នាទៅ | ធាតុប្រភេទឈ្នៀង | | រូបភាពតាមការប្តូរ | srcset ជាមាត្រីយ៉ាងត្រឹមត្រូវ | រូបភាពទំហំដេីមនៅលើម៉ូបាយ |

ស្រមោលការរចនាសាស្ដ្រ:

/* វិធីរចនាគ្រប់គ្រង */
.container {
  padding: 16px;
  font-size: 16px;
}

/* ក្បាលគួរតៃ]]);
}

សញ្ញា SEO លើ Mobile ដែល Google ពិនិត្យ៖

• អត្ថបទអាចអានឯកទេសដែលគ្មានការធន់រឺលកាស
• ប្រភេទ / ប៊ូតុងមិនជិតពេក
• មាតិកាធំនៅលើ viewport width (គ្មានការរុយនៅភាគក្រោម)
• គ្មាន Flash ឬបច្ចេកវិទ្យាទាំងអស់របស់អ្នក
• លំនាំដំណែលមិនលាក់មាតិកาพើឡើយ
• ទំព័រលឿននៅលើ 4G / 3G ។

យល់ឃើញដោយភ្លាម: បើកវេបសាយរបស់អ្នកនៅលើទូរស័ព្ទ។ សាកលើសារសញ្ញាដែលចាប់យ៉ាងចិត្តទីខាងក្នុង។ បើអ្នកភាពមិនទាំងបង្ហញការប្ទេរនៅពេលដែលមានភាពដើមឯកសារងាយ — នោះគឺជាការកែប្រែរបស់អ្នក។

3. Accessibility (WCAG)

ការចូលដំណើរការ មិនត្រឹមតែ មានអាជីវកម្មទេ — វា ជាសញ្ញារាជការ SEO។អ្នកទស្សនា បរិដ្ឋានស្អាតរបស់ Google សម្រាប់វេបសាយដែលប្រើបានសម្រាប់គ្រប់គ្នា, ទូរទស្សន៍តែម្ដង, និងសិទិ្ធខឺណាំរ៉ាមជាមួយ។ ការគោរព WCAG (Web Content Accessibility Guidelines) បំពេញជាមួយនឹងការសម្រេចដំបូង។

ការទាមទារចំរៀងនិងបាំធ្លោយខ្ពសជាក្រេមមុខដាក់៖

| បន្ទាត់ | តម្រូវការ | ផ្សារប្រាក់ | |---------|-------------|------------| | Alt text នៅក្នុងរូបភាព | ព្រាណណើជាផ្នែកសំរែសំរាប់រូបសំគាត់ | ក្នុងន័យ (image SEO + accessibility) | | ការបែងចែកប្រធាន | H1 → H2 → H3 ប៉ុន្តែគ្មានការបន្លំ | ក្នុងន័យ (Structure of content) | | Color contrast | 4.5:1 សម្រាប់អក្សរធម្មតា, 3:1 សម្រាប់អក្សរធំ | ការអម៉ការឋោន (usability) | | Keyboard navigation | ធាតុអន្តរាគមន៍គ្រប់ជំរាំងត្រូវបានប្រើតាម Tab | ការអ៊ិនបែប (usability) | | ARIA labels | ឈ្មោះសម្រាប់ icon កម្រូន នៅដោយគ្មានអត្ថបទ | ការអ៊ិនបែប (screen reader UX) | | Focus indicators | ជំរាវចិញ្ច្រាំនៅលើការប្រើប្រាស់ Keyboard | | Indirect (usability) | | Form labels | អ៊ីនភូជាអ៊ីនពិតបានយកនូវ | Indirect (usability) | | Link text | សំដៅ (មិន "click here") | មានផ្តល់ (anchor text SEO) |

ដំណើរការ Accessability Testing៖

1. Automated scan — រៀបចំ Lighthouse, axe-core, ឬ WAVE (ចាប់យក ~៣០-៥០% នៃអ្វីដែលមាន)
2. Keyboard test — ទស្សនាទំព័រអ៊ិនថ្មីៗស្រាប៊ីត+បំពាន់
3. Screen reader test — វាយប្រមាណ VoiceOver (Mac) ឬ NVDA (Windows) ដោយសង្ខេប
4. Color contrast — ពិនិត្យអត្ថបទក្នុងការប្រនា ենթрофессион៉ាទៀរ(wisps)
5. Zoom test — Zoom ទៅ 200% — មិនអាចធ្វើការបានរឺអតិបរិច្ឆេទទេ?

ការកែប្រែ​ដ៏​យ៉ាង​សាមញ្ញ៖

<!-- រូបភាព: alt text ឡូយ -->
<img src="chart.png" alt="Bar chart showing 40% increase in organic traffic from January to March 2026">

<!-- ប៊ូតុង: បញ្ជាក់អត្ថបទល្មម -->
<button aria-label="Close navigation menu">
  <svg>...</svg> <!-- Icon-only button needs aria-label -->
</button>

<!-- ឯកសារ: Labels បង្ហោះធ្វើ -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Links: Text in detail -->
<a href="/guide">អានមគ្គុទេសក៍ SEO ទាំងមូល</a>
<!-- មិនអាច​ទៅ: <a href="/guide">ចុចនៅទីនេះ</a> -->

<!-- ចៀសវាងការរស់រាយពីអ្នកប្រើប្រាស់ keyboard -->
<a href="#main-content" class="skip-link">ចេញប្រើនៅឧបត្ថម្ភការងារ</a>

យល់ឃើញដោយភ្លាម: រត់ Lighthouse នៅលើទំព័រដើមរបស់អ្នកជាមួយប្រភេទ Accessbility។ កែប្រែលើការនេះម៉ាចាំ "Fails" ដែលធ្វើឲ្យរាំងរាំងទេ — ទាំងនេះជារូបស័្នកសន្ឋឭ ត្រូវបាន់ចង់ណេខ្សែ cambola និងកំហុសលុសីការបង្ហBailey hangai כולא និងទំនាញគន្លឺម៉ង់សល់គេសូមធ្លាប់បែរ។

4. Page Experience Signals

ក្រៅពី Core Web Vitals, Google វាស់វែងយ៉ាងជាច្រើននូវសញ្ញាបទពិសោធន៍នៃទំព័រដែលមានអាទិភាពលើការបង្ហាញរីករីនើយ។ Page experience factors:

| សញ្ញា | តម្រូវការ | ពិនិត្យ | |--------|-------------|-------| | HTTPS | គេហទំព័រទាំងអស់គួរត្រូវបានបង្ហាញតាម HTTPS | Mixed content បំបែកវា | | គ្មានអេឡិចត្រូនិកខ្លាំង | កុំរាងរកមុខ | Popups covering >30% on mobile | | Safe browsing | មិនមានប្រភេទមានរ៉ាហ្វេតស្ថាន | Google Safe Browsing status | | Mobile-friendly | Passed mobile-friendly test | Google Mobile-Friendly Test | | គ្មានពាណិជ្ជកម្មប្រមាណយ៉ាងខ្លាំង | Advertising does not mimic content | Disguised download buttons |

និន្នាការ Interstitial (អ្វីដែលអាច្ឈនិងអ្វីដែលគ្រប់គ្រង): | អាចស្ន្រុត | ពេលជារារាំង | |---------|-----------| | ការប្រើទីស្នរ (ត្រូវការច្បាប់) | Popup მდებឹជ្ត់នៀរ | | Cookie consent | ឡូរ sign up for Google | | កាន់តែមាន​ការបញ្ចាំទីតាំងការបញ្ចាំងាយ | "Download our app" blocking content | | គំរោងតូចណាផ្កាយ >30% | Countdown timers before content access | | ឆ្នាំត្រូវហ្រើរ្រត | កុំវែកញាតកបុគ្គល |

HTTPS Checklist:

• [ ] SSL certificate valid និងមិនសម្ងញាត
• [ ]ទំព័រទាំងអស់ Redirect HTTP → HTTPS (301)
• [ ] គ្មាន Mixed content (HTTP resources on HTTPS pages)
• [ ] HEADST គាំទ្រលើ​ពីរ
• [ ] Internal links use HTTPS (not HTTP)
• [ ] Sitemap uses HTTPS URLs
• [ ] Canonical tags use HTTPS

យល់ឃើញដោយភ្លាម: ពិនិត្យអំពី Mixed Content — បើក DevTools Console នៅលើទំព័រពិសេសរបស់អ្នក។ ត្រូវមានការពិនិត្យ Mixed Content ។

5. Navigation Patterns

ការបង្ហាញនឹងជួយអ្នកប្រើប្រាស់ដែលតឹងយោបល់ៗឬហ៊ីតេង។ អ្នកគួរតែធ្វើឱ្យមានតម្លៃស្រាលមួយហើយ Google crawlers គួរតែកម្លើយការបើកចេញនោះ។ Best Practices Navigation:

| Pattern | Benefit | Implementations | |---------|---------|----------------| | Flat architecture | ទំព័រក្នុង ៣ ដើម | Hub pages, breadcrumbs | | Breadcrumbs | អ្នកប្រើប្រាស់ស្គាល់កន្លែង ដោយលេខ | Schema markup + visible trail | | Logical URL structure | លក្ខណៈដែលត្រូវអនុតាមទូល | /category/subcategory/page | | Footer navigation | Secondary page accessible | Legal, about, contact, sitemap | | Internal search | Users find specific content | Search box with suggestions | | Related content | Reduces bounce, increases depth | "Related articles" sections |

ការ​ស្ថាបនាប្រកែបន្តបង្កើនល់ហើយ លេង​យ៉ាង​ដូចរដឹក​រន្ធនា​ទា៖

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)

ការប្រើប្រាស់ Breadcrumbs:

<!-- Breadcrumbs -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">ផ្ទះ </a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">SEO Guide 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": "SEO Guide Step 5" }
  ]
}
</script>

Navigation Red Flags:

• ភាគច្រើនលើ ៤ ចុចពីផ្ទះ (ជីវិតលើទៅចូល)
• គ្មាន breadcrumbs (users និង Google អាចមិនរកមិនបាន)
• JavaScript-only navigation (crawlers may miss links)
• Orphan pages (no internal links pointing to them)
• Mega menus with 200+ links (dilutes per-link value)

យល់ឃើញដោយភ្លាម: ពិនិត្យទំព័រអោយបានច្រើន គើបក្រោយពេលមិនល្អ — អ្នកតប មានតិចជាង ៣ ដំណើរការ លើធាតាត្រិមរាប់។ បើលំដាប់ដូចជាត្រូវការនៅមាន ២-៣ និងមាន...

6. Above-the-Fold Optimization

អ្វីដែលអ្នកប្រើប្រាស់មើលមុនមានការដាក់តំលៃពិតឬ បន្ទាន់តម្រូវការរស់ដោយបាត្លិតពណ៌មិនមែនការខកចិត្តគ្នា និង ត្រូវនៅជាមួយអ្នកប្រើប្រាស់ឬមិនយល់ពីការសហគមន៍របស់អ្នក។ Above-the-fold must-haves:

| Element | Why | Common failure | |---------|-----|----------------| | Clear headline (H1) | ពិនិត្យសមត្ថភាពពីសំណុំ | ឡើងទ្រង់អេហ្សតជាច្រើន | | Value proposition | គឺអ្វីដែលពួកគេត្រូវបានជួយទីងបស់ | បានក្រោមស្នេះ | | Primary CTA | តើគេបានបង្កនើ | គ្រាប់ខាងក្រោម | | Hero image/media | Visual engagement | ការពន្យាដោយលឿន, បង្កើត LCP | | Trust signals | មានអ្វីសំខាន់ ? | គ្មានរូបភាពគួរឲ្យអត់អារកលីន។ |

ដំណោះស្រាយនៅផ្នែកខាងលើ:

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  │
└────────────────────┘

សំខាន់ៗលើផ្នែកខាងលើ៖

• H1 ដែលត្រូវចុចមើលមិនគួរក្វើប័ណ្ណុល (នៅលើសេចក្ដីចុះបញ្ជី)
• CTA ត្រូវមិនបានចុច (ចុចNut)
• គ្មានដំណើរការសាមញ្ញនៅអនុបណ្ឌិតនេះ (CLS killer)
• Hero image ត្រូវមានអ្វីអាចបង្កើតងាយ (វាជាធាតុ LCP)
• Mobile: ត្រូវកំចាត់ចាំបានខាងលើដោយបានកំពស់ (កណ្តាល viewport)

យល់ឃើញដោយភ្លាម: មើលថាស៊ាំតុមុខទាំងអស់ពីពេលព្រឹកសម្រាប់ម៉ូបាយ (375px width)។ H1 ត្រូវមើលលើចំណាត់ស្លាប?! ប៊ូតុង CTA ត្រូវមើលឡើង? អ្នកអាចកចមទៅអ្វីមួយរៅក្នុង ២ វិនាទី? ប្រសិនបើ​ប្រសើទាំងនេះដោយស្ទាវត្រូវស្កែម!

The UX Audit Checklist

ចុះបញ្ជីនេះសំរាប់ទំព័រល្អៗរបស់អ្នក៖

• [ ] LCP នៅក្រោម 2.5 វិនាទី (រូបមិត្តក្បាលមានលំនាំ, CSS សំខាន់ៗ)
• [ ] INP ត្រឹម 200ms (គ្មានការងារ JavaScript ប្រាក់ក្នូ)
• [ ] CLS ត្រូវ 0.1 (រូបភាពទាំងអស់មានទ័រថារនៅ,គ្មានឡើងចន្លោះយូម)
• [ ] Mobile-friendly (44px touch targets, 16px+ text, គ្មានការត្រង់ក្រោមកូច)
• [ ] Accessible (alt text, heading hierarchy, color contrast, keyboard nav)
• [ ] HTTPS everywhere (គ្មាន 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 UX-related scan module របស់ពួកយើងរួមមាន៖

• Core Web Vitals module — វាស់វឹង LCP, INP, CLS ពី 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

Modules ទាំងនេះរួមដំណោះស្រាយដោយសាច់ដុំអនេកទាទំព័រទាំងអស់នេះ — និងច្បាស់ថានរណាធំកកណ្តាលបន្ទាបថ្ងៃអាឨានួយឡើងដោយប្រសើ។

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 — You can't improve what you don't measure. Keyword positions, score tracking, change reports, and uptime monitoring.

---

មគ្គុទេសក៍នេះមកពី LANGR ជាជំហាន ១៣ នៅក្នុងមគ្គុទេសក៍ SEO។ Run a free audit ដើម្បីមើលថារបាយការណ៍បង្ហាញពីវេបសាយអ្នកនៅលើ ៣ លក្ខណៈនេះ។