Sizin React və ya Next.js tətbiqiniz hər buraxılışda bir az yavaşladı. Paket böyüdü, şəkillər tam ölçüdə göndərilir, üçüncü tərəf skripti ilk rənglənməni bloklayır, siyahı hər klaviatura vuruşunda yenidən render olunur. Mən bunlardan hansının istifadəçilərinizin vaxtına başa gəldiyini ölçürəm, sonra düzəltməyə dəyər olanları düzəldirəm.
Mən sizin React və ya Next.js tətbiqinizi profilləşdirəcəyəm və onu rəqəmlərlə daha sürətli edəcəyəm
Tətbiqinizin bir səhifəsində Lighthouse və profiler, tapıntılar gəlirlilik üzrə sıralanır.
- Bir səhifə profillənmiş, sıralanmış
Audit, sonra rəqəmləri hərəkətə gətirən düzəlişlər, əvvəl və sonra ölçülür.
- Audit üstəgəl əsas düzəlişlər
- Mənbə kodu
5 marşrutlara qədər, render və keşləmə, CI-də paket büdcəsi, tam müqayisə.
- Dərin keçid, 5 marşruta qədər
- Mənbə kodu
Xüsusi Təklif İstəyin
Xüsusi Təklif İstəmək üçün Daxil Olun
Bu Zinner-dən fərdi təklif istəmək üçün pulsuz hesab yaradın və ya daxil olun.
Daxil ol / Qeydiyyatdan keçSatışdan Əvvəl Sual Verin
Sual Vermək üçün Daxil Olun
Platforma spamını azaltmaq üçün satışdan əvvəl mesajlar yalnız daxil olmuş istifadəçilər tərəfindən göndərilə bilər.
Bu Zinner-ə birbaşa mesaj göndərmək üçün pulsuz hesab yaradın və ya daxil olun.
Daxil ol / Qeydiyyatdan keçDaxil olmaq tələb olunur
Bu Zinnerə mesaj göndərmək üçün pulsuz hesab yaradın və ya daxil olun.
Daxil ol / Qeydiyyatdan keçDaxil olmaq tələb olunur
Fərdi təklif tələb etmək üçün pulsuz hesab yaradın və ya daxil olun.
Daxil ol / Qeydiyyatdan keçBir Baxışda
Qərar verməyinizə kömək edəcək bu xidmət haqqında əsas detallar. Zinn Hub tərəfindən yaradılıb, satıcı tərəfindən deyil.
Dəyər Mövqeyi
Measurement Approach
Əhatə olunan çərçivələr
Metrics Reported
Çatdırılma Metodu
Nə Əldə Edəcəksiniz
Tam Təsvir
Yavaş səhifələrin sizə qeydiyyat və ya axtarış trafikinə başa gəldiyini düşünürsünüzsə və mövcud tətbiqinizi saxlamaq istəyirsinizsə, bunu sifariş edin. React və Next.js artıq sürətli bir tətbiqin ehtiyac duyduğu şeylərin əksəriyyətini təmin edir, buna görə də qazanclar yığınları dəyişdirməkdən daha çox bu alətlərdən yaxşı istifadə etməkdən gəlir.
Siz sifətlər deyil, rəqəmlər əldə edirsiniz: LCP, CLS, INP və hər marşrut üçün paket ölçüsü, eyni boğulmuş əlaqədə əvvəl və sonra ölçülür, bir cədvəldə.
Başlanğıc bir səhifənin auditidir: sınaqlar, gəlirlilik üzrə sıralanmış tapıntılar, heç bir kod dəyişdirilmir. Standart bu auditdən başlayır və qalan vaxtı bu rəqəmləri hərəkətə gətirən düzəlişlərə sərf edir. Qabaqcıl 5 marşrutlara qədər əhatə edir, render və keşləməni tənzimləyir və CI-də bir paket büdcəsi qoyur ki, növbəti buraxılış işi səssizcə geri qaytara bilməsin.
İş depolarınızdakı bir filialda, commit-commit, hər biri öz səbəbi ilə baş verir. Mən istəməyincə heç nə yerləşdirilmir.
Zənglər yoxdur. Hər şey yazılı şəkildə, mənimlə razılaşmayan ölçmələr də daxil olmaqla.
Layihənizi tamamlamaq üçün addımlar
1. İstifadəçilərinizin həqiqətdə nə əldə etdiyini ölçün - canlı səhifələrinizdə Lighthouse və yavaş səhifələrdə, məhdudlaşdırılmış bağlantıda React profiler seansı. LCP, CLS, INP və hər marşrut üçün paket ölçüsü, heç nəyə toxunulmazdan əvvəl qeyd olunur.
2. Ən çox nəyin başa gəldiyini tapın - Paket və şəbəkə kaskadı: heç kimin istifadə etmədiyi nə göndərilir, ilk rəngləməni nə bloklayır, hansı komponentlər yenidən render olunur və niyə. Hər bir tapıntı millisaniyə və ya kilobaytla təxmini qənaət gətirir.
3. Düzəldin, ən böyük qazancdan başlayaraq - Kodun bölünməsi, şəkil və şriftlərin idarə edilməsi, renderi bloklayan işlər, profiler tələb etdiyi yerdə memoizasiya, kritik yoldan kənara çıxarılan məlumatların əldə edilməsi. Hər dəyişiklik üçün bir commit, hər biri öz səbəbi ilə.
4. Yenidən ölçün, yan-yana - Dəyişdirilmiş build üzərində eyni işlər: bir cədvəldə əvvəl və sonra, hər marşrut və hər metrik üçün. Əgər bir dəyişiklik nəsə pisləşdirsə, cədvəl bunu göstərir və dəyişiklik geri qaytarılır.
5. Deponuzda təhvil verin - Deponuzda bir branch və ya patch, hesabat və etmədiyim və nəyə dəyər olacağı barədə dürüst bir siyahı. Yerləşdirmə sizin əlinizdə qalır.
Zinner Keyfiyyət Zəmanəti
Hər bir Zinner platformaya qoşulmazdan əvvəl nəzərdən keçirilir və təsdiqlənir.
Bütün xidmətlər keyfiyyət təminatı öhdəliyimizlə dəstəklənir.
Çatdırılan işi təsdiq edənə qədər ödənişiniz qorunur.
Paketləri müqayisə edin
| Funksiya | Başlanğıc | Standart | Qabaqcıl |
|---|---|---|---|
| Çatdırılma vaxtı | 2 gün | 4 gün | 8 gün |
| Düzəlişlər | 0 | 2 | 3 |
| Əhatə dairəsi | Bir səhifə profilləşdirildi, sıralandı | Audit üstəgəl əsas düzəlişlər | Dərin keçid, 5 marşruta qədər |
| Mənbə kodu | ✕ | ✓ | ✓ |
Portfolio
Satıcının bu Zinn ilə əlaqəli iş nümunələri.
Formline: Stripe ilə Next.js mağazası
Klikləyə biləcəyiniz bir mağaza: 16 kolleksiyada 4 poster, URL-də qalan filtrlər və axtarış, səbət, açıq və tünd mövzular və demo sifarişlə və ya test rejimində real Stripe Checkout sessiyası ilə bitən bir ödəniş. Mən onu Tailwind CSS ilə TypeScript-də Next.js statik ixracı kimi qurdum. Kart ödənişləri serverdə səbəti yenidən qiymətləndirən və Stripe-ın vebhook imzasını yoxlayan bir Cloudflare Worker vasitəsilə keçir.
Next.js-də ikidilli şəxsi sayt
İngilis və rus dillərində bir səhifəlik şəxsi sayt, xidmətlər bölməsi və demo layihələrimə keçidlər. Mən onu Next.js, React və TypeScript ilə statik ixrac kimi dizayn etdim və qurdum, sadə CSS Modulları ilə və heç bir UI çərçivəsi olmadan tərtib etdim. O, açıq və tünd mövzulara malikdir və hər dil üçün sosial önizləmə şəkli qurulma zamanı yaradılır. GitHub Actions onu Bunny CDN-ə qurur və yerləşdirir, bu da təhlükəsizlik başlıqlarını əlavə edir və www və sadə HTTP-ni əsas HTTPS ünvanına yönləndirir.
Xidmət Detalları
Tez-tez verilən suallar
Xeyr, və kodunuzu görmədən bunu vəd edən hər kəslə diqqətli olun. Bir ödəniş vidceti və ya reklam skripti nə etsəm də balı məhdudlaşdıra bilər. Audit sizə tavanınızı və ona çatmağın nəyə başa gəldiyini deyir.
Xeyr. Vite, CRA, Remix və ya sadə bir SPA hamısı eyni şəkildə profilləşdirilir. Yalnız çərçivəyə xas düzəlişlər fərqlənir: Next.js render rejimləri əvəzinə marşrut səviyyəsində bölünmə və keşləmə.
Bəli. Standart eyni auditi ilə başlayır və qalan vaxtı tapdığı şeyləri düzəltməyə sərf edir. Başlanğıc işi özləri görəcək və sadəcə harada qazmağı bilməli olan komandalar üçün mövcuddur.
Audit göstərir ki: server cavab müddəti render və skript xərcindən ayrı görünür. API-nin və ya sorğuların profilləşdirilməsi Node, Express, NestJS və ya Rust-da əlavədir.
Depoya oxumaq icazəsi və ya mənbənin arxivi, üstəgəl səhifənin URL-i. Standart və Qabaqcıl versiyalarda düzəlişləri bir budağa itələyirəm, buna görə də birini yaratmaq üçün icazəyə ehtiyacım var. Əgər bunu vermək istəmirsinizsə, əvəzinə bir yamaq göndərirəm. Mənə heç vaxt yerləşdirmə icazəsi lazım deyil.
Varsayılan olaraq canlı istehsal səhifələrinizdə, beləliklə rəqəmlər istifadəçilərinizin əldə etdiyi ilə uyğun gəlir. Əgər səhifə girişin arxasındadırsa və ya hələ yerləşdirilməyibsə, bir hazırlıq linki, bir test hesabı və ya onu yerli olaraq işə salmaq üçün addımlar hamısı işləyir və hesabat rəqəmlərin hansıdan gəldiyini göstərir.
Müştəri Rəyləri
Müştərilərimizin bu Zinn haqqında nə dediyini görün
Kateqoriyalar
Zinner Siyasətləri
Əlaqəli Zinns
React JS, Node JS və Google Firebase istifadə edərək xüsusi veb tətbiqlər qurun
Sizə JavaScript, React, Node.js, HTML, CSS, Firebase və daha çoxunu öyrədəcəyəm
