Vaša React ili Next.js aplikacija je postajala sporija sa svakim izdanjem. Paket je rastao, slike se isporučuju u punoj veličini, skripta treće strane blokira prvo iscrtavanje, lista se ponovo iscrtava pri svakom pritisku tastera. Merim koji od tih problema zapravo košta vaše korisnike vremena, a zatim popravljam one koje vredi popraviti.
Profilisaću vašu React ili Next.js aplikaciju i učiniti je bržom, sa brojevima
Lighthouse i profiler na jednoj stranici vaše aplikacije, nalazi rangirani po isplativosti.
- Jedna stranica profilisana, rangirana
Revizija, zatim popravke koje pomeraju brojeve, merene pre i posle.
- Revizija plus glavne ispravke
- Izvorni kod
Do 5 ruta, renderovanje i keširanje, budžet paketa u CI, potpuno poređenje.
- Duboko dodavanje, do 5 ruta
- Izvorni kod
Zatražite prilagođenu ponudu
Prijavite se da biste zatražili prilagođenu ponudu
Kreirajte besplatan nalog ili se prijavite da biste zatražili personalizovanu ponudu od ovog Zinnera.
Prijava / RegistracijaPostavite pitanje pre kupovine
Prijavite se da biste postavili pitanje
Da bi se smanjio spam na platformi, poruke pre kupovine mogu slati samo prijavljeni korisnici.
Kreirajte besplatan nalog ili se prijavite da biste direktno poslali poruku ovom Zinneru.
Prijava / RegistracijaPotrebna prijava
Kreirajte besplatan nalog ili se prijavite da biste poslali poruku ovom Zinneru.
Prijava / RegistracijaPotrebna prijava
Kreirajte besplatan nalog ili se prijavite da biste zatražili personalizovanu ponudu.
Prijava / RegistracijaUkratko
Ključni detalji o ovoj usluzi koji će vam pomoći da se odlučite. Generisano od strane Zinn Hub-a, a ne prodavca.
Vrednosna pozicija
Measurement Approach
Pokriveni okviri
Metrics Reported
Način isporuke
Šta ćete dobiti
Pun opis
Naručite ovo ako mislite da vas spore stranice koštaju prijava ili pretraživačkog saobraćaja i želite da zadržite aplikaciju koju imate. React i Next.js već isporučuju većinu onoga što je potrebno brzoj aplikaciji, tako da se dobici ostvaruju dobrim korišćenjem tih alata, a ne promenom steka.
Dobijate brojeve, a ne prideve: LCP, CLS, INP i veličinu paketa po ruti, mereno pre i posle na istoj ograničenoj vezi, u jednoj tabeli.
Starter je revizija jedne stranice: pokretanja, nalazi rangirani po isplativosti, bez izmenjenog koda. Standard počinje od te revizije i ostatak vremena provodi na popravkama koje pomeraju te brojeve. Advanced pokriva do 5 ruta, podešava renderovanje i keširanje, i ostavlja budžet paketa u CI tako da sledeće izdanje ne može tiho poništiti rad.
Rad se odvija na grani u vašem repozitorijumu, commit po commit, svaki sa svojim razlogom. Ništa ne implementiram ja, osim ako to ne zatražite.
Nema poziva. Sve u pisanoj formi, uključujući merenja koja se ne slažu sa mnom.
Koraci za završetak vašeg projekta
1. Izmerite šta vaši korisnici zapravo dobijaju – Lighthouse na vašim živim stranicama i React profiler sesija na sporim, na ograničenoj vezi. LCP, CLS, INP i veličina paketa po ruti, zapisano pre nego što se bilo šta dodirne.
2. Pronađite šta najviše košta – Paket i mrežni vodopad: šta se isporučuje što niko ne koristi, šta blokira prvo iscrtavanje, koje komponente se ponovo renderuju i zašto. Svaki nalaz nosi procenjenu uštedu u milisekundama ili kilobajtima.
3. Popravite, najveći dobitak prvi – Razdvajanje koda, rukovanje slikama i fontovima, rad koji blokira renderovanje, memoizacija tamo gde profiler to traži, premeštanje dohvatanja podataka sa kritične putanje. Jedan commit po promeni, svaki sa svojim razlogom.
4. Ponovo izmerite, uporedo – Ista pokretanja na izmenjenoj verziji: pre i posle u jednoj tabeli, po ruti i po metrici. Ako je promena nešto pogoršala, tabela to kaže i promena se vraća.
5. Predaja u vašem repozitorijumu – Grana ili zakrpa u vašem repozitorijumu, izveštaj i iskren spisak onoga što nisam uradio i koliko bi to vredelo. Implementacija ostaje u vašim rukama.
Garancija kvaliteta Zinner-a
Svaki Zinner je pregledan i odobren pre pridruživanja platformi.
Sve usluge su podržane našom posvećenošću osiguranju kvaliteta.
Vaša uplata je zaštićena dok ne odobrite isporučeni rad.
Uporedite pakete
| Funkcija | Početni | Standardno | Napredno |
|---|---|---|---|
| Vreme isporuke | 2 dana | 4 dana | 8 dana |
| Revizije | 0 | 2 | 3 |
| Opseg | Jedna stranica profilisana, rangirana | Revizija plus glavne popravke | Duboki prolaz, do 5 ruta |
| Izvorni kod | ✕ | ✓ | ✓ |
Portfolio
Primeri rada prodavca u vezi sa ovim Zinnom.
Formline: Next.js prodavnica sa Stripe-om
Izlog kroz koji možete kliknuti: 16 postera u 4 kolekcija, filteri i pretraga koji ostaju u URL-u, korpa, svetle i tamne teme, i naplata koja se završava demo narudžbinom ili stvarnom Stripe Checkout sesijom u testnom režimu. Izgradio sam ga kao Next.js statički izvoz u TypeScript-u sa Tailwind CSS-om. Plaćanja karticama idu preko Cloudflare Worker-a koji ponovo određuje cenu korpe na serveru i verifikuje Stripe-ov potpis veb-kuke.
Dvojezični lični sajt u Next.js
Lični sajt na jednoj stranici na engleskom i ruskom jeziku, sa odeljkom za usluge i linkovima ka mojim demo projektima. Dizajnirao sam ga i izgradio sa Next.js, React i TypeScript-om kao statički izvoz, stilizovan običnim CSS modulima i bez UI okvira. Ima svetle i tamne teme, a slika za društveni pregled za svaki jezik se generiše u vreme izgradnje. GitHub Actions ga gradi i postavlja na Bunny CDN, koji dodaje sigurnosne zaglavlja i preusmerava www i običan HTTP na glavnu HTTPS adresu.
Detalji usluge
Često postavljana pitanja
Ne, i budite oprezni sa svakim ko to obećava pre nego što vidi vaš kod. Vidžet za plaćanje ili oglasna skripta mogu ograničiti rezultat bez obzira na to šta ja radim. Revizija vam govori vašu gornju granicu i koliko košta njeno dostizanje.
Ne. Vite, CRA, Remix ili običan SPA se profilišu na isti način. Razlikuju se samo popravke specifične za framework: razdvajanje na nivou rute i keširanje umesto Next.js režima renderovanja.
Da. Standard počinje istom revizijom i preostalo vreme provodi popravljajući ono što je pronašao. Starter postoji za timove koji će sami obaviti posao i samo treba da znaju gde da kopaju.
Revizija pokazuje da: vreme odziva servera se prikazuje odvojeno od troškova renderovanja i skripti. Profilisanje API-ja ili upita je dodatak, u Node, Express, NestJS ili Rust.
Pristup za čitanje repozitorijumu, ili arhiva izvornog koda, plus URL stranice. Na Standard i Advanced planovima, ja šaljem ispravke na granu, tako da mi je potrebna dozvola za kreiranje iste. Ako ne želite da je date, umesto toga šaljem zakrpu. Nikada mi nije potreban pristup za postavljanje.
Podrazumevano na vašim aktivnim produkcijskim stranicama, tako da se brojevi podudaraju sa onim što vaši korisnici dobijaju. Ako je stranica iza prijave ili još nije postavljena, link za testiranje, test nalog ili koraci za lokalno pokretanje sve funkcioniše, a izveštaj navodi odakle potiču brojevi.
Recenzije kupaca
Pogledajte šta naši kupci kažu o ovom Zinn-u
Kategorije
Zinner pravila
Povezani Zinns
Razvijajte React.js veb aplikacije koristeći Node.js, Express, MongoDB & MySQL
