Vaša React ili Next.js aplikacija postajala je sporija sa svakim izdanjem. Paket je rastao, slike se isporučuju u punoj veličini, skripta treće strane blokira prvo iscrtavanje, popis se ponovno iscrtava pri svakom pritisku tipke. Mjerim koji od tih problema zapravo košta vaše korisnike vremena, a zatim popravljam one koje vrijedi popraviti.
Profilirat ću vašu React ili Next.js aplikaciju i učiniti je bržom, s brojkama
Lighthouse i profiler na jednoj stranici vaše aplikacije, nalazi rangirani prema isplativosti.
- Jedna stranica profilirana, rangirana
Revizija, zatim popravci koji pomiču brojeve, mjereni prije i poslije.
- Revizija plus glavne ispravke
- Izvorni kod
Do 5 ruta, renderiranje i keširanje, budžet paketa u CI-u, potpuna usporedba.
- Duboki prolaz, do 5 ruta
- Izvorni kod
Zatražite prilagođenu ponudu
Prijavite se za zahtjev za prilagođenu ponudu
Izradite besplatan račun ili se prijavite kako biste zatražili personaliziranu ponudu od ovog Zinnera.
Prijava / RegistracijaPostavite pitanje prije prodaje
Prijavite se za postavljanje pitanja
Kako bi se smanjio spam na platformi, poruke prije prodaje mogu slati samo prijavljeni korisnici.
Izradite besplatan račun ili se prijavite kako biste izravno poslali poruku ovom Zinneru.
Prijava / RegistracijaPotrebna prijava
Izradite besplatan račun ili se prijavite za slanje poruke ovom Zinneru.
Prijava / RegistracijaPotrebna prijava
Izradite besplatan račun ili se prijavite za traženje personalizirane ponude.
Prijava / RegistracijaUkratko
Ključni detalji o ovoj usluzi koji će vam pomoći pri odluci. Generirano od strane Zinn Huba, a ne prodavatelja.
Vrijednost pozicije
Measurement Approach
Obuhvaćeni okviri
Metrics Reported
Način dostave
Što ćete dobiti
Potpuni opis
Naručite ovo ako mislite da vas spore stranice koštaju prijava ili prometa s pretraživača i želite zadržati aplikaciju koju imate. React i Next.js već isporučuju većinu onoga što je potrebno brzoj aplikaciji, tako da se dobici postižu dobrim korištenjem tih alata, a ne promjenom stogova.
Dobivate brojeve, a ne pridjeve: LCP, CLS, INP i veličinu paketa po ruti, mjereno prije i poslije na istoj prigušenoj vezi, u jednoj tablici.
Početni paket je revizija jedne stranice: pokretanja, nalazi rangirani prema isplativosti, bez promjene koda. Standardni paket počinje s tom revizijom i ostatak vremena provodi na popravcima koji pomiču te brojeve. Napredni paket pokriva do 5 ruta, podešava renderiranje i keširanje te ostavlja budžet paketa u CI-u kako sljedeće izdanje ne bi tiho poništilo rad.
Rad se odvija na grani u vašem repozitoriju, commit po commit, svaki sa svojim razlogom. Ništa ne implementiram ja, osim ako to ne zatražite.
Nema poziva. Sve u pisanom obliku, uključujući mjerenja koja se ne slažu sa mnom.
Koraci za dovršetak vašeg projekta
1. Izmjerite što vaši korisnici zapravo dobivaju – Lighthouse na vašim stranicama uživo i sesija React profilera na sporim stranicama, na prigušenoj vezi. LCP, CLS, INP i veličina paketa po ruti, zapisani prije nego što se išta dotakne.
2. Pronađite što najviše košta – Paket i mrežna kaskada: što se isporučuje, a nitko ne koristi, što blokira prvo iscrtavanje, koje se komponente ponovno iscrtavaju i zašto. Svaki nalaz nosi procijenjenu uštedu u milisekundama ili kilobajtima.
3. Popravite, prvo najveći dobitak – Podjela koda, rukovanje slikama i fontovima, rad koji blokira iscrtavanje, memorizacija tamo gdje profiler to traži, dohvaćanje podataka premješteno s kritične putanje. Jedan commit po promjeni, svaki sa svojim razlogom.
4. Ponovno izmjerite, usporedno – Ista pokretanja na promijenjenoj verziji: prije i poslije u jednoj tablici, po ruti i po metriki. Ako je promjena nešto pogoršala, tablica to pokazuje i promjena se vraća.
5. Predaja u vašem repozitoriju – Grana ili zakrpa u vašem repozitoriju, izvješće i iskren popis onoga što nisam učinio i koliko bi to vrijedilo. Implementacija ostaje u vašim rukama.
Zinner jamstvo kvalitete
Svaki Zinner se pregledava i odobrava prije pridruživanja platformi.
Sve usluge podržane su našom predanošću osiguranju kvalitete.
Vaše plaćanje je zaštićeno dok ne odobrite isporučeni rad.
Usporedite pakete
| Funkcija | Početni | Standardno | Napredno |
|---|---|---|---|
| Vrijeme isporuke | 2 dana | 4 dana | 8 dana |
| Revizije | 0 | 2 | 3 |
| Opseg | Jedna stranica profilirana, rangirana | Revizija plus glavni popravci | Duboki prolaz, do 5 ruta |
| Izvorni kod | ✕ | ✓ | ✓ |
Portfolio
Primjeri rada prodavatelja vezani uz ovaj Zinn.
Formline: Next.js trgovina sa Stripeom
Izlog kroz koji možete kliknuti: 16 plakata u 4 kolekcija, filteri i pretraživanje koji ostaju u URL-u, košarica, svijetle i tamne teme, te naplata koja završava demo narudžbom ili stvarnom Stripe Checkout sesijom u testnom načinu. Izgradio sam ga kao Next.js statički izvoz u TypeScriptu s Tailwind CSS-om. Plaćanja karticama prolaze kroz Cloudflare Worker koji ponovno određuje cijenu košarice na poslužitelju i provjerava Stripeov potpis web-kuke.
Dvojezična osobna stranica u Next.js
Osobna stranica na jednoj stranici na engleskom i ruskom jeziku, s odjeljkom usluga i poveznicama na moje demo projekte. Dizajnirao sam je i izgradio s Next.js, Reactom i TypeScriptom kao statički izvoz, stiliziranu s običnim CSS modulima i bez UI okvira. Ima svijetle i tamne teme, a slika društvenog pregleda za svaki jezik generira se u vrijeme izgradnje. GitHub Actions je gradi i implementira na Bunny CDN, koji dodaje sigurnosne zaglavlja i preusmjerava www i obični HTTP na glavnu HTTPS adresu.
Detalji usluge
Često postavljana pitanja
Ne, i budite oprezni s bilo kim tko to obećava prije nego što vidi vaš kod. Widget za naplatu ili oglasna skripta mogu ograničiti rezultat bez obzira na to što ja učinim. Revizija vam govori vašu gornju granicu i koliko košta njezino postizanje.
Ne. Vite, CRA, Remix ili običan SPA svi se profiliraju na isti način. Razlikuju se samo popravci specifični za okvir: razdvajanje na razini rute i keširanje umjesto Next.js načina renderiranja.
Da. Standard počinje istom revizijom i preostalo vrijeme provodi popravljajući ono što je pronašao. Starter postoji za timove koji će sami obaviti posao i samo trebaju znati gdje kopati.
Revizija pokazuje da: vrijeme odziva poslužitelja prikazuje se odvojeno od troškova renderiranja i skripti. Profiliranje API-ja ili upita je dodatak, u Nodeu, Expressu, NestJS-u ili Rustu.
Pristup za čitanje repozitoriju ili arhivi izvornog koda, plus URL stranice. Na Standard i Advanced planovima, popravke šaljem na granu, tako da mi je potrebna dozvola za stvaranje iste. Ako je ne želite dati, umjesto toga šaljem zakrpu. Nikada mi nije potreban pristup za implementaciju.
Prema zadanim postavkama na vašim aktivnim produkcijskim stranicama, tako da se brojevi podudaraju s onima koje dobivaju vaši korisnici. Ako je stranica iza prijave ili još nije implementirana, veza za testiranje, testni račun ili koraci za lokalno pokretanje sve funkcionira, a izvješće navodi odakle brojevi dolaze.
Recenzije kupaca
Pogledajte što naši kupci kažu o ovom Zinnu
Kategorije
Zinner pravila
Povezani Zinns
