Optimallashtirish, SEO va kirish imkoniyati - HTML va CSS

Chiroyli sayt yetarli emas - u tez, topiladigan va hamma uchun qulay bo'lishi kerak.

Sahifa tezligi #

Tezlik - biznes masalasi

Tadqiqotlar ko'rsatadi:

Yuklanish 3 soniyadan oshsa, foydalanuvchilarning 53% i ketadi
Har 100ms kechikish konversiyani ~1% ga kamaytiradi
Google saralashda tezlikni hisobga oladi

O'zbekistonda mobil internet tezligi har doim ham yuqori emas - bu ayniqsa muhim.

Core Web Vitals #

Google o'lchaydigan uchta asosiy ko'rsatkich:

Ko'rsatkich	Nimani o'lchaydi	Yaxshi natija
LCP (Largest Contentful Paint)	Asosiy mazmun qachon ko'rinadi	< 2.5s
INP (Interaction to Next Paint)	Bosishga javob tezligi	< 200ms
CLS (Cumulative Layout Shift)	Sahifa "sakrashi"	< 0.1

width/height ko'rsatilmagan rasm sahifani "sakratadi"

Rasm optimizatsiyasi #

Rasmlar odatda sahifa hajmining 60-70% ini tashkil qiladi.

HTML

<!-- 1. O'lchamlarni ko'rsating - CLS ni oldini oladi -->
<img src="rasm.jpg" alt="..." width="800" height="600">

<!-- 2. Ekrandan tashqaridagilarni kechiktirib yuklang -->
<img src="rasm.jpg" alt="..." loading="lazy">

<!-- 3. Zamonaviy formatlar -->
<picture>
    <source srcset="rasm.avif" type="image/avif">
    <source srcset="rasm.webp" type="image/webp">
    <img src="rasm.jpg" alt="..." width="800" height="600">
</picture>

<!-- 4. Turli ekranlar uchun turli o'lcham -->
<img src="rasm-800.jpg"
     srcset="rasm-400.jpg 400w, rasm-800.jpg 800w, rasm-1600.jpg 1600w"
     sizes="(max-width: 640px) 100vw, 50vw"
     alt="..." width="800" height="600" loading="lazy">

Birinchi ekrandagi rasmga loading="lazy" qo'ymang

Sahifa ochilganda darhol ko'rinadigan rasm (logotip, qahramon rasmi) darhol yuklanishi kerak. lazy uni kechiktiradi va LCP ni yomonlashtiradi.

Aksincha, unga ustuvorlik bering:

HTML

<img src="qahramon.jpg" alt="..." fetchpriority="high">

Format	Hajm (taxminan)	Qachon
PNG	100%	Shaffoflik kerak bo'lsa
JPG	40%	Fotosuratlar
WebP	25%	Universal tanlov
AVIF	15%	Eng yangi, eng kichik
SVG	2%	Ikonka, logotip, diagramma

CSS va shrift optimizatsiyasi #

HTML

<!-- Muhim CSS ni oldin yuklash -->
<link rel="preload" href="css/uslub.css" as="style">
<link rel="stylesheet" href="css/uslub.css">

<!-- Shrift serveriga oldindan ulanish -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Muhim rasmni oldindan yuklash -->
<link rel="preload" as="image" href="rasmlar/qahramon.webp">

CSS

/* Shrift yuklanguncha matn ko'rinsin */
@font-face {
    font-family: "Inter";
    src: url("shriftlar/inter.woff2") format("woff2");
    font-display: swap;
}

Amaliy tezlik qoidalari

Rasmlarni WebP ga o'tkazing va o'lchamini kerakligicha kichraytiring
Har bir <img> ga width, height yozing
Ekran tashqarisidagi rasmlarga loading="lazy"
Ikkitadan ko'p shrift oilasi ishlatmang
Ishlatilmaydigan CSS va JS ni o'chiring
<script> ni defer bilan yuklang

