Ваш додаток 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 та розмір бандлу для кожного маршруту, виміряні до та після на тому ж обмеженому з'єднанні, в одній таблиці.
Starter — це аудит однієї сторінки: запуски, висновки, ранжовані за вигодою, без зміни коду. Standard починається з цього аудиту і витрачає решту часу на виправлення, які змінюють ці цифри. Advanced охоплює до 5 маршрутів, налаштовує рендеринг та кешування, і залишає бюджет бандлу в CI, щоб наступний реліз не міг тихо скасувати роботу.
Робота відбувається у гілці вашого репозиторію, коміт за комітом, кожен зі своїм обґрунтуванням. Я нічого не розгортаю, якщо ви не попросите.
Без дзвінків. Все в письмовій формі, включаючи вимірювання, які не збігаються з моїми.
Кроки для завершення вашого проєкту
1. Виміряйте, що насправді отримують ваші користувачі — Lighthouse на ваших живих сторінках та сесія профайлера React на повільних, на обмеженому з'єднанні. LCP, CLS, INP та розмір бандлу для кожного маршруту, записані до того, як щось буде змінено.
2. Знайдіть, що коштує найбільше — бандл та мережевий водоспад: що надсилається, але ніхто не використовує, що блокує перший рендеринг, які компоненти перерендеринг і чому. Кожен висновок містить орієнтовну економію в мілісекундах або кілобайтах.
3. Виправте це, починаючи з найбільшого виграшу — розділення коду, обробка зображень та шрифтів, робота, що блокує рендеринг, мемоізація там, де профайлер цього вимагає, отримання даних, переміщене з критичного шляху. Один коміт на зміну, кожен зі своїм обґрунтуванням.
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 Modules без фреймворку інтерфейсу користувача. Він має світлі та темні теми, а зображення попереднього перегляду для соціальних мереж для кожної мови генерується під час збірки. GitHub Actions створює та розгортає його на Bunny CDN, який додає заголовки безпеки та перенаправляє www та звичайний HTTP на основну HTTPS-адресу.
Деталі послуги
Часті запитання
Ні, і будьте обережні з тими, хто обіцяє це, не бачивши вашого коду. Віджет оформлення замовлення або рекламний скрипт можуть обмежити оцінку, незалежно від того, що я роблю. Аудит показує вам вашу стелю і скільки коштує її досягнення.
Ні. Vite, CRA, Remix або звичайний SPA профілюються однаково. Відрізняються лише виправлення, специфічні для фреймворку: розділення та кешування на рівні маршрутів замість режимів рендерингу Next.js.
Так. Standard починається з того ж аудиту і витрачає решту часу на виправлення того, що було знайдено. Starter існує для команд, які виконуватимуть роботу самостійно і просто потребують знати, де копати.
Аудит показує, що: час відповіді сервера відображається окремо від вартості рендерингу та сценарію. Профілювання API або запитів є доповненням у Node, Express, NestJS або Rust.
Доступ для читання до репозиторію або архіву джерела, а також URL-адреса сторінки. На Standard та Advanced я надсилаю виправлення до гілки, тому мені потрібен дозвіл на її створення. Якщо ви не хочете його надавати, я надсилаю патч. Мені ніколи не потрібен доступ до розгортання.
За замовчуванням на ваших робочих сторінках, щоб цифри відповідали тому, що отримують ваші користувачі. Якщо сторінка знаходиться за логіном або ще не розгорнута, посилання на проміжну версію, тестовий обліковий запис або кроки для локального запуску — все це працює, і у звіті вказано, звідки походять цифри.
Відгуки клієнтів
Подивіться, що наші клієнти говорять про цей Zinn
Категорії
Політики Zinner
Пов'язані Zinns
Я навчатиму вас JavaScript, React, Node.js, HTML, CSS, Firebase та іншому
Розробка професійних веб-додатків за допомогою Next.js, React, Firebase та Node.js
