Yaxshi veb-sayt nafaqat estetik chiroyli user interfeysga ega bo’lishi, balki undagi performance ham yuqori bo’lishi kerak. Veb-saytning yaxshiligi biznesga ham, conversion’ga ham katta foydasi bor.
Ushbu maqolada veb-saytning performance’ni oshirish uchun ko’p foydali usullar ko’rsatiladi.
1. List virtualization
List virtualization - Bu optimization usuli unda juda katta list yoki katta dataset’dagi ma’lumotlarni ayni vaqtda UI’da ko’rinib turgan elementlarni render qiladi. Elementlar scroll position orqali dynamic yuklanadi.
Qulayliklari: Xotira sarfini kamaytiradi, Initial load vaqtini kamaytiradi, Browser’ga ortiqda yuklama bo’lmaganligi sababli UI smooth ishlaydi.
Implementation: Bu ishni amalga oshirish uchun react-virtualized’ga o’xshash virtualization packagelardan foydalanish kerak.
2. Bundle / Code Splitting
Bundle splitting va Code splitting - bu kodni kichik chunklarga bo’lish va kerakli paytga faqat kerakli qismini yuklash orqali Performance’ni oshirish usuli.
Qulayliklari: Browser alohida chunk’larni keshlab, o’zgarmagan qisimlarni alohida qayta yuklamasdan foydalanadi. Yuklanish tezligi ortadi.
Implementation: Webpack yoki Vite kabi bundler’lardan foydalanish kerak. Dynamic importlardan foydalaning import()
3. Dynamic import / Lazy loading
Dynamic import - kodni faqatgina kerak bo’lganda yuklash. Lazy load esa «Obyektni» foydalanuvchi real ishlatgunga qadar yuklanishini kechiktirish usuli.
Qulayliklari: Initial load vaqtini kamaytiradi. Keraksiz resurslarni oldindan yuklamaganligi sababli bandwidth’ni tejaydi. Browser uchun yuklanmalar kamaygani sababli UI tez ishlaydi.
Implementation: Kerakli komponentalarni import qilishda import() sintaksisdan foydalaning. Misol uchun page.tsx, Layout, Feature komponent, HOC komponentalarini import qilishda.
4. Prefetching
Prefetching - resurslarni foydalanuvchi so’rashidan oldin background rejimda yuklash. Bu foydalanuvchi xatti-harakatlarini oldindan taxmin qilish asosida ishlaydi.
Qulayliklari: Delay time’ni kamaytiradi. Resurslar kerakli vaqtda tayyor bo’ladi.
Implementation: perfetch attributidan foydalanish
5. Preloading
Preloading - primary resurslarni Browser foydalanishidan oldinroq yuklash. Bu peyj’ning birinchi ko’rinadigan qisimlari uchun zarur bo’lgan CSS, scripts va font’lar uchun ishlatiladi.
Qulayliklari: Critical qisimlar tayyor holatda bo’ladi, UX va Performance yahshi bo’ladi.
Implementation: preload attributtlaridan foydalanish kerak
6. Tree Shaking
Tree Shaking - bundle’dan foydalanilmagan kodlarni olib tashlash. ES6 module import/export orqali static analysis qilinadi va keraksiz kod deploy jarayonida chiqarib tashlanadi.
Qulayliklari: Kichikroq bundle → tezroq yuklanish. Kod tozalanadi va maintainability oshadi.
Implementation: Webpack yoki Vite kabi bundler’dan foydalanish. Bundler’da production mode’ni yoqish.