Вашето React или Next.js приложение става по-бавно с всяка нова версия. Пакетът нараства, изображенията се изпращат в пълен размер, скрипт на трета страна блокира първото изобразяване, списъкът се пререндира при всяко натискане на клавиш. Аз измервам кои от тези неща всъщност струват време на вашите потребители, след което поправям тези, които си струва да бъдат поправени.
Ще профилирам вашето React или Next.js приложение и ще го направя по-бързо, с числа
Lighthouse и профилиране на една страница от вашето приложение, открития, класирани по възвръщаемост.
- Една страница профилирана, класирана
Одитът, след това корекциите, които променят числата, измерени преди и след.
- Одит плюс основните корекции
- Изходен код
До 5 маршрута, рендиране и кеширане, бюджет на пакета в CI, пълно сравнение.
- Дълбок пас, до 5 маршрута
- Изходен код
Заявка за персонализирана оферта
Влезте, за да заявите персонализирана оферта
Създайте безплатен акаунт или влезте, за да заявите персонализирана оферта от този Zinner.
Вход / РегистрацияЗадайте предпродажбен въпрос
Влезте, за да зададете въпрос
За да намалите спама в платформата, предпродажбени съобщения могат да бъдат изпращани само от влезли потребители.
Създайте безплатен акаунт или влезте, за да изпратите съобщение директно на този Zinner.
Вход / РегистрацияИзисква се влизане
Създайте безплатен акаунт или влезте, за да изпратите съобщение до този Zinner.
Вход / РегистрацияИзисква се влизане
Създайте безплатен акаунт или влезте, за да заявите персонализирана оферта.
Вход / РегистрацияНакратко
Ключови детайли за тази услуга, които да ви помогнат да вземете решение. Генерирано от Zinn Hub, а не от продавача.
Позиция на стойност
Measurement Approach
Покрити рамки
Metrics Reported
Метод на доставка
Какво ще получите
Пълно описание
Поръчайте това, ако смятате, че бавните страници ви струват регистрации или трафик от търсачките и искате да запазите приложението, което имате. React и Next.js вече предлагат повечето от това, от което се нуждае едно бързо приложение, така че печалбите идват от доброто използване на тези инструменти, а не от смяна на стекове.
Получавате числа, а не прилагателни: LCP, CLS, INP и размер на пакета за маршрут, измерени преди и след на една и съща регулирана връзка, в една таблица.
Стартовият пакет е одит на една страница: изпълненията, откритията, класирани по възвръщаемост, без промяна на кода. Стандартният пакет започва от този одит и прекарва останалото време в корекциите, които променят тези числа. Разширеният пакет покрива до 5 маршрута, настройва рендирането и кеширането и оставя бюджет на пакета в CI, така че следващата версия да не може тихо да отмени работата.
Работата се извършва в клон във вашето хранилище, commit по commit, всеки със своята причина. Нищо не се разполага от мен, освен ако не го поискате.
Без обаждания. Всичко в писмен вид, включително измерванията, които не са съгласни с мен.
Стъпки за завършване на вашия проект
1. Измерете какво всъщност получават вашите потребители – Lighthouse на вашите страници на живо и сесия на React профилиране на бавните, при регулирана връзка. LCP, CLS, INP и размер на пакета за маршрут, записани преди да се докосне нещо.
2. Открийте какво струва най-много – Пакетът и мрежовата каскада: какво се изпраща, което никой не използва, какво блокира първото изобразяване, кои компоненти се пререндират и защо. Всяко откритие носи приблизителна икономия в милисекунди или килобайти.
3. Поправете го, като започнете с най-голямата печалба – Разделяне на кода, обработка на изображения и шрифтове, работа, блокираща рендирането, мемоизация, където профилиращият инструмент го изисква, извличане на данни, преместено извън критичния път. Един commit за всяка промяна, всеки със своята причина.
4. Измерете отново, едно до друго – Същите изпълнения на променената компилация: преди и след в една таблица, за маршрут и за метрика. Ако промяна е влошила нещо, таблицата го показва и промяната се отменя.
5. Предаване във вашето хранилище – Клон или пач във вашето хранилище, докладът и честен списък с това, което не съм направил и какво би струвало. Разполагането остава във вашите ръце.
Гаранция за качество на 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, който преоценява количката на сървъра и проверява подписа на уебхука на Stripe.
Двуезичен личен сайт в Next.js
Едностраничен личен сайт на английски и руски език, със секция за услуги и връзки към моите демо проекти. Проектирах и изградих го с Next.js, React и TypeScript като статичен експорт, стилизиран с обикновени CSS модули и без UI рамка. Има светли и тъмни теми, а изображение за социален преглед за всеки език се генерира по време на изграждане. GitHub Actions го изгражда и разполага в Bunny CDN, който добавя заглавки за сигурност и пренасочва www и обикновен HTTP към основния HTTPS адрес.
Подробности за услугата
Често задавани въпроси
Не, и бъдете внимателни с всеки, който го обещава, преди да види кода ви. Уиджет за плащане или рекламен скрипт могат да ограничат резултата, каквото и да правя. Одитът ви казва вашия таван и колко струва достигането му.
Не. Vite, CRA, Remix или обикновен SPA се профилират по същия начин. Различават се само специфичните за рамката корекции: разделяне на ниво маршрут и кеширане вместо режими на рендиране на Next.js.
Да. Стандартният пакет започва със същия одит и прекарва останалото време в отстраняване на откритите проблеми. Starter съществува за екипи, които ще свършат работата сами и просто трябва да знаят къде да копаят.
Одитът показва, че: времето за отговор на сървъра се показва отделно от разходите за рендиране и скриптове. Профилирането на API или заявките е добавката, в Node, Express, NestJS или Rust.
Достъп за четене до хранилището или архив на изходния код, плюс URL адреса на страницата. При Standard и Advanced аз качвам корекциите в клон, така че ми е необходимо разрешение да създам такъв. Ако предпочитате да не го давате, изпращам пач вместо това. Никога не ми е необходим достъп за разполагане.
По подразбиране на вашите активни производствени страници, така че числата да съответстват на това, което получават вашите потребители. Ако страницата е зад вход или все още не е разгърната, връзка за стейджинг, тестова сметка или стъпки за локално изпълнение, всичко работи, а докладът посочва откъде идват числата.
Отзиви на клиенти
Вижте какво казват нашите клиенти за този Zinn
Категории
Политики на Zinner
Свързани Zinns
разработване на прекрасни уеб приложения с изкуствен интелект, saas mvp със Supabase backend
Ще разработя адаптивни frontend уеб приложения, използвайки React JS и Tailwind CSS
Професионална разработка на уебсайтове с HTML, CSS, JavaScript, React от Zinn Digital®
