Frontend unumdorligini optimallashtirishning qanday asosiy texnikalarini bilasiz?

Savol

Frontend-ilova unumdorligini optimallashtirishning qanday asosiy texnikalarini ishlatasiz va natijani qanday o'lchaysiz?

Qisqa javob

Asosiy vositalar — yuklanadigan/bajariladigan kod hajmi va qiymatini kamaytirish (code splitting, lazy loading, tree shaking), media og'irligini kamaytirish (rasmlarni optimallashtirish) va allaqachon yuklanganini qayta ishlatish (keshlash). Natija "ko'z bilan" emas, Lighthouse/RUM orqali Core Web Vitals metrikalari bilan o'lchanadi.

Batafsil javob

Code splitting va lazy loading. Bitta ulkan bundl o'rniga ilova route/feature bo'yicha talab bo'yicha yuklanadigan chunklarga bo'linadi (bundlerning qopqog'i ostida import()). Foydalanuvchi butun ilova emas, balki haqiqatan ochgan ekrani uchun kodni yuklab oladi. Xuddi shu narsa darhol kerak bo'lmaydigan og'ir kutubxonalarga (redaktorlar, chartlar, modallar) ham qo'llaniladi — ular hodisa bo'yicha dinamik yuklanadi.

Tree shaking. Bundler (Rollup/webpack/esbuild) ESM-importlarning statik tahlili asosida bundldan haqiqatan hech qayerda ishlatilmaydigan kodni tashlab yuboradi. Ishonchli faqat ESM (import/export) bilan va modulning yuqori darajasida side-effektlarsiz ishlaydi — CommonJS (require) statik jihatdan xuddi shunday yaxshi tahlil qilinmaydi, shu sababli bundlni ko'proq "og'irlashtiradi".

Rasmlarni optimallashtirish. Og'ir sahifalarning eng ko'p uchraydigan sababi — rasmlar. Choralar: zamonaviy formatlar (PNG/JPEG o'rniga WebP/AVIF), qurilma uchun kerakli o'lchamni berish uchun srcset/sizes, birinchi ekrandan tashqaridagi rasmlar uchun loading="lazy", qo'shimcha yuklashda layout shift'dan qochish uchun aniq width/height (yoki aspect-ratio), va "on the fly" avtomatik resize/siqish bilan CDN (Nuxt Image, Cloudinary va h.k.).

Keshlash strategiyalari. Nomida immutable fayl nomlariga ega statikadagi HTTP-kesh (nomdagi xesh → Cache-Control: max-age=31536000, immutable), offline/qayta tashriflar uchun Service Worker, HTTP/2-3 va muhim resurslarni oldindan yuklash (<link rel="preload">, dns-prefetch, preconnect). Ma'lumotlar darajasida — API javoblarini keshlash (SWR/React Query, kalitlar bilan Nuxt useAsyncData).

O'lchash. "Tezroq bo'lib qoldi" degan subyektiv tuyg'u yaramaydi — metrikalar kerak:

• Lighthouse — sintetik audit (devtools'da yoki CI'da), har bir band bo'yicha raqamli baho va aniq tavsiyalar beradi.
• Core Web Vitals — Google'ning haqiqiy foydalanuvchi metrikalari:
  • LCP (Largest Contentful Paint) — eng katta ko'rinadigan element qanchalik tez chizilgani.
  • INP (Interaction to Next Paint, FID'ni almashtirdi) — foydalanuvchi harakatlariga javob berish tezligi.
  • CLS (Cumulative Layout Shift) — yuklanishda razmetka qanchalik kuchli "sakraydi".
• Sintetik o'lchovlarni (Lighthouse, laboratoriya sharoitlari) va RUMni (Real User Monitoring — web-vitals kutubxonasi orqali haqiqiy foydalanuvchilardan yig'ilgan va analitikaga yuborilgan metrikalar) farqlash muhim, chunki foydalanuvchilarning haqiqiy tarmog'i/qurilmalari ko'pincha laboratoriyadagidan ancha yomonroq bo'ladi.

Misol

// Og'ir komponentni lazy loading qilish (Vue)
const ChartWidget = defineAsyncComponent(() =>
  import('./ChartWidget.vue')
)

<!-- Rasmni optimallashtirish: format, o'lchamlar, lazy yuklash -->
<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  width="800"
  height="450"
  loading="lazy"
  alt="Hero"
/>

// Core Web Vitals'ning haqiqiy metrikalarini (RUM) yig'ish va analitikaga yuborish
import { onLCP, onINP, onCLS } from 'web-vitals'

function sendToAnalytics(metric) {
  navigator.sendBeacon('/analytics', JSON.stringify(metric))
}

onLCP(sendToAnalytics)
onINP(sendToAnalytics)
onCLS(sendToAnalytics)

# Nomida xeshi bo'lgan immutable statik assetlar uchun Cache-Control
Cache-Control: public, max-age=31536000, immutable

Qo'shimcha savollar

• INP eskirgan FID metrikasidan nimasi bilan farq qiladi va nega u kiritildi?
• Laboratoriya (Lighthouse) va field (RUM) metrikalari orasidagi farq optimallashtirishlarni prioritetlashga qanday ta'sir qiladi?
• Yuqori CLS'ning odatiy sabablari qanday va ularni qanday bartaraf etish mumkin?