Rasm unumdorligi: loading="lazy", fetchpriority va LCP

Qisqacha: Rasmlar ko'pincha sahifaning eng og'ir qismi. Ekrandan pastdagi rasmlarga loading="lazy" qo'yiladi — ular foydalanuvchi yaqinlashgandagina yuklanadi. Sahifa ochilganda birinchi ko'rinadigan eng katta rasmga esa aksincha fetchpriority="high" beriladi va u hech qachon "lazy" qilinmaydi. Qolgan ishni to'g'ri format, o'lcham va siqish bajaradi.

Bu darsda

• LCP nima ekanini va uni qaysi rasm belgilashini bilasiz.
• loading="lazy" ni to'g'ri joyga qo'yasiz va noto'g'ri joydan olib tashlaysiz.
• fetchpriority="high" bilan asosiy rasmni tezlashtirasiz.
• decoding, preload va placeholder (vaqtinchalik ko'rinish) nima ekanini tushunasiz.
• Rasm CDN'i qanday ishlashini bilasiz.

Oldin bilishingiz kerak: Responsive rasmlar II: picture va source, Renderni nima to'xtatadi.

1. Nega bu kerak?

Choyxona menyusida 20 ta taom surati. Hammasi sahifa ochilishi bilan yuklanadi — telefonda pastga aylantirmasangiz ham. Jasur sekin mobil internetda faqat birinchi ikkita taomni ko'rmoqchi edi, lekin telefon 20 ta rasmni yuklab, uning trafigini sarflaydi va sahifa sekin ochiladi.

Oldingi darslarda rasmni kichik qildik: to'g'ri o'lcham (srcset), zamonaviy format (picture), siqish. Bu dars — rasmni to'g'ri vaqtda yuklash haqida: kerakligini tezroq, keraksizini keyinroq.

2. LCP — sahifa qachon "tayyor" ko'rinadi

Foydalanuvchi uchun sahifa asosiy narsa ko'ringanda "ochildi" deb hisoblanadi. Google buni LCP (Largest Contentful Paint — eng katta kontentning chizilishi) bilan o'lchaydi: ekranning ko'rinadigan qismidagi eng katta element qachon chizildi.

Ko'p sahifalarda bu element — rasm: bosh sahifa banneri, mahsulot surati, maqola boshidagi foto. Yaxshi LCP — 2,5 soniyadan kam.

LCP — img asoslari darsidagi CLS bilan birga Google'ning asosiy sifat ko'rsatkichlaridan (Core Web Vitals). Ular qidiruv natijalariga ham ta'sir qiladi.

Sahifangizda LCP elementi qaysi? Chrome DevTools'dagi Lighthouse hisobotida "Largest Contentful Paint element" bo'limi uni aniq ko'rsatadi (DevTools II darsida Lighthouse bilan tanishgansiz).

3. loading="lazy" — keyinroq yuklash

3.1 Qanday ishlaydi

<img src="assets/images/manti.jpg" alt="Bug'da pishgan qovoqli manti"
     width="1200" height="800" loading="lazy">

loading="lazy" — "bu rasmni darhol yuklama, foydalanuvchi unga yaqinlashganda yukla". Brauzer sahifani aylantirish jarayonini kuzatadi va rasm ekranga yaqinlashishi bilan yuklab oladi. Foydalanuvchi pastga tushmasa — rasm umuman yuklanmaydi.

Standart qiymat — loading="eager" ("darhol"). Atribut yozilmasa, rasm darhol yuklanadi.

Menyuda 20 ta rasm bo'lsa: birinchi 1–2 tasi — odatiy, qolgan 18 tasi — loading="lazy". Pastga tushmagan foydalanuvchi 18 ta rasmni umuman yuklamaydi.

3.2 Eng muhim qoida: LCP rasmga — hech qachon

Bu — eng ko'p uchraydigan unumdorlik xatosi. Ko'p dasturchilar "lazy — tez degani" deb o'ylab, hamma rasmga loading="lazy" qo'yadi. Bosh sahifa banneriga ham.

Nima bo'ladi? Brauzer "lazy" rasmni yuklashdan oldin uning sahifadagi joyini aniqlashi kerak. Buning uchun u avval CSS'ni yuklab, sahifani joylashtiradi. Faqat keyin "ha, bu rasm ekranda ekan" deb uni yuklay boshlaydi. Banner — sahifadagi eng muhim rasm — kechikib qoladi. LCP yomonlashadi.

Qoida: birinchi ekranda ko'rinadigan rasmlarga loading="lazy" qo'ymang. Ayniqsa LCP rasmga.

Tekshirib ko'ring: Bosh sahifada tepada katta banner, pastda esa (aylantirilganda ko'rinadigan) oltita taom surati. Qaysilariga loading="lazy"?

