Lighthouse hisobotini qanday o‘qish va muammolarni tuzatish
Amaliyot4 daqInnovialabs tahririyati
Qisqacha
Lighthouse — Performance, Accessibility, Best Practices va SEO bo‘yicha baho beradigan laboratoriya testi; bitta raqamga emas, metrikalar va o‘tmagan auditlarga qarang, testni toza sharoitda bir necha marta ishga tushiring va avval rasmlar, JavaScript hamda bloklovchi resurslarni tuzating.
Lighthouse hisoboti aslida nimani ko‘rsatadi
Lighthouse — Chrome DevTools ichiga o‘rnatilgan avtomatik audit. U sahifani simulyatsiya qilingan muhitda yuklaydi va to‘rtta kategoriya bo‘yicha baho beradi: Performance, Accessibility, Best Practices va SEO. Har bir kategoriya 0 dan 100 gacha ball oladi, lekin asosiy foyda pastda: metrikalar va aniq elementlar hamda fayllar ko‘rsatilgan o‘tmagan auditlar ro‘yxati.
Eng muhimi: Lighthouse laboratoriya ma’lumotlarini beradi. Bu bitta yuklash, bitta simulyatsiya qilingan qurilmada, bitta vaqtda. Haqiqiy foydalanuvchilar esa dala ma’lumotlari bilan o‘lchanadi (masalan, PageSpeed Insights’dagi Chrome UX Report). Lighthouse sabablarni topish uchun, dala ma’lumotlari esa real foydalanuvchilar uchun sayt tezlashganini tasdiqlash uchun kerak.
Performance: qaysi metrikalar muhim
Performance bahosi bir nechta metrikaning vaznli yig‘indisi:
| Metrika | Nimani o‘lchaydi | Yomon qiymatning odatiy sababi |
|---|---|---|
| LCP (Largest Contentful Paint) | Asosiy kontent qachon ko‘rinadi | Og‘ir bosh rasm, sekin server, bloklovchi CSS |
| TBT (Total Blocking Time) | Asosiy oqim qancha band bo‘ladi | Katta JS bandllar, og‘ir uchinchi tomon skriptlari |
| CLS (Cumulative Layout Shift) | Sahifa qanchalik «sakraydi» | O‘lchamsiz rasmlar, kech yuklanadigan shriftlar, qo‘shiladigan bannerlar |
| FCP (First Contentful Paint) | Birinchi narsa qachon paydo bo‘ladi | head ichidagi bloklovchi CSS/JS, sekin TTFB |
| Speed Index | Ko‘rinadigan qism qanchalik tez to‘ladi | FCP va LCP bilan bir xil |
Metrikalar ostida Opportunities (taxminiy tejash) va Diagnostics (tafsilotlar) bloklari bor. Eng ko‘p uchraydigan auditlar:
- Properly size images / Serve images in next-gen formats — rasmlarni WebP yoki AVIF’ga o‘tkazing va
srcsetishlating. - Eliminate render-blocking resources — kritik CSS’ni ichiga joylang, skriptlarga
deferqo‘shing. - Reduce unused JavaScript — kodni bo‘ling, ishlatilmaydigan kutubxonalarni olib tashlang.
- Largest Contentful Paint image was lazily loaded — bosh rasmga hech qachon lazy-load qo‘ymang.
- Avoid an excessive DOM size — og‘ir ro‘yxatlar va ortiqcha o‘ramlarni soddalashtiring.
Accessibility, Best Practices va SEO
Bu kategoriyalar asosan «o‘tdi/o‘tmadi» tekshiruv ro‘yxatlari, shuning uchun ularni 100 ga yaqinlashtirish osonroq.
- Accessibility: past kontrast,
altsiz rasmlar, nomsiz tugma va havolalar, label’siz forma maydonlari, sarlavhalar tartibining buzilishi. Avtomatik tekshiruv muammolarning faqat bir qismini topadi — klaviatura va screen reader bilan tekshirish baribir kerak. - Best Practices: konsoldagi xatolar, aralash HTTP/HTTPS kontent, eskirgan API’lar, noto‘g‘ri proporsiyali rasmlar, ma’lum zaifliklari bor kutubxonalar.
- SEO:
titleyoki meta description yo‘q, sahifarobots.txtyokinoindexbilan yopilgan, tushunarsiz matnli havolalar, juda kichik bosish zonalari,langatributi yo‘q.
Nega ball har safar o‘zgaradi
Bir xil sahifada turli raqamlar chiqishi — normal holat. Sabablari:
- Brauzer kengaytmalari skript qo‘shadi va sahifani sekinlashtiradi.
- Kompyuter band — boshqa tablar, build’lar, videoqo‘ng‘iroqlar.
- Tarmoq va server beqarorligi — sovuq kesh, CDN marshruti, A/B testlar, reklama.
- Sekinlashtirish simulyatsiya qilinadi, shuning uchun vaqtdagi kichik farqlar kattalashadi.
Qanday to‘g‘ri ishga tushirish kerak
- Sahifani inkognito oynada yoki kengaytmalarsiz toza Chrome profilida oching.
- Dev-serverni emas, production buildni tekshiring — ishlab chiqish rejimi ataylab sekinroq.
- Asosiy maqsad — Mobile: bu rejim qattiqroq va ko‘pchilik real tashrifchilarga yaqinroq.
- 3-5 marta ishga tushiring va eng yaxshi natijaga emas, medianaga qarang.
- CI’da reliz oldidan regressiyalarni ushlash uchun performance budjetlari bilan Lighthouse CI ishlating.
Qaysi tuzatishlar eng katta real natija beradi
Ustuvorlikni «tejash» raqamining kattaligiga qarab emas, real foydalanuvchilarga ta’siriga qarab belgilang:
- LCP elementini optimallashtiring: bosh rasmni siqing, kerakli o‘lchamda bering,
fetchpriority="high"qo‘shing va brauzer uni kech topsa, preload qiling. - JavaScript’ni qisqartiring: ortiqcha bog‘liqliklarni olib tashlang, uchinchi tomon vidjetlarini (chatlar, analitika, xaritalar) o‘zaro ta’sirdan keyin yoki
deferbilan yuklang. - Hamma narsa uchun joy ajrating: rasmlar va embed’larga
width/heightyokiaspect-ratiobering,font-display: swapva o‘xshash zaxira shriftlardan foydalaning. - Server javobini tezlashtiring: keshlash, CDN, kamroq redirect.
- Accessibility va SEO auditlarini yoping — odatda bu to‘liq sizning nazoratingizdagi tez yutuqlar.
<img src="/hero-1200.webp"
srcset="/hero-600.webp 600w, /hero-1200.webp 1200w"
sizes="100vw" width="1200" height="600"
fetchpriority="high" alt="Mahsulot boshqaruv paneli">
Ko‘p uchraydigan xatolar
- Dala metrikalarini yaxshilash o‘rniga ideal 100 ortidan quvish.
- Faqat bosh sahifani tekshirish, holbuki foydalanuvchilar mahsulot va maqola sahifalariga kiradi.
- Hamma narsaga, jumladan birinchi ekrandagi rasmga ham lazy-load qo‘yish.
- Desktop va mobile ballarini go‘yo bitta test kabi solishtirish.