SEO Гарын авлага 5: UX / Хэрэглэгчийн туршлага — Зочдын таны сайтад харж байгаа байдлаас хангах зэрэглэл нөлөөлдөг
SEO Гарын авлага 5: UX / Хэрэглэгчийн туршлага
Энэ бол 13 алхмын SEO гарын авлага-гийн 5 дахь алхам. Хэрэглэгчийн туршлага одоо шууд зэрэглэлийн хүчин зүйл болжээ — Google зочдын хэрхэн таны сайтыг ашиглаж буйг хэмжиж, хурдан, хандалттай, тааламжтай туршлага хүргэдэг сайтад шагнал өгдөг.
Агуулгын стратеги (Алхам 3) нь юу нийтлэхийг тодорхойлдог. Холболтын үүсгэл (Алхам 4) таны эрх мэдлийг нотолдог. Гэхдээ хэрвээ зочид таны хуудас руу орж, удаан, мобайл дээр эвдэрсэн эсвэл хандалтгүй байна гэвэл — үүнээс хамаарах зүйлс алдагдана. Google эдгээр дохиог хянаж, зэрэглэлийг тохируулдаг.
2021 оноос хойш, Google's Page Experience шинэчлэлт UX-ийг баталгаажсан зэрэглэлийн хүчин зүйл болгосон. 2024 онд INP (Interaction to Next Paint) FID-ийг Core Web Vital болохоор солисон. 2026 онд эдгээр дохио улам их ач холбогдолтой болж, Google улам их хэрэглэгчийн сэтгэл ханамжийн хэмжээг анхаарч эхэлсэн.
SEO-д зориулсан UX юу хамардаг вэ
SEO-д зориулсан UX оптимизаци 6 салбарыг хамардаг:
- Core Web Vitals — Google's албан ёсны UX хэмжүүрүүд (LCP, INP, CLS)
- Мобайл Оптимизаци — Хариу үйлдэлтэй загвар, хүрэх зорилт, харах цонх
- Хандалт (WCAG) — Таны сайтыг хүн бүр ашиглахад зориулан
- Хуудасны Туршлага Дохиод — HTTPS, ямар ч интерстици, аюулгүй веб хөтөч
- Навигацийн Хэв Маяг — Хэрэглэгчид болон краулеруудын туслах сайт бүтэц
- Үзэгдэж буй хэсгийн Оптимизаци — Хэрэглэгчид эргэхгүйгээр юу харагддаг
1. Core Web Vitals (CWV)
Core Web Vitals бол Google's гарчигладаг гурван хэмжигч UX хэмжүүр байна. Эдгээрийг 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 | Чухал CSS-ийг инлайн хий, бусад CSS-ийг хойшлуулах |
| Удаан серверийн хариу (TTFB) | +1-4s | CDN, серверийн кэш, захын хүртээл |
| Вебийн fonth-уудыг сурталчлах | +0.5-2s | font-display: swap, чухал фонтуудыг урьдчилан ачааллах |
| Гуравдагч талын скриптүүд | +1-3s | Аналитик/чатаар баталгаажуулах, зар сурталчилгааг хойшлуулах |
LCP оптимизацийн давуу тал:
<!-- 1. LCP зургийг урьдчилан ачааллах -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- 2. Чухал CSS-ийг инлайн (анхны 14KB) -->
<style>/* Үзэгдэж буй хэсгийн стиль фокус */</style>
<!-- 3. Бусад CSS-ийг хойшлуулах -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">
<!-- 4. Тодорхой хэмжээтэй баатар зураг -->
<img src="/hero.webp" width="1200" height="600"
fetchpriority="high" decoding="async"
alt="Тодосгосон alt текст">Түргэн ялалт: Таны хуудасны эрэмбэний төгсгөлд PageSpeed Insights-г шалгана уу. LCP элемент дээр анхаарал хандуулна уу. Хэрвээ энэ бол зураг бол, WebP руу хөрвүүлж, тодорхой өргөн/өндөр зааж, fetchpriority="high" нэмнэ. Энэ нь LCP-ийг 1-2 секундын турш бууруулдаг.
INP — Interaction to Next Paint
INP нь хэрэглэгчид гарын авлага (дарж, товшино, бичиж) хийж байх үед хуудас хэр хурдан хариу өгч байгааг хэмждэг. Энэ нь хужин хуудсын үйл явцын найджийг хянаж, тэр л үнэлгээ болгон ашигладаг.
Түгээмэл INP асуудлууд ба засварууд:
| Асуудал | Нөлөө | Засвар |
|---|---|---|
| Удаан JavaScript үүрэг | +200-1000ms | Бага үүргүүдэд хуваах, requestIdleCallback ашиглах |
| Бага өргөнийг эрхлэх | +100-500ms | Дебоунс, throttle, requestAnimationFrame ашиглах |
| Бүтцийн сараалж | +50-300ms | DOM унших/наахыг багцлах, will-change ашиглах |
| Гуравдагч талын скриптүүд | +100-500ms | Хойшлуулах, хариу үйлдлээс хойш ачаалах, Web Workers ашиглах |
| Синхрон API дуудлага | +200-2000ms | Async/await, ачааллын улс, оптимист интерфейс |
INP оптимизацийн аргачлалууд:
// Муу: Гол утаснаас блочкидсон
button.addEventListener('click', () => {
const data = heavyComputation(); // 400ms блочлоно
updateDOM(data);
});
// Сайн: Гол утасанд тайлах
button.addEventListener('click', async () => {
// Яаралтай хариу өгөх
button.textContent = 'Ачааллаж байна...';
// Хүнд ачааллыг хэсэг хэсгээр нь задлах
await scheduler.yield();
const data = heavyComputation();
await scheduler.yield();
updateDOM(data);
});Түргэн ялалт: Chrome DevTools-ийг нээгээд > Гүйцэтгэл хуудас. Таны сайтаар зочилж, "Удаан үүргийг" (улаан гурвалжин) хайж үзээрэй. Эдгээр нь гол утасанд бийг барьж байна. Ихэнх удаан үүрэг бол гуравдагч талын скрипт байдаг — хойшлуулах эсвэл эхний харьцангуйд ачаалаарай.
CLS — Cumulative Layout Shift
CLS нь визуал тогтвортой байдал хэмждэг - хуудас ачааллах үед агуулга хэр их хөдөлж буйг. Хэрэглэгчид товчлуур дарж байх үед хуудас шилждэгэд тэд их санаа зовдог.
Түгээмэл CLS асуудлууд ба засварууд:
| Асуудал | CLS Нөлөө | Засвар |
|---|---|---|
| Хэмжээгүй зургийн хэмжээ | 0.1-0.5 | Ямар ч width болон height зааж |
| Зар дутуу ачааллага | 0.1-0.3 | min-height хэрэглэх |
| Вебийн фонтууд гадаргууг бүтцээр өөрчлөх | 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>Түргэн ялалт: Таны хамгийн 10 хуудасны бүх дээр тодорхой width болон height чанаруудыг нэмээрэй. Энэ ганц өөрчлөлт хамгийн түгээмэл CLS асуудлыг арилгана — зураг ачааллаж, агуулгыг доош хийдэг.
2. Мобайл Оптимизаци
Google нь мобайл-эдийн засгийн индексийг ашигладаг — таны мобайл туршлага ЗЭРЭГЛЭЛД нөлөөлөх юм. Хэрвээ таны сайт мобайл дээр эвдэрсэн бол, ширээний хувилбар ямар ч төгс байна гэдэг асуудалгүй.
Мобайл оптимизацийн хяналтын жагсаалт:
| Элемент | Шаардлага | Түгээмэл алдаа |
|---|---|---|
| Харах мета | width=device-width, initial-scale=1 | Бүрэн байхгүй |
| Хүрэх зорилт | 44x44px | Жижиг холбоос, буруу товчлуурууд |
| Бичгийн хэмжээ | 16px гэхгүй | 12px мобайл дээр уншихад хэцүү |
| Агуулгын өргөн | Хэрэв налуу шилжихгүй | Б Fixed-width элемент |
| Товчлууруудын зай | 8px хамгийн бага зорилт нь | Бөхөн холбоосууд |
| Хариу үйлдлийн зураг | srcset болон тохирох хэмжээг | Ширээний хэмжээтэй зураг мобайл дээр |
Хариу үйлдэлтэй загварын хэв маяг:
/* Мобайл-ий урьдчилан хандах арга */
.container {
padding: 16px;
font-size: 16px;
}
/* Тосны тохируулагч моторт */
.button, .link {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
/* Хариу үйлдлийн хэв маяг */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }
/* Хэрэв налуу шилжихгүй */
img, video, iframe {
max-width: 100%;
height: auto;
}Google мөнших Mobail SEO дохиг гуталнууд:
- Zoom хийлгэхгүйгээр текст уншигдаж байна
- Холбоос/товчлуурууд хэт ойрхон байхгүй
- Агуулга харах цонхны өргөнт тохирч байна (налуу шилжихгүй)
- Flash болон дэмжигдэхгүй технологи байхгүй
- Interstitials нь агуулгыг блоклохгүй
- Хуудас 4G/3G холболтоор хурдан ачааллана
Түргэн ялалт: Гар утсан дээр сайтаа нээгээд үзээрэй. Гол товчлуурууд болон холбоосыг товшуулахдаа замаасаа явдаггүй үүд. Хэрвээ та ямар нэг зүйлийг алдаж, зорилтууд хэт ойрхон байна буюу текст уншихад тохирохгүй болгосон бол — эдгээр нь таны анхаарал хандуулах шаардлагатай асуудлууд.
3. Хандалт (WCAG)
Хандалт нь зөвхөн ёс зүйтэй биш — SEO дохио юм. Google's алгоритмууд бүх хүмүүст хэрэглэх боломжтой сайтуудыг илүүд үздэг, скрийн буудалтай, зөвхөн товшоотой навигацтай, эсвэл харааны хүндрэлтэй хэрэглэгчдэд зориулан. WCAG (Вебийн Агуулгын Хандалтын Удирдамж) мөрдөх нь дээр зэрэглэлтэй холбоотой.
Чухал хандалтын шаардлага:
| Элемент | Шаардлага | SEO нөлөө |
|---|---|---|
| Зургийн alt текст | Ойлгомжтой текст бүхий чухал зургийн бүх хэлбэр | Шударга (зурагийн SEO + хандалт) |
| Гарчигийн иерархи | H1 → H2 → H3 алгасалгүй | Шударга (агуулгын бүтэц) |
| Өнгөний контраст | 4.5:1 энгийн текстэд, 3:1 том текстэд | Шууд бус (ашиглах боломж) |
| Товчлууруудын навигаци | Бүх интерактив элементийг Tab дээр хандах боломжтой | Шууд бус (ашиглах боломж) |
| ARIA шошгонууд | Техникийн тэмдэг, текстгүй товчлууруудын шошгол | Шууд бус (скрийн буудлын UX) |
| Анхаарал татах тэмдэг | Товчлуураас тойрог тодорхой хэлбэрээр | Шууд бус (ашиглах боломж) |
| Форма шошгонууд | Бүх оролт бүхий | Шууд бус (ашиглах боломж) |
| Холбоосын текст | Ойлгомжтой (өдөг тег дээр биш "дартай") | Шууд (донтоны текстийн SEO) |
Хандалтын туршилтын процесс:
- Автомат скан — Lighthouse, axe-core, эсвэл WAVE-ийг гүйлгэж, (30-50% асуудлын түвшинд гарах болно)
- Товчлулуурын тест — зөвхөн Tab, Enter, Escape-ийг ашиглан бүгдийг нь ђSir мени дотор хөдлөх
- Скрин буудлын тест — VoiceOver (Mac) эсвэл NVDA (Windows) -тай гол хуудсуудаар турших
- Өнгөний контраст — Бүх текстийг арын өнгөнөөс шалгана уу (DevTools контраст шалгагчаар)
- Zoom тест — 200%-д томруулна уу — бүгд ажиллах уу?
Түгээмэл хандалтын засвар:
<!-- Зураг: ойлгомжтой alt текст -->
<img src="chart.png" alt="2026 оны 1 сар-3 сарын хооронд органик хөдөлгөөний 40% өсөлт гарсан багананы график">
<!-- Товчлуурууд: тодорхой шошгон -->
<button aria-label="Навигацийн менюг хаах">
<svg>...</svg> <!-- Зураг-л ханштай товчлуурд ариа-лэйбл хэрэгтэй -->
</button>
<!-- Форм: холбоотой шошгон -->
<label for="email">И-мэйл хаяг</label>
<input type="email" id="email" name="email" required>
<!-- Холбоос: ойлгомжтой текст -->
<a href="/guide">SEO гарын авлагыг уншина уу</a>
<!-- БИШ: <a href="/guide">Энд дарна уу</a> -->
<!-- Товчлуурыг урьдчилан харагдах боломжийг олгох -->
<a href="#main-content" class="skip-link">Гол агуулгад шилжүүлэх</a>Түргэн ялалт: Лайтхаусыг таны хуудаснаас шалгаж, Хандалтын ангилалд цохилтыг хянаж шалгана уу. "Fails" гэж оноо авсан зүйлсийг анхааралтай засна уу — Эдгээр нь ихэвчлэн алдагдсан alt текст, алдагдсан формын шошгууд, муу контрасттай текст байдаг. Эдгээр засвар ихэвчлэн 30 минутын дотор хийж, 20+ оноог сайжруулдаг.
4. Хуудасны Туршлага Дохиод
Core Web Vitals талаас гадна, Google хэд хэдэн хуудасны туршлагын дохиог хянаж, зэрэглэлд нөлөөлдөг.
Хуудасны туршлагын хүчин зүйлс:
| Дохио | Шаардлага | Шалгах |
|---|---|---|
| HTTPS | Бүх сайтад HTTPS-ээр үйлчлэх | Хоёр талтын агуулга алдагдаж байна |
| Ямар ч зөрчилдөөнгүй интерстици | Агуулгыг хүлээн авахад блоклохгүй | Мобайл дээр >30%-ийг хааж буй popups |
| Аюулгүй веб хөтөч | Вирус, фишинг, зальтай агуулгагүй | Google Safe Browsing статус |
| Мобайл-д найдвартай | Мобайл-д хөөрөгддөг тестийг давна | Google Mobile-Friendly Test |
| Ямар ч зальтай зар | Зар нь агуулгад хуурмаглахгүй | Дуулал цонхны түвшинд |
Интерстицийн зааврууд (ямар нь зөвшөөрөгдсөн, ямар нь ялах):
| Зөвшөөрөгдсөн | Ялах |
|---|---|
| Нөхцөл шалгах (зөвшөөрөгдсөн) | Хуудасны оролтод бүрэн дэлгэц дээр попап |
| Күүк шопот (зөвшөөрөгдсөн) | Агуулгыг бүрэн хааж буй и-мэйл нэхэмжлэл |
| Төлбөртэй контентын логин хана | "Манай апп татаж авах" агуулгыг хааж өгдөг |
| Багцын зарын 30%-ийг хэрэглэнэ | Агуулгыг авахад цаг авах тоо |
| Хэрэглэгчийн үзэлтээр үүсгэх | Агуулгын өмнө юу ч харахгүй |
HTTPS хяналтын жагсаалт:
- [ ] SSL сертификат хүчинтэй бөгөөд хугацаа дуусаж байхгүй
- [ ] Бүх хуудсуудаа HTTP → HTTPS (301) руу шилжүүлэх
- [ ] Ямар ч холимог агуулга байхгүй (HTTP нөөц HTTPS хуудсуудад)
- [ ] HSTS толгойн заавар (мөн subDomains-ыг багтаасан эсэх)
- [ ] Дотоод холбоосууд HTTPS (HTTP биш)
- [ ] Sitemap HTTPS URL ашигладаг
- [ ] Canonical шошго HTTPS хэрэглэдэг
Түргэн ялалт: Хоёр талын агуулгын хяналтыг шалгана уу — таны гол хуудас дээр DevTools Console-г нээгээд шалгана уу. Ямар нэг "Хоёр талын агуулгын" анхааруулга байна уу? Эдгээр нь HTTPS хуудсанд HTTP нөөц ачаалж байгааг харуулна. Эдгээр URL-уудыг HTTPS руу шинэчлэх. Энэ нь хуудасны туршлагын хамгийн түгээмэл асуудлуудын нэг юм.
5. Навигацийн Хэв Маяг
Сайн навигац нь хэрэглэгчид болон хайлтын системд тусалдаг. Хэрэглэгчид хэрэгтэй мэдээллээ хурдан олох боломжтой. Google-ийн краулерууд таны сайтыг ойлгож, PageRank-ийг үр дүнтэй тарааж байна.
Навигацийн хамгийн сайн практик:
| Хэв маяг | Давуу тал | Системд |
|---|---|---|
| Хавтгай архитектур | Гол хуудсаас 3 товчоор | Hub хуудсууд, талбар маршрутууд |
| Талбарын зам | Хэрэглэгчид хаашаа байгаагаа мэддэг | Schema markup + тодорхой зам |
| Логик URL бүтэц | Бодит зам | /category/subcategory/page |
| Доод навигац | Хоёрдогч хуудсууд хандах боломжтой | хууль, тухай, холбоо, sitemap |
| Дотоод хайлтын систем | Хэрэглэгчид тодорхой агуулга олоход тусална | Төлбөргүй захиалгатай хайлт |
| Холбоотой агуулга | Дохиотой буцаах, гүн зүтгэл нэмэгч | “Холбоотой нийтлэлүүд” хэсэг |
Зорилтот сайт архитектур:
Гол хуудас (чухал зүйлсээс 1 товчоо)
├── /products/ (категорийн хаб — бүх бүтээгдэхүүнд холбоос)
│ ├── /products/category-a/
│ │ ├── /products/category-a/product-1
│ │ └── /products/category-a/product-2
│ └── /products/category-b/
├── /blog/ (агуулгын хаб — нийтлэлд холбоос)
│ ├── /blog/topic-cluster-1/ (pillar page)
│ │ ├── /blog/subtopic-1a
│ │ └── /blog/subtopic-1b
│ └── /blog/topic-cluster-2/
├── /tools/ (туслах хуудсууд)
└── /about/ (итгэлцлийг дурдсан хуудсууд)Талбарын замын хэрэгжилт:
<!-- Өөрчлөгдсөн талбар зам -->
<nav aria-label="Талбарын зам">
<ol>
<li><a href="/">Гол</a></li>
<li><a href="/blog/">Блог</a></li>
<li aria-current="page">SEO Гарын авлага 5</li>
</ol>
</nav>
<!-- Schema မှ тэмдэглэгээ (BreadcrumbList) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Гол", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Блог", "item": "https://example.com/blog/" },
{ "@type": "ListItem", "position": 3, "name": "SEO Гарын авлага 5" }
]
}
</script>Навигацийн эсрэг бэлгэдэл:
- Хуудас гол хуудсанаас 4 товчоос илүү зайд (хоногт)
- ямар ч талбараар (ашиглагч нар болон Google зогсож байна)
- JavaScript-д зөвхөн навигаци (краулерууд холболтыг алдаж магадгүй)
- Эдгээрийг хамааралгүй (дотоод линкүүд) саад хийж буй
- 200+ холбоосоор тулгуулсан mega менежер (линий үнэ багасгасан)
Түргэн ялалт: Таны хамгийн чухал эргэлтийн хуудсуудыг шалгана уу — гол хуудсаас хэдэн товч байгааг шалгаарай? Хэрвээ 3 илүү байгаа бол, танай гол хуудсаас шууд холболтуудыг нэмэх буюу ангиллын хабуудын линкүүд илгээх хэрэгтэй. Each additional click reduces both user visits and crawl frequency.
6. Үзэгдэж буй хэсгийн Оптимизаци
Хэрэглэгчид scrolling кредитийг гүнзгийж чадахгүй байна. Үзэгдэж буй хэсгийн агуулга аль хэдийн үнэ цэнийг хурдан харуулах шаардлагатай бөгөөд тухайн хайлтын асуулттай тохирох ёсгүй.
Үзэгдэж буй хэсгийн хэрэгцээтэй элементүүд:
| Элемент | Яагаад | Түгээмэл алдаа |
|---|---|---|
| Тодорхой гарчиг (H1) | Хайлтанд хамааралтайг батлах | Ерөнхий эсвэл алдагдсан |
| Үнэт өгөгдөл | Яагаад тэд үлдэх ёстой вэ? | Дээд хэсэгт дарагдаж байна |
| Анхны CTA | Тэд яаж цааш хийх вэ? | Нуусан эсвэл тодорхойгүй |
| Баатар зураг/медиа | Визуал оролцоо | Удаан ачааллаж, LCP асуудлыг үүсгэнэ |
| Итгэлцлийн дохиод | Яагаад тэд таныг итгэх ёстой вэ? | Логог, шүүмж, эсвэл жагсаал, авлига байхгүй |
Үзэгдэж буй хэсгийн зохион байгуулалт:
Десктоп (1440px харах цонхоор):
┌──────────────────────────────────────┐
│ Навигацийн тууз │
├──────────────────────────────────────┤
│ │
│ H1: Хайлтанд тохирох тодорхой гэдгийг батлах │
│ Дадлага: Үнэт өгөгдөл │
│ │
│ [Анхны CTA товч] │
│ │
│ Итгэлцлийн дохиод: логог, статистик, тэмдгүүд │
│ │
├──────────────────────────────────────┤
│ ↓ Агуулга Дээд хэсэгт │
└──────────────────────────────────────┘
Мобайл (375px харах цонхоор):
┌────────────────────┐
│ Nav (hamburger) │
├────────────────────┤
│ │
│ H1: Гарчиг │
│ (мобайл дээрх богино)│
│ │
│ [CTA товч] │
│ (дүүрэн өргөн, 44px+)│
│ │
│ Итгэлцлийн тэмдэг │
│ │
├────────────────────┤
│ ↓ Цааш үргэлжлэх │
└────────────────────┘Үзэгдэж буй хэсгийн чухал дүрэм:
- H1 нь scrolling-гүйгээр харагдах ёстой (хайлттай тохирох)
- CTA нь scrolling-гүйгээр харагдах ёстой (буцалт гарахаас сэргийлэх)
- Үзэгдэж буй хэсэгт ямар ч бүтэц шилжиж болохгүй (CLS алдагдал)
- Баатар зураг хурдан ачааллаж байх ёстой (энэ нь ихэнх тохиолдолд LCP элемент)
- Мобайл дээр: үзэгдэж буй хэсгийг бууруулна уу (дүүрэн цонхны зай бага байна)
Түргэн ялалт: Гар утсаараа таны ерөнхий хуудсыг дамжуулна уу (375px өргөн.) H1 үзэгдэх үү? CTA товч харагдаж байна уу? Таны сайтаар юу хийж байна гэдгийг 2 секундын дотор мэдэж чадах уу? Хэрэв аль нэг хариулт "үгүй", та зочдыг scrolling-ээс өмнө алдаж байна.
UX Аудитын Хяналтын Жагсаалт
Таны хамгийн шилдэг хуудсуудын хувьд энэ зүйлийг шалгана уу:
- [ ] LCP 2.5 секундын дотор (баатар зураг оптимиздсон, чухал CSS инлайн)
- [ ] INP 200ms-ээс дотогш (урт JavaScript ажилтанд ямар ч интервент хгүй)
- [ ] CLS 0.1-ээс дотогш (Бүх зургийг хэмжээнд тохирно, хожуу ачаалах шилжилтгүй)
- [ ] Мобайл-д нөхцөл байдал (44px хэмжээтэйaduais, 16px+ текст, налуу шилж чадахгүй)
- [ ] Хандалт (алт текст, гарчигийн иерархи, өнгөний контраст, товчлуурууорч)
- [ ] HTTPS everywhere (ялангуяа холимог контент байхгүй, HSTS идэвхтэй)
- [ ] Ямар ч зорилго зангуу хамгийн анхааруулсан (зөвшилцөхи боловсруулах зургийн өөрчлөлт зэргийг чангалахгүй)
- [ ] Талатар замууд байдаг (BreadcrumbList схемтэй)
- [ ] Навигацийн гүн 4 товчуудаас доош байх (чухал хуудсуудийг дэмжих)
- [ ] Үзэгдэж буй хэсэг оптимиздсон (H1 харагдах, CTA харагдах, хурдан LCP)
LANGR таны UX-г хэрхэн скан хийнэ
LANGR-ийн UX-той холбоотой скан модулууд:
- Core Web Vitals моду | LCP, INP, CLS-ийг Chrome User Experience Report-аас (бодит хэрэглэгчийн өгөгдөл)
- PageSpeed модул | Бүх Lighthouse гүйцэтгэл шалгалт мобайл болон ширээний оноотой
- Мобайл модул | Харах цонхны тохиргоо, хүрэх зорилтуудын хэмжээ, текстийн уншигдахуйц байдал
- Хандалтын модул | WCAG-д нийцэх шалгалтууд, ARIA хэрэглээг хянах, өнгөний контраст
- Зохион байгуулах скан модул | AI-д суурилсан мобайл болон ширээний загварыг үнэлэх
- Хуудасны Туршлагын модул | Интерстицилийн илрүүлэлт, HTTPS статус, аюулгүй веб хөтөч
Эдгээр модууд нөхцлөөр скан хийгддэг бөгөөд зочид таны сайтыг хэрхэн мэдэрч байгааг харуулах, илүү хүмүүст зөвлөгөө шийдэх газар байх болно.
Түгээмэл UX алдаа (Нөлөөллийн Эмээлдэн)
- Мобайлыг анхаарахгүй байх — 60%+ хайлт мобайл; муу мобайл = муу зэрэглэл
- Оптимиздсон зураг байхгүй — Удаан LCP-ын #1 шалтгаан (багтаамж муудал)
- Тодорхой хэмжээтэй зургийн хэмжээ байхгүй — Бүтэц шилжих CLS оноог устгана
- Гуравдагч талын скрипт блат — Chat widgets, аналитик, зарууд INP -г блочид
- Хандалтын суурь заргард — Алдаагдсан alt текст, гарчигийн иерархи, өнгөний контраст
- Агуулга блоклогдсон интерстици — Хэрэглэгчид агуулгатайгаас өмнө бүрэн дэлгэцнээс хөдлөх
- Гүн архитектур — Чухал хуудсууд 5+ товчоос нуугдсан
- Юу ч харагдахгүй — Хэрэглэгчид scrolling-оор юу хийж байгааг зөв ойлгож чадахгүй
Дараагийн алхам?
Алхам 6: Хяналт ба зэрэглэл — Та хэмжээгүй зүйлсээр явж болохгүй.
Энэхүү гарын авлага нь LANGR-ийн 13 алхмын SEO цувралын нэг хэсэг юм. Үнэгүй аудит хийх баталгаажуулахад танай сайт аль 13 синтопуудт шилдэг байх ёстой.