Зміст
Коротко
Команда 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 і порахувати, скільки кошиків губиться на тих самих порогах, що в їхньому калькуляторі втрат від повільної мобільної видачі.
Якщо умови близькі до описаних:
- Спочатку виміряйте мобільний шлях із реклами до кошика, а не лише лабораторний Lighthouse на кабелі.
- Для каталогу оцініть попередній рендер і інкрементальний кеш замість повної збірки сторінки на кожен запит.
- Платежі й вебхуки винесіть із крихкого PHP-таймауту в явні серверні обробники з перевіркою підпису.
- Ріжте борг плагінів: свій інтерфейс замість конструктора сторінок, якщо бандл уже душить INP.
- Не забудьте структуровані дані (
JSON-LD) і готовність до видачі пошуком на базі моделей — автори ставлять це поруч із мобільною швидкістю.
Підсумок
На мобільному ринку Марокко «швидкий магазин» — це не зміна логотипа фреймворка, а легший кур’єр замість перевантаженої вантажівки плагінів. Next.js 16 у TripleW показав, наскільки падають LCP і INP і як простіше стикується CMI, коли підтвердження оплати не впирається в таймаут PHP. Для схожих умов перевірка починається із заміру на 4G і одного гарячого сценарію оплати, а не з гасла терміново переїжджати на маршрутизатор застосунків.
Коментарі