Ihre React- oder Next.js-App wurde mit jeder Veröffentlichung langsamer. Das Bundle wuchs, Bilder werden in voller Größe ausgeliefert, ein Drittanbieter-Skript blockiert den ersten Paint, eine Liste wird bei jedem Tastendruck neu gerendert. Ich messe, welche davon Ihre Benutzer tatsächlich Zeit kosten, und behebe dann die, die es wert sind, behoben zu werden.
Ich werde Ihre React- oder Next.js-App profilieren und sie mit Zahlen schneller machen
Lighthouse und Profiler auf einer Seite Ihrer App, Ergebnisse nach Nutzen geordnet.
- Eine Seite profiliert, gerankt
Das Audit, dann die Korrekturen, die die Zahlen bewegen, gemessen vor und nachher.
- Audit plus die wichtigsten Korrekturen
- Quellcode
Bis zu 5 Routen, Rendering und Caching, ein Bundle-Budget in CI, vollständiger Vergleich.
- Tiefer Durchlauf, bis zu 5 Routen
- Quellcode
Fordern Sie ein individuelles Angebot an
Melden Sie sich an, um ein benutzerdefiniertes Angebot anzufordern
Erstellen Sie ein kostenloses Konto oder melden Sie sich an, um ein personalisiertes Angebot von diesem Zinner anzufordern.
Anmelden / RegistrierenStelle eine Frage vor dem Kauf
Bei Zinn anmelden, um eine Frage zu stellen
Um Spam auf der Plattform zu reduzieren, können Nachrichten vor dem Verkauf nur von angemeldeten Benutzern versendet werden.
Erstelle ein kostenloses Konto oder melde dich an, um diese Zinner direkt zu kontaktieren.
Anmelden / RegistrierenAnmeldung erforderlich
Erstelle ein kostenloses Konto oder melde dich an, um diese Zinner zu kontaktieren.
Anmelden / RegistrierenAnmeldung erforderlich
Erstellen Sie ein kostenloses Konto oder melden Sie sich an, um ein personalisiertes Angebot anzufordern.
Anmelden / RegistrierenAuf einen Blick
Wichtige Details zu diesem Service, um dir bei deiner Entscheidung zu helfen. Generiert von Zinn Hub, nicht vom Verkäufer.
Wertposition
Measurement Approach
Abgedeckte Frameworks
Metrics Reported
Liefermethode
Was Sie erhalten
Vollständige Beschreibung
Bestellen Sie dies, wenn Sie glauben, dass langsame Seiten Sie Anmeldungen oder Suchverkehr kosten und Sie die App behalten möchten, die Sie haben. React und Next.js liefern bereits das meiste, was eine schnelle App benötigt, daher kommen die Gewinne aus der guten Nutzung dieser Tools, anstatt die Stacks zu wechseln.
Sie erhalten Zahlen, keine Adjektive: LCP, CLS, INP und Bundle-Größe pro Route, gemessen vor und nachher auf derselben gedrosselten Verbindung, in einer Tabelle.
Starter ist das Audit einer Seite: die Läufe, die Ergebnisse nach Nutzen geordnet, kein Code geändert. Standard beginnt mit diesem Audit und verbringt den Rest der Zeit mit den Korrekturen, die diese Zahlen bewegen. Advanced deckt bis zu 5 Routen ab, optimiert Rendering und Caching und hinterlässt ein Bundle-Budget in CI, damit die nächste Veröffentlichung die Arbeit nicht stillschweigend rückgängig machen kann.
Die Arbeit erfolgt auf einem Branch in Ihrem Repository, Commit für Commit, jeder mit seiner Begründung. Nichts wird von mir bereitgestellt, es sei denn, Sie bitten darum.
Keine Anrufe. Alles schriftlich, einschließlich der Messungen, die mir widersprechen.
Schritte zur Fertigstellung Ihres Projekts
1. Messen Sie, was Ihre Benutzer tatsächlich erhalten – Lighthouse auf Ihren Live-Seiten und eine React-Profiler-Sitzung auf den langsamen Seiten, bei einer gedrosselten Verbindung. LCP, CLS, INP und Paketgröße pro Route, notiert, bevor etwas angefasst wird.
2. Finden Sie heraus, was am meisten kostet – Das Paket und der Netzwerk-Wasserfall: Was wird ausgeliefert, das niemand verwendet, was blockiert den ersten Paint, welche Komponenten werden neu gerendert und warum. Jede Erkenntnis enthält eine geschätzte Einsparung in Millisekunden oder Kilobyte.
3. Beheben Sie es, den größten Gewinn zuerst – Code-Splitting, Bild- und Schriftartenverwaltung, render-blockierende Arbeit, Memoization, wo der Profiler es anfordert, Datenabruf vom kritischen Pfad entfernt. Ein Commit pro Änderung, jeder mit seinem Grund.
4. Messen Sie erneut, Seite an Seite – Dieselben Läufe auf dem geänderten Build: Vorher und Nachher in einer Tabelle, pro Route und pro Metrik. Wenn eine Änderung etwas verschlechtert hat, sagt die Tabelle dies und die Änderung wird rückgängig gemacht.
5. Übergabe in Ihrem Repository – Ein Branch oder Patch in Ihrem Repo, der Bericht und eine ehrliche Liste dessen, was ich nicht getan habe und was es wert wäre. Die Bereitstellung bleibt in Ihren Händen.
Zinner Qualitätsgarantie
Jeder Zinner wird überprüft und genehmigt, bevor er die Plattform beitritt.
Alle Dienstleistungen sind durch unser Qualitätssicherungsversprechen abgedeckt.
Ihre Zahlung ist geschützt, bis Sie die erbrachte Arbeit genehmigen.
Pakete vergleichen
| Funktion | Starter | Standard | Erweitert |
|---|---|---|---|
| Lieferzeit | 2 Tage | 4 Tage | 8 Tage |
| Überarbeitungen | 0 | 2 | 3 |
| Umfang | Eine Seite profiliert, geordnet | Audit plus die wichtigsten Korrekturen | Tiefer Durchlauf, bis zu 5 Routen |
| Quellcode | ✕ | ✓ | ✓ |
Portfolio
Beispiele für die Arbeit des Verkäufers im Zusammenhang mit diesem Zinn.
Formline: Next.js Store mit Stripe
Ein Schaufenster, durch das Sie klicken können: 16 Poster in 4 Kollektionen, Filter und Suche, die in der URL bleiben, ein Warenkorb, helle und dunkle Themen und ein Checkout, der in einer Demo-Bestellung oder einer echten Stripe Checkout-Sitzung im Testmodus endet. Ich habe es als Next.js statischen Export in TypeScript mit Tailwind CSS erstellt. Kartenzahlungen erfolgen über einen Cloudflare Worker, der den Warenkorb auf dem Server neu bepreist und die Webhook-Signatur von Stripe überprüft.
Zweisprachige persönliche Website in Next.js
Eine einseitige persönliche Website in Englisch und Russisch, mit einem Dienstleistungsbereich und Links zu meinen Demo-Projekten. Ich habe sie mit Next.js, React und TypeScript als statischen Export entworfen und gebaut, mit einfachen CSS-Modulen und ohne UI-Framework gestaltet. Sie hat helle und dunkle Themen, und ein Social-Preview-Bild für jede Sprache wird zur Build-Zeit generiert. GitHub Actions erstellt und stellt sie auf Bunny CDN bereit, das Sicherheits-Header hinzufügt und www und reines HTTP auf die Haupt-HTTPS-Adresse umleitet.
Servicedetails
Häufig gestellte Fragen
Nein, und seien Sie vorsichtig mit jedem, der es verspricht, bevor er Ihren Code gesehen hat. Ein Checkout-Widget oder ein Anzeigenskript kann den Score begrenzen, egal was ich tue. Das Audit sagt Ihnen Ihre Obergrenze und was es kostet, diese zu erreichen.
Nein. Vite, CRA, Remix oder eine einfache SPA werden alle auf die gleiche Weise profiliert. Nur die frameworkspezifischen Korrekturen unterscheiden sich: Splitting auf Routenebene und Caching anstelle von Next.js-Rendering-Modi.
Ja. Standard beginnt mit demselben Audit und verbringt die verbleibende Zeit damit, das Gefundene zu beheben. Starter existiert für Teams, die die Arbeit selbst erledigen und nur wissen müssen, wo sie graben müssen.
Das Audit sieht, dass: Die Server-Antwortzeit wird getrennt von den Render- und Skriptkosten angezeigt. Die Profilerstellung der API oder der Abfragen ist das Add-on, in Node, Express, NestJS oder Rust.
Lesezugriff auf das Repository oder ein Archiv des Quellcodes sowie die URL der Seite. Bei Standard und Advanced pushe ich die Korrekturen auf einen Branch, daher benötige ich die Berechtigung, einen zu erstellen. Wenn Sie diese nicht erteilen möchten, sende ich stattdessen einen Patch. Ich benötige niemals Berechtigungen zum Deployment.
Standardmäßig auf Ihren Live-Produktionsseiten, damit die Zahlen mit dem übereinstimmen, was Ihre Benutzer erhalten. Wenn die Seite hinter einem Login liegt oder noch nicht bereitgestellt wurde, funktionieren ein Staging-Link, ein Testkonto oder Schritte zur lokalen Ausführung, und der Bericht gibt an, woher die Zahlen stammen.
Kundenbewertungen
Sehen Sie, was unsere Kunden über dieses Zinn sagen
Kategorien
Zinner Richtlinien
Verwandte Zinns