4. fetchpriority="high" — birinchi navbatda

Brauzer sahifa ochilganda juda ko'p narsani yuklaydi: CSS, shriftlar, skriptlar, rasmlar. Rasmlarga u odatda past ustuvorlik beradi — chunki qaysi rasm muhimligini hali bilmaydi.

LCP rasm uchun buni o'zingiz aytasiz:

<img src="assets/images/banner.jpg"
     alt="Choyxona «Bahor»: qozonda osh damlanmoqda"
     width="1600" height="500" fetchpriority="high">

fetchpriority="high" — "bu rasmni boshqalardan oldin yukla". Zamonaviy brauzerlar buni qo'llaydi va LCP ko'pincha sezilarli yaxshilanadi.

Uni faqat bitta-ikkita rasmga qo'ying. Hamma rasm "muhim" bo'lsa — hech biri muhim emas, xuddi hamma matn qalin bo'lgani kabi.

fetchpriority="low" ham bor — ekranda turgan, lekin ahamiyati past rasmlar uchun (masalan, karuselning ikkinchi slaydi).

Bo'sh joyni to'ldiring: sahifaning LCP rasmiga loading atributining qaysi qiymati qo'yilmaydi?

5. decoding="async"

Rasm yuklanganidan keyin brauzer uni dekodlashi — siqilgan fayldan ekranga chiqadigan piksellarga aylantirishi kerak. Katta rasm uchun bu vaqt oladi.

<img src="manti.jpg" alt="Qovoqli manti"
     width="1200" height="800" loading="lazy" decoding="async">

decoding="async" — "bu rasmni boshqa ishlar bilan parallel dekodla, sahifani to'xtatma". Bu kichik maslahat (hint), brauzer uni o'z bilganicha ishlatadi. Uning ta'siri lazy va fetchpriority dan ancha kichik. Ko'p loyihalar uni asosiy bo'lmagan rasmlarga qo'shib qo'yadi.

6. preload — oldindan aytib qo'yish

Ba'zan brauzer muhim rasmni juda kech "ko'radi". Masalan, banner HTML'da emas, CSS'da fon rasmi sifatida yozilgan. Brauzer uni CSS fayl yuklanib, o'qilgandagina topadi.

Bunday holatda head ichida brauzerni oldindan ogohlantirasiz:

<link rel="preload" as="image" href="assets/images/banner.jpg"
      fetchpriority="high">

rel="preload" — "bu faylni hoziroq yuklay boshla, u tez orada kerak bo'ladi". as="image" — bu rasm. Responsive rasm uchun imagesrcset va imagesizes atributlari ham bor — ular srcset va sizes ning link dagi nusxasi.

Oddiy img uchun preload odatda shart emas — fetchpriority="high" yetarli. head dagi boshqa resurs maslahatlarini Resurs maslahatlari darsida ko'ramiz.

7. Placeholder — rasm kelguncha nima ko'rinadi

Rasm hali yuklanmagan — uning o'rnida nima turadi? width va height tufayli joy ajratilgan, lekin u bo'sh. Sekin internetda bo'sh to'rtburchak uzoq turadi.

