La tua app React o Next.js è diventata più lenta una release alla volta. Il bundle è cresciuto, le immagini vengono spedite a grandezza naturale, uno script di terze parti blocca il primo rendering, un elenco viene ri-renderizzato ad ogni battitura. Misuro quali di questi costi effettivamente tempo ai tuoi utenti, quindi risolvo quelli che vale la pena risolvere.
Farò il profiling della tua app React o Next.js e la renderò più veloce, con i numeri
Lighthouse e profiler su una pagina della tua app, risultati classificati per rendimento.
- Una pagina profilata, classificata
L'audit, poi le correzioni che muovono i numeri, misurate prima e dopo.
- Audit più le correzioni principali
- Codice sorgente
Fino a 5 percorsi, rendering e caching, un budget del bundle in CI, confronto completo.
- Passaggio approfondito, fino a 5 percorsi
- Codice sorgente
Richiedi un'Offerta Personalizzata
Accedi per Richiedere un'Offerta Personalizzata
Crea un account gratuito o accedi per richiedere un'offerta personalizzata da questo Zinner.
Accedi / RegistratiFai una domanda pre-vendita
Accedi per fare una domanda
Per ridurre lo spam sulla piattaforma, i messaggi pre-vendita possono essere inviati solo da utenti registrati.
Crea un account gratuito o accedi per messaggiare direttamente questo Zinner.
Accedi / RegistratiAccesso richiesto
Crea un account gratuito o accedi per messaggiare questo Zinner.
Accedi / RegistratiAccesso richiesto
Crea un account gratuito o accedi per richiedere un'offerta personalizzata.
Accedi / RegistratiAt a Glance
Dettagli chiave su questo servizio per aiutarti a decidere. Generato da Zinn Hub, non dal venditore.
Posizione di Valore
Measurement Approach
Framework coperti
Metrics Reported
Metodo di consegna
Cosa Riceverai
Descrizione Completa
Ordina questo se pensi che le pagine lente ti stiano costando iscrizioni o traffico di ricerca e vuoi mantenere l'app che hai. React e Next.js offrono già la maggior parte di ciò che serve a un'app veloce, quindi i guadagni derivano dall'usare bene questi strumenti piuttosto che dal cambiare stack.
Ottieni numeri, non aggettivi: LCP, CLS, INP e dimensione del bundle per percorso, misurati prima e dopo sulla stessa connessione limitata, in una tabella.
Starter è l'audit di una pagina: le esecuzioni, i risultati classificati per rendimento, nessun codice modificato. Standard parte da quell'audit e dedica il resto del tempo alle correzioni che muovono quei numeri. Advanced copre fino a 5 percorsi, ottimizza il rendering e il caching e lascia un budget del bundle in CI in modo che la prossima release non possa annullare silenziosamente il lavoro.
Il lavoro avviene su un branch nel tuo repository, commit per commit, ognuno con la sua motivazione. Nulla viene distribuito da me a meno che tu non lo chieda.
Nessuna chiamata. Tutto per iscritto, comprese le misurazioni che non sono d'accordo con me.
Passaggi per completare il tuo progetto
1. Misura ciò che i tuoi utenti ottengono effettivamente - Lighthouse sulle tue pagine live e una sessione di profiler React su quelle lente, su una connessione limitata. LCP, CLS, INP e dimensione del bundle per percorso, annotati prima di toccare qualsiasi cosa.
2. Trova ciò che costa di più - Il bundle e la cascata di rete: cosa viene spedito che nessuno usa, cosa blocca la prima visualizzazione, quali componenti vengono renderizzati di nuovo e perché. Ogni scoperta comporta un risparmio stimato in millisecondi o kilobyte.
3. Risolvi, il guadagno maggiore prima - Code splitting, gestione di immagini e font, lavoro che blocca il rendering, memoizzazione dove il profiler lo richiede, recupero dati spostato dal percorso critico. Un commit per ogni modifica, ognuno con la sua ragione.
4. Misura di nuovo, fianco a fianco - Le stesse esecuzioni sulla build modificata: prima e dopo in una tabella, per percorso e per metrica. Se una modifica ha peggiorato qualcosa, la tabella lo indica e la modifica viene annullata.
5. Consegna nel tuo repository - Un ramo o una patch nel tuo repository, il report e un elenco onesto di ciò che non ho fatto e di quanto varrebbe. Il deployment rimane nelle tue mani.
Garanzia di Qualità Zinner
Ogni Zinner è revisionato e approvato prima di aderire alla piattaforma.
Tutti i servizi sono supportati dal nostro impegno di garanzia della qualità.
Il tuo pagamento è protetto fino a quando non approvi il lavoro consegnato.
Confronta Pacchetti
| Funzione | Principiante | Standard | Avanzato |
|---|---|---|---|
| Tempo di consegna | 2 giorni | 4 giorni | 8 giorni |
| Revisioni | 0 | 2 | 3 |
| Ambito | Una pagina profilata, classificata | Audit più le principali correzioni | Passaggio approfondito, fino a 5 percorsi |
| Codice sorgente | ✕ | ✓ | ✓ |
Portfolio
Esempi del lavoro del venditore correlati a questo Zinn.
Formline: negozio Next.js con Stripe
Un negozio online navigabile: 16 poster in 4 collezioni, filtri e ricerca che rimangono nell'URL, un carrello, temi chiari e scuri, e un checkout che si conclude con un ordine demo o una sessione reale di Stripe Checkout in modalità test. L'ho costruito come esportazione statica Next.js in TypeScript con Tailwind CSS. I pagamenti con carta passano attraverso un Cloudflare Worker che ricalcola il prezzo del carrello sul server e verifica la firma del webhook di Stripe.
Sito personale bilingue in Next.js
Un sito personale di una pagina in inglese e russo, con una sezione servizi e link ai miei progetti demo. L'ho progettato e costruito con Next.js, React e TypeScript come esportazione statica, stilizzato con semplici moduli CSS e senza framework UI. Ha temi chiari e scuri, e un'immagine di anteprima sociale per ogni lingua viene generata al momento della build. GitHub Actions lo costruisce e lo distribuisce a Bunny CDN, che aggiunge intestazioni di sicurezza e reindirizza www e HTTP semplice all'indirizzo HTTPS principale.
Dettagli del Servizio
Domande frequenti
No, e fai attenzione a chiunque lo prometta prima di vedere il tuo codice. Un widget di checkout o uno script pubblicitario possono limitare il punteggio qualunque cosa io faccia. L'audit ti dice il tuo limite e quanto costa raggiungerlo.
No. Vite, CRA, Remix o una semplice SPA si profilano tutti allo stesso modo. Solo le correzioni specifiche del framework differiscono: suddivisione e caching a livello di percorso invece delle modalità di rendering di Next.js.
Sì. Standard inizia con lo stesso audit e dedica il tempo rimanente a correggere ciò che ha trovato. Starter esiste per i team che faranno il lavoro da soli e hanno solo bisogno di sapere dove scavare.
L'audit rileva che: il tempo di risposta del server viene visualizzato separatamente dal costo di rendering e script. La profilazione dell'API o delle query è l'add-on, in Node, Express, NestJS o Rust.
Accesso in lettura al repository, o un archivio della sorgente, più l'URL della pagina. Su Standard e Advanced, invio le correzioni a un ramo, quindi ho bisogno del permesso per crearne uno. Se preferisci non darlo, invio una patch. Non ho mai bisogno dell'accesso per il deploy.
Sulle tue pagine di produzione live per impostazione predefinita, in modo che i numeri corrispondano a ciò che ottengono i tuoi utenti. Se la pagina è dietro un login o non ancora distribuita, un link di staging, un account di test o i passaggi per eseguirla localmente funzionano tutti, e il report indica da quale provengono i numeri.
Recensioni dei clienti
Scopri cosa dicono i nostri clienti di questo Zinn
Categorie
Politiche di Zinner
Zinns Correlati
Sviluppa applicazioni web professionali usando Next.js, React, Firebase e Node.js
Costruisci un sito web ad alte prestazioni con integrazione NextJS Firebase ChakraUI API
Sviluppa un'applicazione web React JS con Node.js, Express, MongoDB, Firebase e MySQL
