Series: HTML Basics Lesson 11

Performance HTML

Browser tezligi HTML'dan boshlanishini o'rganing. srcset va sizes bilan rasm optimizatsiyasi, loading va decoding atributlari, resource hints (preconnect, dns-prefetch, preload) va HTML rendering flow'ni o'zlashtiring. Performance — bu JavaScript emas, bu to'g'ri HTML qarorlaridan boshlanadi.

11-dars

Performance HTML

Browser tezlikni HTML'dan boshlab hal qiladi. JS — kech keladi. CSS — ikkinchi. HTML — birinchi.

1️⃣ Image Performance: hammasi HTML'dan boshlanadi

❌ Xato yondashuv

<img src="image.jpg">

Bitta rasm → hamma ekranlarga → hamma networklarga → hamma device'larga ❌

✅ To'g'ri yondashuv: srcset + sizes

<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1600.jpg 1600w
  "
  sizes="
    (max-width: 600px) 90vw,
    (max-width: 1200px) 50vw,
    800px
  "
  alt="Product photo"
>

Browser nima qiladi?

  • Ekran o'lchamini biladi
  • DPR (device pixel ratio) ni biladi
  • Network tezligini taxmin qiladi
  • ENG TO'G'RI rasmni o'zi tanlaydi

👉 JS aralashmaydi 👉 Resize event kerak emas 👉 Performance avtomatik

sizes — darajani ajratadigan joy

  • srcset → qaysi rasmlar bor
  • sizes → rasm layout'da qancha joy egallaydi

❌ sizes yo'q → browser noto'g'ri rasm yuklashi mumkin

2️⃣ loading va decoding: renderingni boshqarish

loading

<img src="hero.jpg" loading="eager">
<img src="gallery.jpg" loading="lazy">
Qiymat Qachon
eager Above-the-fold (hero, banner)
lazy Pastdagi rasm, slider, footer

👉 JS lazy-loading bazan keraksiz 👉 Native loading — tezroq va kamroq bug

decoding

<img src="photo.jpg" decoding="async">
decoding Ta'siri
sync Rendering bloklanadi
async Rasm tayyor bo'lsa chiziladi
auto Browser hal qiladi

✅ Default: async ❌ Hero image'da ehtiyot bo'l

3️⃣ Resource Hints: browserga oldindan aytib qo'yish

Browserga "oldindan maslahat berish"

🔹 preconnect

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

👉 TCP + TLS oldindan ochiladi 👉 External origin'lar uchun oltin qoidasi

🔹 dns-prefetch

<link rel="dns-prefetch" href="//cdn.example.com">

👉 Faqat DNS 👉 Past prioritet

🔹 preload

<link rel="preload" as="font" href="/font.woff2" crossorigin>

⚠️ XATO:

<link rel="preload" href="style.css">

lekin CSS'da ishlatilmaydi → network isrof

📌 Preload = mas'uliyat

4️⃣ HTML Rendering Flow

Browser pipeline:

  1. HTML parse
  2. DOM build
  3. CSSOM build
  4. Render tree
  5. Layout
  6. Paint
  7. Composite

❌ HTML'da nima BLOKLAYDI?

Element Ta'siri
<link rel="stylesheet"> ❌ Render-blocking
<script> ❌ HTML parsing'ni to'xtatadi
<img> ❌ Layout shift bo'lishi mumkin

✅ To'g'ri script strategiya

<script src="analytics.js" defer></script>
<script src="ads.js" async></script>
Script Qachon
defer DOM tayyor bo'lgach, tartib bilan
async Yuklanishi bilan, tartib yo'q

📌 Qoida:

  • App logic → defer
  • Third-party → async

5️⃣ Performance = HTML qarorlari

❌ Qiyin:

  • JS lazy-load
  • Resize observer
  • IntersectionObserver hamma joyda

✅ Oson:

  • srcset
  • sizes
  • loading
  • decoding
  • preload/preconnect
  • defer/async

👉 Kam JS 👉 Kam bug 👉 Tez FCP / LCP / CLS

🔥 Xulosa

HTML — browser bilan shartnoma. To'g'ri yozsang, browser sen uchun ishlaydi. Noto'g'ri yozsang, JS bilan qutqara olmaysan.

Performance optimizatsiyasi HTML bilan boshlanadi — murakkab JavaScript yechimlari bilan emas. Native browser funksiyalaridan foydalaning: responsive rasmlar uchun srcset, lazy loading uchun loading, ulanish optimizatsiyasi uchun resource hints va script yuklash uchun defer/async. Bu HTML qarorlari to'g'ridan-to'g'ri Core Web Vitals (FCP, LCP, CLS) va umumiy foydalanuvchi tajribasiga ta'sir qiladi.

Eng yaxshi performance optimizatsiyalari — bu siz saqlab qolishingiz shart bo'lmaganlar, HTML'ga o'rnatilganlar.