SEO asoslari #

Majburiy meta teglar #

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 50-60 belgi -->
    <title>Python darsligi o'zbek tilida | Softromeda Edu</title>

    <!-- 150-160 belgi -->
    <meta name="description"
          content="Python dasturlash tilini noldan o'rganing: 20 ta bo'lim,
                   amaliy misollar va topshiriqlar. Bepul va o'zbek tilida.">

    <!-- Takroriy mazmunning asosiy manzili -->
    <link rel="canonical" href="https://softromeda.uz/darslik/python">

    <!-- Ijtimoiy tarmoqlarda ulashish -->
    <meta property="og:title" content="Python darsligi o'zbek tilida">
    <meta property="og:description" content="20 bo'limli bepul darslik">
    <meta property="og:image" content="https://softromeda.uz/rasmlar/python-og.jpg">
    <meta property="og:url" content="https://softromeda.uz/darslik/python">
    <meta property="og:type" content="article">
    <meta property="og:locale" content="uz_UZ">

    <meta name="twitter:card" content="summary_large_image">
</head>

Open Graph rasmi

og:image - havolani Telegram, Facebook yoki LinkedIn da ulashganda ko'rinadigan rasm. Tavsiya etilgan o'lcham: 1200 × 630 px. Usiz havola quruq matn bo'lib ko'rinadi va bosilish ehtimoli ancha kam bo'ladi.

Semantik belgilash #

Qidiruv tizimlariga sahifa mazmunini tushuntiradi:

HTML

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Python dasturlash tili",
    "description": "Noldan boshlab amaliy loyihagacha",
    "author": {
        "@type": "Person",
        "name": "Husanboy Qodirov"
    },
    "datePublished": "2026-09-09",
    "inLanguage": "uz"
}
</script>

SEO tekshiruv ro'yxati #

Element	Talab
`<title>`	Har bir sahifada noyob, 50-60 belgi
`<meta description>`	Noyob, 150-160 belgi
`<h1>`	Sahifada bitta
Sarlavhalar	Tartibli ierarxiya (h1 → h2 → h3)
Rasmlar	Ma'noli `alt`
Havolalar	Ma'noli matn ("bu yerga" emas)
URL	Qisqa, tushunarli, lotin harflarida
Tezlik	LCP < 2.5s
Mobil	To'liq moslashgan
`sitemap.xml`	Mavjud va yangilanadi
`robots.txt`	To'g'ri sozlangan

Havola matni muhim

HTML

<!-- Yomon: qidiruv tizimi ham, ekran o'quvchisi ham tushunmaydi -->
Python haqida ko'proq bilish uchun <a href="/python">bu yerga bosing</a>.

<!-- Yaxshi -->
<a href="/python">Python darsligini o'qing</a>.

Ekran o'quvchilari foydalanuvchiga sahifadagi barcha havolalar ro'yxatini berish imkoniyatiga ega. "Bu yerga bosing" havolalar ro'yxatida ma'nosiz bo'ladi.

Kirish imkoniyati (Accessibility) #

Bu kimlar uchun?

Ko'zi ojiz - ekran o'quvchisi ishlatadi
Ko'rish qobiliyati past - matnni kattalashtiradi
Rang ajratmaydigan - erkaklarning ~8% i
Harakat cheklangan - faqat klaviatura bilan ishlaydi
Vaqtincha cheklangan - qo'li singan, yorug'lik tushayotgan ekran, sekin internet

Kirish imkoniyati kichik guruh uchun emas - hamma uchun yaxshiroq sayt demakdir.

Klaviatura bilan navigatsiya #

CSS

/* Fokusni hech qachon o'chirmang */
:focus-visible {
    outline: 2px solid var(--asosiy);
    outline-offset: 2px;
}

/* Mazmunga o'tish havolasi */
.otish-havola {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--asosiy);
    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: 0 0 8px 8px;
    z-index: 9999;
    transition: top 0.2s;
}

