← Все статьи

Next.js 16 вместо WordPress: магазин в Марокко на мобильном 4G

Кейс TripleW: каталог 5000 SKU с WooCommerce на Next.js 16 — LCP с 3,8 с до 680 мс и оплата через местный эквайринг без PHP-таймаутов.

Next.js 16 вместо WordPress: магазин в Марокко на мобильном 4G
Содержание

Коротко

Команда TripleW на Dev.to описала перенос высоконагруженного магазина в Марокко с WordPress/WooCommerce на Next.js 16 (Turbopack, маршрутизатор приложений) и облачный край. На мобильном 4G/3G здесь проходит больше 78% онлайн-оплат, а типичная тема с десятками плагинов даёт первую отрисовку контента за 3,5–5,2 с. После миграции каталога на 5000 SKU LCP упал с 3840 мс до 680 мс, INP — с 240 мс до 28 мс.

Что произошло

Представьте курьера, которому на узких улицах Касабланки выдали грузовик с прицепом из тридцати пяти ящиков-плагинов: пока он развернётся у подъезда, покупатель уже закрыл вкладку. Авторы пишут, что агентства в регионе по привычке ставят монолитные темы WooCommerce, а покупатель приходит с Instagram на нестабильный мобильный канал. Каждые 100 мс задержки на пути к корзине бьют по конверсии: при LCP около 1 с средняя конверсия около 3,2%, при 3,5 с — ниже 1,1%, а при 5 с и дольше больше половины мобильных визитов уходит до картинки героя.

Замер сравнивал тот же каталог на 5000 позиций: монолитный WordPress против Next.js 16 со статической генерацией через generateStaticParams и инкрементальной инвалидацией кэша на облачном крае. LCP: 3840 мс → 680 мс (−82%). INP: 240 мс → 28 мс (−88%). CLS: 0,18 → 0,00. TTFB: 850 мс → 45 мс. Поверхность атаки сузилась: вместо зоопарка PHP-плагинов — свой интерфейс без конструктора страниц.

Отдельный узел — локальный эквайринг CMI. На старом стеке ломались подтверждения вебхуков из‑за таймаутов PHP, тяжёлые перенаправления роняли мобильных пользователей на проверке 3D-Secure 2.0, а запасной путь через WhatsApp для оплаты при получении собирался руками. Через обработчики маршрутов API и серверные действия в Next.js подтверждение с криптографической проверкой подписи укладывается в миллисекунды; авторы дают отдельный разбор интеграции.

Почему это важно

В рынках, где мобильный канал — не «второй экран», а основной путь к деньгам, скорость первой отрисовки и отклика — не метрика тщеславия, а прямой рычаг выручки. Кейс полезен не лозунгом «бросить WordPress», а связкой: статика и край вместо тяжёлого PHP на каждый каталожный URL, плюс платёжный контур без таймаутов монолита.

Цифры принадлежат одному стенду и одной команде — их нельзя копировать как гарантию для любого магазина. Но порядок величин объясняет, почему агентствам в похожих условиях всё чаще тесно в теме с десятками плагинов, если половина аудитории уже ушла до героя.

На практике

Текст — полевой кейс TripleW, не универсальный рецепт миграции. Имеет смысл сверить свои LCP/INP на реальном 4G и посчитать, сколько корзин теряется на тех же порогах, что в их калькуляторе потерь от медленной мобильной выдачи.

Если условия близки к описанным:

  1. Сначала измерьте мобильный путь с рекламы до корзины, а не только лабораторный Lighthouse на кабеле.
  2. Для каталога оцените предварительный рендер и инкрементальный кэш вместо полной сборки страницы на каждый запрос.
  3. Платежи и вебхуки вынесите из хрупкого PHP-таймаута в явные серверные обработчики с проверкой подписи.
  4. Режьте долг плагинов: свой интерфейс вместо конструктора страниц, если бандл уже душит INP.
  5. Не забудьте структурированные данные (JSON-LD) и готовность к выдаче поиском на базе моделей — авторы ставят это рядом с мобильной скоростью.

Итог

На мобильном рынке Марокко «быстрый магазин» — это не смена логотипа фреймворка, а более лёгкий курьер вместо перегруженного грузовика плагинов. Next.js 16 у TripleW показал, насколько падают LCP и INP и как проще стыкуется CMI, когда подтверждение оплаты не упирается в таймаут PHP. Для похожих условий проверка начинается с замера на 4G и одного горячего сценария оплаты, а не с лозунга срочно переезжать на маршрутизатор приложений.

Комментарии

Загрузка комментариев…