Η εφαρμογή σας React ή Next.js έγινε πιο αργή με κάθε νέα έκδοση. Το πακέτο μεγάλωσε, οι εικόνες αποστέλλονται σε πλήρες μέγεθος, ένα σενάριο τρίτου μέρους μπλοκάρει την πρώτη εμφάνιση, μια λίστα ανανεώνεται με κάθε πάτημα πλήκτρου. Μετράω ποια από αυτά κοστίζουν πραγματικά χρόνο στους χρήστες σας και μετά διορθώνω αυτά που αξίζει να διορθωθούν.
Θα δημιουργήσω ένα προφίλ της εφαρμογής σας React ή Next.js και θα την κάνω πιο γρήγορη, με αριθμούς
Lighthouse και profiler σε μία σελίδα της εφαρμογής σας, με τα ευρήματα ταξινομημένα κατά απόδοση.
- Μία σελίδα με προφίλ, ταξινομημένη
Ο έλεγχος, και μετά οι διορθώσεις που μετακινούν τους αριθμούς, μετρημένες πριν και μετά.
- Έλεγχος συν τις κύριες διορθώσεις
- Πηγαίος κώδικας
Έως 5 διαδρομές, απόδοση και προσωρινή αποθήκευση, ένας προϋπολογισμός δέσμης σε CI, πλήρης σύγκριση.
- Βαθιά διέλευση, έως 5 διαδρομές
- Πηγαίος κώδικας
Ζητήστε Προσαρμοσμένη Προσφορά
Συνδεθείτε για να ζητήσετε Προσαρμοσμένη Προσφορά
Δημιουργήστε έναν δωρεάν λογαριασμό ή συνδεθείτε για να ζητήσετε μια εξατομικευμένη προσφορά από αυτόν τον Zinner.
Σύνδεση / ΕγγραφήΚάντε μια ερώτηση πριν την πώληση
Συνδεθείτε για να κάνετε μια ερώτηση
Για τη μείωση των ανεπιθύμητων μηνυμάτων στην πλατφόρμα, τα μηνύματα πριν την πώληση μπορούν να σταλούν μόνο από συνδεδεμένους χρήστες.
Δημιουργήστε έναν δωρεάν λογαριασμό ή συνδεθείτε για να στείλετε μήνυμα απευθείας σε αυτόν τον Zinner.
Σύνδεση / ΕγγραφήΑπαιτείται σύνδεση
Δημιουργήστε έναν δωρεάν λογαριασμό ή συνδεθείτε για να στείλετε μήνυμα σε αυτόν τον Zinner.
Σύνδεση / ΕγγραφήΑπαιτείται σύνδεση
Δημιουργήστε έναν δωρεάν λογαριασμό ή συνδεθείτε για να ζητήσετε μια εξατομικευμένη προσφορά.
Σύνδεση / ΕγγραφήΜε μια ματιά
Βασικές λεπτομέρειες σχετικά με αυτήν την υπηρεσία για να σας βοηθήσουν να αποφασίσετε. Δημιουργήθηκε από το Zinn Hub, όχι από τον πωλητή.
Θέση Αξίας
Measurement Approach
Καλυμμένα Πλαίσια
Metrics Reported
Μέθοδος Παράδοσης
Τι θα λάβετε
Πλήρης Περιγραφή
Παραγγείλτε αυτό αν πιστεύετε ότι οι αργές σελίδες σας κοστίζουν εγγραφές ή επισκεψιμότητα αναζήτησης και θέλετε να διατηρήσετε την εφαρμογή που έχετε. Το React και το Next.js παρέχουν ήδη τα περισσότερα από όσα χρειάζεται μια γρήγορη εφαρμογή, οπότε τα κέρδη προέρχονται από την καλή χρήση αυτών των εργαλείων αντί για την αλλαγή στοίβας.
Παίρνετε αριθμούς, όχι επίθετα: LCP, CLS, INP και μέγεθος δέσμης ανά διαδρομή, μετρημένα πριν και μετά στην ίδια περιορισμένη σύνδεση, σε έναν πίνακα.
Το Starter είναι ο έλεγχος μιας σελίδας: οι εκτελέσεις, τα ευρήματα ταξινομημένα κατά απόδοση, χωρίς αλλαγή κώδικα. Το Standard ξεκινά από αυτόν τον έλεγχο και αφιερώνει τον υπόλοιπο χρόνο στις διορθώσεις που μετακινούν αυτούς τους αριθμούς. Το Advanced καλύπτει έως 5 διαδρομές, ρυθμίζει την απόδοση και την προσωρινή αποθήκευση, και αφήνει έναν προϋπολογισμό δέσμης στο CI, ώστε η επόμενη έκδοση να μην μπορεί να αναιρέσει αθόρυβα την εργασία.
Η εργασία γίνεται σε ένα branch στο αποθετήριό σας, commit προς commit, το καθένα με τον λόγο του. Τίποτα δεν αναπτύσσεται από εμένα εκτός αν το ζητήσετε.
Καμία κλήση. Όλα γραπτώς, συμπεριλαμβανομένων των μετρήσεων που διαφωνούν μαζί μου.
Βήματα για την ολοκλήρωση του έργου σας
1. Μετρήστε τι λαμβάνουν πραγματικά οι χρήστες σας - Lighthouse στις ζωντανές σελίδες σας και μια συνεδρία προφίλ React στις αργές, σε περιορισμένη σύνδεση. LCP, CLS, INP και μέγεθος δέσμης ανά διαδρομή, καταγεγραμμένα πριν από οποιαδήποτε παρέμβαση.
2. Βρείτε τι κοστίζει περισσότερο - Η δέσμη και ο καταρράκτης δικτύου: τι αποστέλλεται που κανείς δεν χρησιμοποιεί, τι μπλοκάρει την πρώτη εμφάνιση, ποια στοιχεία επανα-αποδίδονται και γιατί. Κάθε εύρημα φέρει μια εκτιμώμενη εξοικονόμηση σε χιλιοστά του δευτερολέπτου ή kilobyte.
3. Διορθώστε το, με τη μεγαλύτερη κέρδος πρώτα - Διαχωρισμός κώδικα, χειρισμός εικόνων και γραμματοσειρών, εργασία που μπλοκάρει την απόδοση, memoization όπου το ζητάει ο profiler, μεταφορά της ανάκτησης δεδομένων εκτός της κρίσιμης διαδρομής. Ένα commit ανά αλλαγή, το καθένα με τον λόγο του.
4. Μετρήστε ξανά, δίπλα-δίπλα - Οι ίδιες εκτελέσεις στην αλλαγμένη κατασκευή: πριν και μετά σε έναν πίνακα, ανά διαδρομή και ανά μετρική. Εάν μια αλλαγή έκανε κάτι χειρότερο, ο πίνακας το αναφέρει και η αλλαγή αναιρείται.
5. Παράδοση στο αποθετήριό σας - Ένα branch ή patch στο αποθετήριό σας, η αναφορά, και μια ειλικρινής λίστα με το τι δεν έκανα και τι θα άξιζε. Η ανάπτυξη παραμένει στα χέρια σας.
Εγγύηση Ποιότητας Zinner
Κάθε Zinner ελέγχεται και εγκρίνεται πριν ενταχθεί στην πλατφόρμα.
Όλες οι υπηρεσίες υποστηρίζονται από τη δέσμευσή μας για διασφάλιση ποιότητας.
Η πληρωμή σας προστατεύεται μέχρι να εγκρίνετε την ολοκληρωμένη εργασία.
Σύγκριση Πακέτων
| Λειτουργία | Αρχικό | Τυπικό | Προχωρημένο |
|---|---|---|---|
| Χρόνος παράδοσης | 2 ημέρες | 4 ημέρες | 8 ημέρες |
| Αναθεωρήσεις | 0 | 2 | 3 |
| Πεδίο εφαρμογής | Μία σελίδα με προφίλ, ταξινομημένη | Έλεγχος συν τις κύριες διορθώσεις | Βαθιά διέλευση, έως 5 διαδρομές |
| Πηγαίος κώδικας | ✕ | ✓ | ✓ |
Χαρτοφυλάκιο
Παραδείγματα εργασίας του πωλητή που σχετίζονται με αυτό το Zinn.
Formline: Κατάστημα Next.js με Stripe
Ένα κατάστημα που μπορείτε να περιηγηθείτε: 16 αφίσες σε 4 συλλογές, φίλτρα και αναζήτηση που παραμένουν στην URL, ένα καλάθι, φωτεινά και σκούρα θέματα, και ένα ταμείο που καταλήγει σε μια δοκιμαστική παραγγελία ή μια πραγματική συνεδρία Stripe Checkout σε δοκιμαστική λειτουργία. Το δημιούργησα ως στατική εξαγωγή Next.js σε TypeScript με Tailwind CSS. Οι πληρωμές με κάρτα περνούν μέσω ενός Cloudflare Worker που ανατιμολογεί το καλάθι στον διακομιστή και επαληθεύει την υπογραφή webhook του Stripe.
Δίγλωσσος προσωπικός ιστότοπος σε Next.js
Ένας προσωπικός ιστότοπος μιας σελίδας στα Αγγλικά και τα Ρωσικά, με ενότητα υπηρεσιών και συνδέσμους προς τα demo έργα μου. Τον σχεδίασα και τον δημιούργησα με Next.js, React και TypeScript ως στατική εξαγωγή, με στυλ απλών CSS Modules και χωρίς πλαίσιο UI. Έχει φωτεινά και σκούρα θέματα, και μια εικόνα προεπισκόπησης κοινωνικών δικτύων για κάθε γλώσσα δημιουργείται κατά τη διάρκεια της κατασκευής. Το GitHub Actions τον κατασκευάζει και τον αναπτύσσει στο Bunny CDN, το οποίο προσθέτει κεφαλίδες ασφαλείας και ανακατευθύνει το www και το απλό HTTP στην κύρια διεύθυνση HTTPS.
Λεπτομέρειες Υπηρεσίας
Συχνές Ερωτήσεις
Όχι, και να είστε προσεκτικοί με όποιον το υπόσχεται πριν δει τον κώδικά σας. Ένα widget πληρωμής ή ένα διαφημιστικό script μπορεί να περιορίσει τη βαθμολογία ό,τι κι αν κάνω. Ο έλεγχος σας λέει το ανώτατο όριό σας και τι κοστίζει η επίτευξή του.
Όχι. Τα Vite, CRA, Remix ή ένα απλό SPA όλα προφίλουν με τον ίδιο τρόπο. Μόνο οι διορθώσεις ειδικά για το πλαίσιο διαφέρουν: διαχωρισμός και προσωρινή αποθήκευση σε επίπεδο διαδρομής αντί για τις λειτουργίες απόδοσης του Next.js.
Ναι. Το Standard ξεκινά με τον ίδιο έλεγχο και αφιερώνει τον υπόλοιπο χρόνο στη διόρθωση όσων βρήκε. Το Starter υπάρχει για ομάδες που θα κάνουν τη δουλειά μόνες τους και απλά χρειάζεται να ξέρουν πού να ψάξουν.
Ο έλεγχος βλέπει ότι: ο χρόνος απόκρισης του διακομιστή εμφανίζεται ξεχωριστά από το κόστος απόδοσης και σεναρίου. Η δημιουργία προφίλ του API ή των ερωτημάτων είναι το πρόσθετο, σε Node, Express, NestJS ή Rust.
Πρόσβαση ανάγνωσης στο αποθετήριο, ή ένα αρχείο του πηγαίου κώδικα, συν τη διεύθυνση URL της σελίδας. Στο Standard και Advanced, ανεβάζω τις διορθώσεις σε ένα branch, οπότε χρειάζομαι άδεια για να δημιουργήσω ένα. Αν προτιμάτε να μην τη δώσετε, στέλνω ένα patch αντ' αυτού. Ποτέ δεν χρειάζομαι πρόσβαση ανάπτυξης.
Στις ζωντανές σελίδες παραγωγής σας από προεπιλογή, έτσι ώστε οι αριθμοί να ταιριάζουν με αυτά που λαμβάνουν οι χρήστες σας. Εάν η σελίδα βρίσκεται πίσω από μια σύνδεση ή δεν έχει αναπτυχθεί ακόμα, ένας σύνδεσμος staging, ένας δοκιμαστικός λογαριασμός ή βήματα για την τοπική εκτέλεση όλα λειτουργούν, και η αναφορά αναφέρει από πού προέρχονται οι αριθμοί.
Κριτικές Πελατών
Δείτε τι λένε οι πελάτες μας για αυτό το Zinn
Κατηγορίες
Πολιτικές Zinner
Σχετικά Zinns
Ανάπτυξη επαγγελματικών εφαρμογών ιστού χρησιμοποιώντας Next.js, React, Firebase & Node.js
