Ваше приложение 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, чтобы следующий выпуск не мог незаметно отменить работу.
Работа происходит в ветке вашего репозитория, коммит за коммитом, каждый со своей причиной. Я ничего не развертываю, если вы не попросите.
Никаких звонков. Все в письменном виде, включая измерения, которые не совпадают с моими.
Шаги для завершения вашего проекта
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-модулей и без фреймворка UI. Он имеет светлую и темную темы, а изображение предварительного просмотра для социальных сетей для каждого языка генерируется во время сборки. 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
Разработка профессиональных веб-приложений с использованием Next.js, React, Firebase и Node.js
Разработка полнофункционального веб-приложения React с Node.js и базой данных
Разработка веб-приложений Figma to React - Next.js, Node.js, Firebase & Supabase