.otish-havola:focus {
    top: 0;
}

HTML

<body>
    <a href="#asosiy-mazmun" class="otish-havola">Asosiy mazmunga o'tish</a>
    <header>...</header>
    <main id="asosiy-mazmun">...</main>
</body>

Sayting'izni klaviatura bilan sinang

Tab tugmasini bosib butun sahifani aylanib chiqing:

Fokus ko'rinadimi?
Tartib mantiqiymi?
Barcha tugma va havolalarga yetib bo'ladimi?
Modal ochilganda fokus uning ichida qoladimi?
Esc bilan modal yopiladimi?

Bu 2 daqiqalik sinov eng ko'p muammoni ochib beradi.

Rang va kontrast #

CSS

/* Kontrast talablari (WCAG AA) */
/* Oddiy matn: 4.5:1, katta matn: 3:1 */

/* Yomon: kontrast 2.3:1 */
.yomon { color: #a1a1aa; background: #f4f4f5; }

/* Yaxshi: kontrast 9.7:1 */
.yaxshi { color: #27272a; background: #ffffff; }

Ma'noni faqat rang bilan bermang

HTML

<!-- Yomon: rang ajratmaydigan odam farqni ko'rmaydi -->
<span style="color: red">Xato</span>
<span style="color: green">To'g'ri</span>

<!-- Yaxshi: rang + belgi + matn -->
<span class="holat holat--xato">&#10006; Xato</span>
<span class="holat holat--togri">&#10004; To'g'ri</span>

Formada faqat qizil ramka yetarli emas - xato matnini ham yozing.

Ekran o'quvchilari uchun #

HTML

<!-- Faqat ikonkali tugma -->
<button aria-label="Menyuni ochish">
    <svg aria-hidden="true">...</svg>
</button>

<!-- Ochiladigan menyu holati -->
<button aria-expanded="false" aria-controls="menyu">Menyu</button>
<nav id="menyu" hidden>...</nav>

<!-- Joriy sahifa -->
<a href="/darsliklar" aria-current="page">Darsliklar</a>

<!-- Dinamik xabar -->
<div role="status" aria-live="polite">Ma'lumot saqlandi</div>

<!-- Muhim xato -->
<div role="alert">Parol noto'g'ri</div>

<!-- Bezak rasm -->
<img src="bezak.svg" alt="" aria-hidden="true">

<!-- Formadagi xato -->
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-xato" aria-invalid="true">
<span id="email-xato" class="maydon__xato">Email formati noto'g'ri</span>

Tekshiruv ro'yxati #

Talab	Qanday tekshirish
Har bir rasmda `alt`	Kodni ko'rib chiqish
Har bir maydonda `<label>`	Kodni ko'rib chiqish
Kontrast 4.5:1 dan yuqori	DevTools rang tanlagichi
Klaviatura bilan ishlaydi	`Tab` bilan yurish
Fokus ko'rinadi	`Tab` bilan yurish
Sarlavhalar tartibli	Lighthouse
`lang` atributi bor	`<html lang="uz">`
Sahifada bitta `<h1>`	Lighthouse
Ma'no faqat rangda emas	Ko'rib chiqish

Vositalar #

Vosita	Nima qiladi
Lighthouse	DevTools ichida: tezlik, SEO, a11y
PageSpeed Insights	Google ning onlayn tahlili
WAVE	Kirish imkoniyati xatolari
validator.w3.org	HTML xatolari
caniuse.com	Brauzer qo'llab-quvvatlashi
Squoosh	Rasm siqish

Lighthouse dan qanday foydalanish

F12 → Lighthouse yorlig'i
Mobile ni tanlang (Google shunday baholaydi)
Barcha kategoriyalarni belgilang
Analyze page load ni bosing

Natija 0-100 ball. Har bir muammo bosilsa, uni qanday tuzatish tushuntiriladi. Maqsad: barcha kategoriyalarda 90+.

Amaliy misol: optimallashtirilgan sahifa boshi #

HTML

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Python darsligi o'zbek tilida | Softromeda Edu</title>
    <meta name="description" content="Python dasturlash tilini noldan o'rganing:
          20 ta bo'lim, amaliy misollar va topshiriqlar. Bepul.">

    <link rel="canonical" href="https://softromeda.uz/darslik/python">

    <!-- Ijtimoiy tarmoqlar -->
    <meta property="og:title" content="Python darsligi o'zbek tilida">
    <meta property="og:description" content="20 bo'limli bepul darslik">
    <meta property="og:image" content="https://softromeda.uz/rasmlar/python-og.jpg">
    <meta property="og:type" content="article">

    <!-- Tezlik -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="css/uslub.css" as="style">
    <link rel="stylesheet" href="css/uslub.css">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">

    <script src="js/asosiy.js" defer></script>
</head>
<body>
    <a href="#asosiy" class="otish-havola">Asosiy mazmunga o'tish</a>

    <header>
        <nav aria-label="Asosiy menyu">
            <a href="/" aria-label="Bosh sahifa">
                <img src="/logo.svg" alt="Softromeda Edu" width="140" height="32">
            </a>
        </nav>
    </header>

    <main id="asosiy">
        <article>
            <h1>Python dasturlash tili</h1>

            <picture>
                <source srcset="rasmlar/qahramon.avif" type="image/avif">
                <source srcset="rasmlar/qahramon.webp" type="image/webp">
                <img src="rasmlar/qahramon.jpg"
                     alt="Python kodi yozilgan ekran"
                     width="1200" height="630"
                     fetchpriority="high">
            </picture>

            <p>...</p>
        </article>
    </main>
</body>
</html>

Amaliy topshiriq

Loyihangizda Lighthouse testini o'tkazing va barcha ballarni yozib oling.
Barcha rasmlarga width, height va ma'noli alt qo'shing.
Rasmlarni squoosh.app da WebP ga o'tkazing - hajm farqini o'lchang.
To'liq meta teglar to'plamini qo'shing (title, description, Open Graph).
"Asosiy mazmunga o'tish" havolasini qo'shing.
Butun saytni faqat klaviatura bilan aylanib chiqing - muammolarni yozing.
Barcha matn kontrastini DevTools da tekshiring.
Testni qayta o'tkazing - ballar qanchaga oshdi?

Xulosa #

Core Web Vitals: LCP (< 2.5s), INP (< 200ms), CLS (< 0.1).
Rasmlarda width/height CLS ni, loading="lazy" LCP ni yaxshilaydi.
Birinchi ekrandagi rasmga lazy qo'ymang - fetchpriority="high" bering.
WebP rasmlar JPG dan ~40% kichik.
Har bir sahifada noyob <title> va description bo'lsin.
Open Graph teglari havolani ijtimoiy tarmoqlarda chiroyli ko'rsatadi.
Kirish imkoniyati: alt, <label>, kontrast 4.5:1, klaviatura navigatsiyasi.
Ma'noni faqat rang bilan bermang.
Lighthouse - barcha ko'rsatkichlarni bir joyda tekshiradi.

Keyingi va yakuniy bo'limda barcha bilimlarni birlashtirib, to'liq portfolio saytini quramiz.

Sahifa tezligi #

Core Web Vitals #

Rasm optimizatsiyasi #

CSS va shrift optimizatsiyasi #

SEO asoslari #

Majburiy meta teglar #

Semantik belgilash #

SEO tekshiruv ro'yxati #

Kirish imkoniyati (Accessibility) #

Klaviatura bilan navigatsiya #

Rang va kontrast #

Ekran o'quvchilari uchun #

Tekshiruv ro'yxati #

Vositalar #

Amaliy misol: optimallashtirilgan sahifa boshi #

Xulosa #

Xatolik topdingizmi?