Twoja aplikacja React lub Next.js zwalniała z każdą kolejną wersją. Pakiet rósł, obrazy były wysyłane w pełnym rozmiarze, skrypt zewnętrzny blokował pierwsze renderowanie, lista była ponownie renderowana przy każdym naciśnięciu klawisza. Zmierzę, które z tych problemów faktycznie kosztują Twoich użytkowników czas, a następnie naprawię te, które warto naprawić.
Przeprowadzę profilowanie Twojej aplikacji React lub Next.js i przyspieszę ją, przedstawiając konkretne liczby
Lighthouse i profiler na jednej stronie Twojej aplikacji, wyniki uszeregowane według opłacalności.
- Jedna strona sprofilowana, uszeregowana
Audyt, a następnie poprawki, które zmieniają liczby, mierzone przed i po.
- Audyt plus główne poprawki
- Kod źródłowy
Do 5 tras, renderowanie i buforowanie, budżet pakietu w CI, pełne porównanie.
- Głębokie przejście, do 5 tras
- Kod źródłowy
Poproś o ofertę niestandardową
Zaloguj się, aby poprosić o ofertę niestandardową
Utwórz bezpłatne konto lub zaloguj się, aby poprosić o spersonalizowaną ofertę od tego Zinner.
Zaloguj się / Zarejestruj sięZadaj pytanie przed zakupem
Zaloguj się, aby zadać pytanie
Aby zmniejszyć spam na platformie, wiadomości przed sprzedażą mogą być wysyłane tylko przez zalogowanych użytkowników.
Utwórz bezpłatne konto lub zaloguj się, aby wysłać wiadomość do tego Zinner bezpośrednio.
Zaloguj się / Zarejestruj sięWymagane logowanie
Utwórz bezpłatne konto lub zaloguj się, aby wysłać wiadomość do tego Zinner.
Zaloguj się / Zarejestruj sięWymagane logowanie
Utwórz bezpłatne konto lub zaloguj się, aby poprosić o spersonalizowaną ofertę.
Zaloguj się / Zarejestruj sięAt a Glance
Kluczowe szczegóły dotyczące tej usługi, które pomogą Ci podjąć decyzję. Wygenerowane przez Zinn Hub, a nie przez sprzedawcę.
Pozycja Wartości
Measurement Approach
Omówione ramy
Metrics Reported
Metoda dostawy
Co otrzymasz
Pełny opis
Zamów to, jeśli uważasz, że wolne strony kosztują Cię rejestracje lub ruch z wyszukiwarek i chcesz zachować swoją obecną aplikację. React i Next.js już dostarczają większość tego, czego potrzebuje szybka aplikacja, więc zyski wynikają z dobrego wykorzystania tych narzędzi, a nie ze zmiany stosu.
Otrzymujesz liczby, a nie przymiotniki: LCP, CLS, INP i rozmiar pakietu na trasę, mierzone przed i po na tym samym ograniczonym połączeniu, w jednej tabeli.
Starter to audyt jednej strony: uruchomienia, wyniki uszeregowane według opłacalności, bez zmian w kodzie. Standard zaczyna się od tego audytu i resztę czasu poświęca na poprawki, które zmieniają te liczby. Advanced obejmuje do 5 tras, dostraja renderowanie i buforowanie oraz pozostawia budżet pakietu w CI, aby następne wydanie nie mogło po cichu cofnąć pracy.
Praca odbywa się na gałęzi w Twoim repozytorium, commit po commicie, każdy z własnym uzasadnieniem. Nic nie jest przeze mnie wdrażane, chyba że o to poprosisz.
Bez rozmów. Wszystko na piśmie, w tym pomiary, które się ze mną nie zgadzają.
Kroki do ukończenia Twojego projektu
1. Zmierz, co faktycznie otrzymują Twoi użytkownicy – Lighthouse na Twoich stronach na żywo i sesja profilera React na tych wolnych, na ograniczonym połączeniu. LCP, CLS, INP i rozmiar pakietu na trasę, zapisane przed jakimkolwiek dotknięciem.
2. Znajdź, co kosztuje najwięcej – Pakiet i kaskada sieciowa: co jest wysyłane, czego nikt nie używa, co blokuje pierwsze malowanie, które komponenty renderują się ponownie i dlaczego. Każde odkrycie niesie ze sobą szacowane oszczędności w milisekundach lub kilobajtach.
3. Napraw to, zaczynając od największych korzyści – Dzielenie kodu, obsługa obrazów i czcionek, praca blokująca renderowanie, memoizacja tam, gdzie profiler o to prosi, pobieranie danych przeniesione poza ścieżkę krytyczną. Jeden commit na zmianę, każdy z własnym uzasadnieniem.
4. Zmierz ponownie, obok siebie – Te same uruchomienia na zmienionej kompilacji: przed i po w jednej tabeli, na trasę i na metrykę. Jeśli zmiana coś pogorszyła, tabela to pokazuje, a zmiana zostaje wycofana.
5. Przekazanie w Twoim repozytorium – Gałąź lub łatka w Twoim repozytorium, raport i uczciwa lista tego, czego nie zrobiłem i ile by to było warte. Wdrożenie pozostaje w Twoich rękach.
Gwarancja Jakości Zinner
Każdy Zinner jest sprawdzany i zatwierdzany przed dołączeniem do platformy.
Wszystkie usługi są objęte naszym zobowiązaniem do zapewnienia jakości.
Twoja płatność jest chroniona do momentu zatwierdzenia dostarczonej pracy.
Porównaj Pakiety
| Funkcja | Starter | Standard | Zaawansowane |
|---|---|---|---|
| Czas dostawy | 2 dni | 4 dni | 8 dni |
| Poprawki | 0 | 2 | 3 |
| Zakres | Jedna strona sprofilowana, uszeregowana | Audyt plus główne poprawki | Głębokie przejście, do 5 tras |
| Kod źródłowy | ✕ | ✓ | ✓ |
Portfolio
Przykłady prac sprzedawcy związanych z tym Zinnem.
Formline: sklep Next.js ze Stripe
Sklep, który możesz przeglądać: 16 plakatów w 4 kolekcjach, filtry i wyszukiwanie, które pozostają w adresie URL, koszyk, jasne i ciemne motywy oraz kasa, która kończy się zamówieniem demonstracyjnym lub prawdziwą sesją Stripe Checkout w trybie testowym. Zbudowałem go jako statyczny eksport Next.js w TypeScript z Tailwind CSS. Płatności kartą przechodzą przez Cloudflare Worker, który ponownie wycenia koszyk na serwerze i weryfikuje podpis webhooka Stripe.
Dwujęzyczna strona osobista w Next.js
Jednostronicowa strona osobista w języku angielskim i rosyjskim, z sekcją usług i linkami do moich projektów demonstracyjnych. Zaprojektowałem i zbudowałem ją za pomocą Next.js, React i TypeScript jako statyczny eksport, stylizowany za pomocą zwykłych modułów CSS i bez frameworka UI. Posiada jasne i ciemne motywy, a obraz podglądu społecznościowego dla każdego języka jest generowany w czasie kompilacji. GitHub Actions buduje i wdraża ją na Bunny CDN, który dodaje nagłówki bezpieczeństwa i przekierowuje www oraz zwykłe HTTP na główny adres HTTPS.
Szczegóły usługi
Często zadawane pytania
Nie, i bądź ostrożny z każdym, kto obiecuje to przed zobaczeniem Twojego kodu. Widget kasy lub skrypt reklamowy może ograniczyć wynik, cokolwiek bym nie zrobił. Audyt powie Ci, jaki jest Twój limit i ile kosztuje jego osiągnięcie.
Nie. Vite, CRA, Remix lub zwykłe SPA profilują się w ten sam sposób. Różnią się tylko poprawki specyficzne dla frameworka: dzielenie na poziomie tras i buforowanie zamiast trybów renderowania Next.js.
Tak. Standard zaczyna się od tego samego audytu i poświęca pozostały czas na naprawianie tego, co znalazł. Starter istnieje dla zespołów, które same wykonają pracę i potrzebują tylko wiedzieć, gdzie kopać.
Audyt pokazuje, że: czas odpowiedzi serwera jest wyświetlany oddzielnie od kosztów renderowania i skryptów. Profilowanie API lub zapytań jest dodatkiem, w Node, Express, NestJS lub Rust.
Dostęp do odczytu repozytorium lub archiwum źródła, plus URL strony. W planach Standard i Advanced wprowadzam poprawki do gałęzi, więc potrzebuję pozwolenia na jej utworzenie. Jeśli wolisz go nie udzielać, zamiast tego wysyłam łatkę. Nigdy nie potrzebuję dostępu do wdrożenia.
Domyślnie na Twoich stronach produkcyjnych, aby liczby odpowiadały temu, co otrzymują Twoi użytkownicy. Jeśli strona jest za logowaniem lub jeszcze nie została wdrożona, link do środowiska testowego, konto testowe lub kroki do uruchomienia jej lokalnie – wszystko działa, a raport wskazuje, skąd pochodzą liczby.
Opinie klientów
Sprawdź, co nasi klienci mówią o tym Zinn
Kategorie
Polityka Zinner
Powiązane Zinns
