Sizning React yoki Next.js ilovangiz har bir relizda sekinlashdi. Paket hajmi oshdi, rasmlar toʻliq hajmda yuklanmoqda, uchinchi tomon skripti birinchi boʻyoqni bloklaydi, roʻyxat har bir tugmachani bosishda qayta yuklanadi. Men ulardan qaysi biri foydalanuvchilaringizga vaqt yoʻqotishini oʻlchayman, soʻngra tuzatishga arziydiganlarini tuzataman.
Men sizning React yoki Next.js ilovangizni profillayman va uni raqamlar bilan tezlashtiraman
Ilovangizning bir sahifasida Lighthouse va profiler, topilmalar to'lov bo'yicha tartiblangan.
- Bir sahifa profillangan, reytinglangan
Audit, keyin raqamlarni o'zgartiradigan tuzatishlar, oldin va keyin o'lchanadi.
- Audit va asosiy tuzatishlar
- Manba kodi
5 marshrutgacha, renderlash va kesh, CI da to'plam byudjeti, to'liq taqqoslash.
- Chuqur o'tish, 5 marshrutgacha
- Manba kodi
Maxsus taklif so'rash
Maxsus taklif so'rash uchun tizimga kiring
Ushbu Zinnerdan shaxsiylashtirilgan taklif so'rash uchun bepul hisob yarating yoki tizimga kiring.
Kirish / Ro'yxatdan o'tishSotishdan oldingi savol bering
Savol berish uchun tizimga kiring
Platforma spamini kamaytirish uchun sotishdan oldingi xabarlar faqat tizimga kirgan foydalanuvchilar tomonidan yuborilishi mumkin.
Ushbu Zinnerga to'g'ridan-to'g'ri xabar yuborish uchun bepul hisob yarating yoki tizimga kiring.
Kirish / Ro'yxatdan o'tishTizimga kirish talab qilinadi
Ushbu Zinnerga xabar yuborish uchun bepul hisob yaratish yoki tizimga kirish.
Kirish / Ro'yxatdan o'tishTizimga kirish talab qilinadi
Shaxsiylashtirilgan taklifni so'rash uchun bepul hisob yaratish yoki tizimga kirish.
Kirish / Ro'yxatdan o'tishBir qarashda
Qaror qabul qilishingizga yordam beradigan ushbu xizmat haqida asosiy ma'lumotlar. Zinn Hub tomonidan yaratilgan, sotuvchi tomonidan emas.
Qiymat pozitsiyasi
Measurement Approach
Qamrab olingan doiralar
Metrics Reported
Yetkazib berish usuli
Siz nima olasiz
To'liq tavsif
Agar sekin sahifalar sizga ro'yxatdan o'tish yoki qidiruv trafigiga qimmatga tushayotganini o'ylasangiz va mavjud ilovangizni saqlab qolishni istasangiz, buni buyurtma qiling. React va Next.js allaqachon tezkor ilova uchun kerak bo'lgan narsalarning ko'pini taqdim etadi, shuning uchun yutuqlar steklarni almashtirishdan ko'ra, ushbu vositalardan yaxshi foydalanishdan kelib chiqadi.
Siz sifatlar emas, balki raqamlarni olasiz: LCP, CLS, INP va har bir marshrut uchun to'plam hajmi, bir xil cheklangan ulanishda oldin va keyin o'lchanadi, bitta jadvalda.
Starter bir sahifaning auditi: ishlar, to'lov bo'yicha tartiblangan topilmalar, kod o'zgartirilmagan. Standard ushbu auditdan boshlanadi va qolgan vaqtni ushbu raqamlarni o'zgartiradigan tuzatishlarga sarflaydi. Advanced 5 marshrutgacha qamrab oladi, renderlash va keshni sozlaydi va CI da to'plam byudjetini qoldiradi, shunda keyingi reliz ishni jimgina bekor qila olmaydi.
Ish sizning omboringizdagi filialda, kommit bo'yicha, har biri o'z sababi bilan amalga oshiriladi. Siz so'ramaguningizcha men tomonidan hech narsa joylashtirilmaydi.
Qo'ng'iroqlar yo'q. Hamma narsa yozma ravishda, shu jumladan men bilan kelishmaydigan o'lchovlar ham.
Loyihangizni yakunlash bosqichlari
1. Foydalanuvchilaringiz haqiqatda nimaga ega boʻlishini oʻlchang - jonli sahifalaringizda Lighthouse va sekin ulanishda sekin sahifalarda React profiler sessiyasi. LCP, CLS, INP va har bir marshrut uchun toʻplam hajmi, hech narsa tegilmasdan oldin yozilgan.
2. Eng koʻp nima turishini toping - Toʻplam va tarmoq kaskadi: hech kim foydalanmaydigan nima yuboriladi, birinchi boʻyoqni nima toʻsib qoʻyadi, qaysi komponentlar qayta renderlanadi va nima uchun. Har bir topilma millisekundlar yoki kilobaytlarda taxminiy tejashni oʻz ichiga oladi.
3. Uni tuzating, eng katta yutuq birinchi - Kodni ajratish, tasvir va shriftni boshqarish, renderlashni blokirovka qiluvchi ish, profiler soʻragan joyda memoizatsiya, maʼlumotlarni olish muhim yoʻldan olib tashlandi. Har bir oʻzgarish uchun bitta kommit, har biri oʻz sababi bilan.
4. Yonma-yon qayta oʻlchang - Oʻzgartirilgan tuzilishda bir xil ishlar: bir jadvalda oldin va keyin, har bir marshrut va har bir metrika boʻyicha. Agar oʻzgarish biror narsani yomonlashtirgan boʻlsa, jadvalda bu koʻrsatiladi va oʻzgarish qaytariladi.
5. Oʻz omboringizda topshirish - Oʻz omboringizdagi filial yoki patch, hisobot va men qilmagan ishlar va uning qiymati haqida halol roʻyxat. Joylashtirish sizning qoʻlingizda qoladi.
Zinner Sifat Kafolati
Har bir Zinner platformaga qo'shilishdan oldin ko'rib chiqiladi va tasdiqlanadi.
Barcha xizmatlar sifatni ta'minlash bo'yicha majburiyatimiz bilan qo'llab-quvvatlanadi.
Siz yetkazib berilgan ishni tasdiqlamaguningizcha toʻlovingiz himoyalangan.
Paketlarni solishtirish
| Funksiya | Boshlang'ich | Standart | Kengaytirilgan |
|---|---|---|---|
| Yetkazib berish muddati | 2 kun | 4 kun | 8 kun |
| Tuzatishlar | 0 | 2 | 3 |
| Doira | Bir sahifa profillangan, tartiblangan | Audit va asosiy tuzatishlar | Chuqur oʻtish, 5 marshrutgacha |
| Manba kodi | ✕ | ✓ | ✓ |
Portfolio
Sotuvchining ushbu Zinn bilan bog'liq ishlariga misollar.
Formline: Stripe bilan Next.js do'koni
Siz bosib o'tishingiz mumkin bo'lgan do'kon: 16 plakatlar 4 to'plamda, URLda qoladigan filtrlar va qidiruv, savat, yorug' va qorong'u mavzular va demo buyurtma yoki test rejimida haqiqiy Stripe Checkout sessiyasi bilan yakunlanadigan to'lov. Men uni TypeScriptda Tailwind CSS bilan Next.js statik eksporti sifatida qurdum. Karta to'lovlari Cloudflare Worker orqali o'tadi, u serverda savat narxini qayta hisoblaydi va Stripe veb-hook imzosini tekshiradi.
Next.jsda ikki tilli shaxsiy sayt
Ingliz va rus tillarida bir sahifali shaxsiy sayt, xizmatlar bo'limi va mening demo loyihalarimga havolalar bilan. Men uni Next.js, React va TypeScript bilan statik eksport sifatida loyihalashtirdim va qurdum, oddiy CSS modullari bilan va UI freymvorkisiz uslubladim. U yorug' va qorong'u mavzularga ega va har bir til uchun ijtimoiy oldindan ko'rish tasviri qurish vaqtida yaratiladi. GitHub Actions uni Bunny CDNga quradi va joylashtiradi, bu esa xavfsizlik sarlavhalarini qo'shadi va www va oddiy HTTPni asosiy HTTPS manziliga yo'naltiradi.
Xizmat tafsilotlari
Tez-tez so'raladigan savollar
Yo'q, va kodingizni ko'rmasdan oldin buni va'da qilgan har kimdan ehtiyot bo'ling. Checkout vidjeti yoki reklama skripti men nima qilsam ham ballni cheklashi mumkin. Audit sizning chegarangizni va unga erishish qancha turishini aytadi.
Yo'q. Vite, CRA, Remix yoki oddiy SPA hammasi bir xil tarzda profillanadi. Faqat ramka-spetsifik tuzatishlar farq qiladi: Next.js renderlash rejimlari o'rniga marshrut darajasidagi ajratish va kesh.
Ha. Standard bir xil auditdan boshlanadi va qolgan vaqtni topilgan narsalarni tuzatishga sarflaydi. Starter ishni o'zlari bajaradigan va qayerga qazishni bilishlari kerak bo'lgan jamoalar uchun mavjud.
Audit shuni ko'rsatadiki: server javob berish vaqti render va skript narxidan alohida ko'rsatiladi. API yoki so'rovlarni profillash Node, Express, NestJS yoki Rust-da qo'shimcha hisoblanadi.
Repozitoriyaga o'qish huquqi yoki manba arxivi, shuningdek sahifa URL manzili. Standart va Kengaytirilgan versiyalarda men tuzatishlarni bir tarmoqqa joylashtiraman, shuning uchun uni yaratishga ruxsat kerak. Agar siz uni bermoqchi bo'lmasangiz, men o'rniga patch yuboraman. Menga hech qachon joylashtirish huquqi kerak emas.
Odatiy bo'yicha sizning jonli ishlab chiqarish sahifalaringizda, shuning uchun raqamlar foydalanuvchilaringiz oladigan raqamlarga mos keladi. Agar sahifa login orqasida bo'lsa yoki hali joylashtirilmagan bo'lsa, sahnalashtirish havolasi, test hisobi yoki uni mahalliy ravishda ishga tushirish bosqichlari hammasi ishlaydi va hisobotda raqamlar qaysi biridan kelganligi ko'rsatiladi.
Mijozlar sharhlari
Mijozlarimiz ushbu Zinn haqida nima deganini ko'ring
Kategoriyalar
Zinner Siyosatlari
Tegishli Zinns
Next.js, React, Firebase va Node.js yordamida professional veb-ilovalar ishlab chiqish
Firebase autentifikatsiyasi bilan React ilovasini ishlab chiqish - Zinn Digital®
Men sizning React veb-saytingizni yoki AI Chatbot yechimingizni yarataman