Placeholder (o'rinbosar) — rasm kelguncha ko'rsatiladigan vaqtinchalik ko'rinish. Uch keng tarqalgan usul:

LQIP — Low Quality Image Placeholder ("past sifatli o'rinbosar rasm"). Uni ko'p ijtimoiy tarmoq va yetkazib berish ilovalarida ko'rgansiz: avval xira, rangli dog', keyin tiniq rasm "ochiladi".

Bu usullarni CSS va JavaScript'ni o'rgangach qo'llaysiz. HTML tomonidan ularning asosi tayyor: width va height joyni ajratadi.

8. Rasm CDN'lari

Har bir rasmning 3–4 ta o'lchamini, 3 ta formatda tayyorlash (o'tgan dars) — ko'p ish. Minglab rasmli saytda buni qo'lda qilib bo'lmaydi.

Rasm CDN'i (image CDN) — rasmni kerakli o'lcham va formatga "uchib o'tishda" aylantiradigan xizmat. Siz bitta katta asl faylni yuklaysiz, keyin manzilda parametr bilan kerakli variantni so'raysiz. Masalan, Cloudinary xizmatida manzil shunday tuzilgan bo'ladi (fayl nomi — namuna):

https://res.cloudinary.com/demo/image/upload/w_800,f_auto/osh.jpg

• w_800 — "800 piksel kenglikda ber".
• f_auto — "brauzerga eng mos formatda ber". Xizmat brauzer yuborgan so'rov sarlavhalariga (HTTP sarlavhalari darsidagi Accept) qaraydi va AVIF'ni tushunadiganga AVIF, qolganlarga WebP yoki JPEG beradi.

Shunga o'xshash xizmatlar: imgix, Cloudflare Images va boshqalar. Ko'pchiligining bepul boshlang'ich tarifi bor. Ular bilan ishlashni backend va deploy qismlarida ko'ramiz. Hozir g'oyani bilish kifoya: katta loyihalarda rasm variantlarini dastur emas, maxsus xizmat yaratadi.

9. Tekshiruv ro'yxati

Rasm bilan ishlaganda ta'sir kuchi bo'yicha tartiblangan ro'yxat:

Natijani o'lchang: DevTools Network panelining pastki qatorida sahifaning jami yuklangan hajmi ko'rinadi ("transferred"). Tuzatishdan oldin va keyin Lighthouse hisobotini solishtiring.

10. Ko'p uchraydigan xatolar

10.1 Hamma rasmga lazy

3.2-bo'limda ko'rdik: banner kechikadi, LCP yomonlashadi. Lighthouse LCP rasmi kechiktirib yuklanganini alohida ogohlantiradi. Tuzatish: birinchi ekrandagi rasmlardan loading="lazy" ni olib tashlang, LCP rasmga fetchpriority="high" qo'ying.

10.2 width/height siz lazy

O'lchamsiz "lazy" rasm yuklanganda sahifani siljitadi — foydalanuvchi aynan o'qiyotgan joyida. Ustiga-ustak, brauzer o'lchamsiz rasmning joyini aniq bilmagani uchun uni kechroq yuklashi mumkin. Tuzatish: har doim width va height.

10.3 Hamma rasm "muhim"

fetchpriority="high" o'nta rasmda. Ular bir-biri bilan "raqobatlashadi" va hech biri tezlashmaydi. Tuzatish: faqat LCP rasm (ko'pi bilan ikkita).

10.4 Rasmda yashirin GPS

Telefon kamerasi bilan olingan foto ichida EXIF ma'lumotlari saqlanadi: qaysi telefon, qachon va ko'pincha qayerda (GPS koordinatalari). Rasm formatlari darsida bu haqda gaplashgan edik. Uydagi oshxonangizda olingan suratni saytga qo'ysangiz, uyingiz manzili ham "birga ketishi" mumkin.

