Aplicația ta React sau Next.js a devenit mai lentă cu fiecare lansare. Pachetul a crescut, imaginile sunt livrate la dimensiune completă, un script terț blochează prima afișare, o listă se re-randează la fiecare apăsare de tastă. Măsor care dintre acestea le costă de fapt timp utilizatorilor tăi, apoi le repar pe cele care merită reparate.
Voi profila aplicația ta React sau Next.js și o voi face mai rapidă, cu cifre
Lighthouse și profiler pe o pagină a aplicației dvs., descoperiri clasificate după rentabilitate.
- O pagină profilată, clasată
Auditul, apoi soluțiile care modifică cifrele, măsurate înainte și după.
- Audit plus principalele remedieri
- Cod sursă
Până la 5 rute, randare și cache, un buget de pachet în CI, comparație completă.
- Pasă profundă, până la 5 rute
- Cod sursă
Cere o ofertă personalizată
Conectați-vă pentru a solicita o ofertă personalizată
Creați un cont gratuit sau conectați-vă pentru a solicita o ofertă personalizată de la acest Zinner.
Autentificare / ÎnregistrarePune o întrebare înainte de vânzare
Conectați-vă pentru a pune o întrebare
Pentru a reduce spam-ul pe platformă, mesajele pre-vânzare pot fi trimise doar de utilizatorii autentificați.
Creați un cont gratuit sau conectați-vă pentru a trimite un mesaj direct acestui Zinner.
Autentificare / ÎnregistrareAutentificare necesară
Creați un cont gratuit sau conectați-vă pentru a trimite un mesaj acestui Zinner.
Autentificare / ÎnregistrareAutentificare necesară
Creați un cont gratuit sau conectați-vă pentru a solicita o ofertă personalizată.
Autentificare / ÎnregistrareDintr-o privire
Detalii cheie despre acest serviciu pentru a vă ajuta să decideți. Generat de Zinn Hub, nu de vânzător.
Poziția valorii
Measurement Approach
Cadre acoperite
Metrics Reported
Metoda de livrare
Ce veți primi
Descriere completă
Comandați acest lucru dacă credeți că paginile lente vă costă înscrieri sau trafic de căutare și doriți să păstrați aplicația pe care o aveți. React și Next.js oferă deja majoritatea lucrurilor de care are nevoie o aplicație rapidă, astfel încât câștigurile provin din utilizarea bună a acestor instrumente, mai degrabă decât din schimbarea stivei.
Obțineți cifre, nu adjective: LCP, CLS, INP și dimensiunea pachetului per rută, măsurate înainte și după pe aceeași conexiune limitată, într-un singur tabel.
Starter este auditul unei pagini: rulările, descoperirile clasificate după rentabilitate, fără modificări de cod. Standard începe de la acel audit și petrece restul timpului pe soluțiile care modifică acele cifre. Advanced acoperă până la 5 rute, ajustează randarea și cache-ul și lasă un buget de pachet în CI, astfel încât următoarea lansare să nu poată anula în liniște munca.
Lucrul se desfășoară pe o ramură din depozitul dvs., commit cu commit, fiecare cu motivul său. Nimic nu este implementat de mine decât dacă cereți.
Fără apeluri. Totul în scris, inclusiv măsurătorile care nu sunt de acord cu mine.
Pași pentru finalizarea proiectului dvs.
1. Măsurați ce primesc de fapt utilizatorii dvs. - Lighthouse pe paginile dvs. live și o sesiune de profiler React pe cele lente, pe o conexiune limitată. LCP, CLS, INP și dimensiunea pachetului per rută, notate înainte de a atinge ceva.
2. Găsiți ce costă cel mai mult - Pachetul și cascada de rețea: ce se livrează și nimeni nu folosește, ce blochează prima randare, ce componente se re-randare și de ce. Fiecare descoperire are o economie estimată în milisecunde sau kilobyți.
3. Remediați, cel mai mare câștig mai întâi - Împărțirea codului, gestionarea imaginilor și a fonturilor, lucrul care blochează randarea, memoizarea acolo unde profilerul o cere, preluarea datelor mutată de pe calea critică. Un commit per modificare, fiecare cu motivul său.
4. Măsurați din nou, cot la cot - Aceleași rulări pe build-ul modificat: înainte și după într-un singur tabel, per rută și per metrică. Dacă o modificare a înrăutățit ceva, tabelul o spune și modificarea este anulată.
5. Predare în depozitul dvs. - O ramură sau un patch în depozitul dvs., raportul și o listă sinceră a ceea ce nu am făcut și cât ar valora. Implementarea rămâne în mâinile dvs.
Garanția calității Zinner
Fiecare Zinner este revizuit și aprobat înainte de a se alătura platformei.
Toate serviciile sunt susținute de angajamentul nostru de asigurare a calității.
Plata dvs. este protejată până când aprobați lucrarea livrată.
Comparați pachetele
| Funcție | Starter | Standard | Avansat |
|---|---|---|---|
| Timp de livrare | 2 zile | 4 zile | 8 zile |
| Revizuiri | 0 | 2 | 3 |
| Domeniu de aplicare | O pagină profilată, clasificată | Audit plus principalele soluții | Analiză aprofundată, până la 5 rute |
| Cod sursă | ✕ | ✓ | ✓ |
Portofoliu
Exemple de lucrări ale vânzătorului legate de acest Zinn.
Formline: Magazin Next.js cu Stripe
Un magazin online pe care îl puteți naviga: 16 postere în 4 colecții, filtre și căutare care rămân în URL, un coș de cumpărături, teme deschise și închise, și un proces de finalizare a comenzii care se încheie cu o comandă demo sau o sesiune reală Stripe Checkout în modul de testare. L-am construit ca o exportare statică Next.js în TypeScript cu Tailwind CSS. Plățile cu cardul trec printr-un Cloudflare Worker care recalculează prețul coșului pe server și verifică semnătura webhook-ului Stripe.
Site personal bilingv în Next.js
Un site personal de o pagină în engleză și rusă, cu o secțiune de servicii și link-uri către proiectele mele demo. L-am proiectat și construit cu Next.js, React și TypeScript ca export static, stilizat cu CSS Modules simple și fără un framework UI. Are teme deschise și închise, iar o imagine de previzualizare socială pentru fiecare limbă este generată la momentul construirii. GitHub Actions îl construiește și îl implementează pe Bunny CDN, care adaugă anteturi de securitate și redirecționează www și HTTP simplu către adresa HTTPS principală.
Detalii serviciu
Întrebări frecvente
Nu, și fiți atenți la oricine o promite înainte de a vedea codul dvs. Un widget de checkout sau un script publicitar pot limita scorul indiferent de ce fac eu. Auditul vă spune plafonul și cât costă atingerea lui.
Nu. Vite, CRA, Remix sau un SPA simplu se profilează la fel. Doar soluțiile specifice cadrului diferă: împărțirea și cache-ul la nivel de rută în loc de modurile de randare Next.js.
Da. Standard începe cu același audit și petrece timpul rămas remediind ceea ce a găsit. Starter există pentru echipele care vor face munca singure și trebuie doar să știe unde să sape.
Auditul arată că: timpul de răspuns al serverului apare separat de costul de randare și de script. Profilarea API-ului sau a interogărilor este suplimentul, în Node, Express, NestJS sau Rust.
Acces de citire la depozit, sau o arhivă a sursei, plus URL-ul paginii. Pe Standard și Avansat, trimit corecțiile într-o ramură, deci am nevoie de permisiunea de a crea una. Dacă preferi să nu o dai, trimit în schimb un patch. Nu am niciodată nevoie de acces de implementare.
Pe paginile tale de producție live, în mod implicit, astfel încât numerele să corespundă cu ceea ce obțin utilizatorii tăi. Dacă pagina este în spatele unei autentificări sau nu este încă implementată, un link de staging, un cont de test sau pași pentru a o rula local funcționează toate, iar raportul specifică de unde provin numerele.
Recenzii clienți
Vezi ce spun clienții noștri despre acest Zinn
Categorii
Politici Zinner
Zinns similare
Construiți un site web profesional React cu Zinn Digital® - experți din Londra