Tuzatish: rasmni saytga qo'yishdan oldin siqish vositasidan o'tkazing — Squoosh kabi vositalar metama'lumotlarni olib tashlaydi. Rasm ham kichrayadi, maxfiy ma'lumot ham yo'qoladi.

11. Mashqlar

1-mashq (oson): Qaysi atribut?

1. Sahifa pastidagi galereya rasmlari uchun loading qiymati:
2. Bosh sahifa banneri uchun: fetchpriority qiymati —

2-mashq (o'rta): Atributlarni tuzating

Menyu sahifasining boshi:

<img src="menyu-banner.jpg" alt="Bugungi menyu: osh, lag'mon va manti"
     width="1600" height="500" loading="lazy">
<img src="osh.jpg" alt="Toshkent oshi" fetchpriority="high"
     loading="lazy">
<img src="lagmon.jpg" alt="Lag'mon" width="1200" height="800"
     fetchpriority="high">

Banner — birinchi ekranda, osh va lag'mon suratlari esa pastda.

<img src="menyu-banner.jpg" alt="Bugungi menyu: osh, lag'mon va manti"
     width="1600" height="500" fetchpriority="high">
<img src="osh.jpg" alt="Toshkent oshi"
     width="1200" height="800" loading="lazy" decoding="async">
<img src="lagmon.jpg" alt="Lag'mon"
     width="1200" height="800" loading="lazy" decoding="async">

3-mashq (qiyin): Menyu sahifasini tezlashtiring

1. menyu/index.html ni Lighthouse bilan tekshiring (Mobile rejimi). LCP qiymatini va LCP elementini yozib oling.
2. 9-bo'limdagi ro'yxat bo'yicha hamma rasmlarni tuzating.
3. Lighthouse'ni qayta ishga tushiring va natijalarni solishtiring. Network panelida jami hajm qancha kamaydi?

12. Real ishda

• Onlayn do'konlar uchun sahifa tezligi — to'g'ridan-to'g'ri pul. Sekin ochilgan sahifadan xaridor ketib qoladi. Shuning uchun katta kompaniyalarda unumdorlik bo'yicha alohida mutaxassislar ishlaydi.
• Google qidiruvi Core Web Vitals'ni (LCP, CLS va boshqalar) reytingda hisobga oladi. Bu ko'rsatkichlar Google Search Console'da ham ko'rinadi.
• Freymvorklar — masalan, Next.js'ning rasm komponenti (kursda o'rganamiz) lazy ni avtomatik qo'yadi va LCP rasm uchun alohida priority belgisini so'raydi. Aynan shu darsdagi qoidalar asosida.
• Mobil ilovalar ham xuddi shu tamoyillar bilan ishlaydi: ko'rinmaydigan rasm yuklanmaydi, avval xira placeholder, keyin tiniq rasm.

Xulosa

• LCP — birinchi ekrandagi eng katta elementning chizilish vaqti; yaxshi qiymat — 2,5 soniyadan kam.
• loading="lazy" — ekrandan pastdagi rasmlarga; birinchi ekrandagi va LCP rasmga — hech qachon.
• fetchpriority="high" — faqat LCP rasmga (bitta-ikkita).
• decoding="async" — kichik maslahat; preload — kech topiladigan muhim rasm uchun.
• Placeholder (asosiy rang, LQIP, BlurHash) — rasm kelguncha bo'sh joy o'rniga.
• Rasm CDN'i o'lcham va formatni manzil parametrlari bilan avtomatik tayyorlaydi; EXIF'ni olib tashlashni unutmang.

Keyingi dars: SVG HTML ichida va ikonkalar — vektor rasmlar, ikonkalar va ularni CSS rangi bilan boshqarish.

Manbalar

• web.dev: "Largest Contentful Paint (LCP)", "Browser-level image lazy loading", "Optimize resource loading with the Fetch Priority API" — web.dev
• MDN: <img> — loading, decoding, fetchpriority — developer.mozilla.org