Etalon Translation — словацьке перекладацьке агентство, що обслуговує три мовних ринки — словацький, чеський та англійський. Коли звернулись до мене, їхній сайт був WordPress-збіркою 2019 року: шаред-хостинг, Elementor, WooCommerce-кошик для запитів на переклад (так, буквально). Працювало — поки не перестало.
Це повна історія 6-тижневої перебудови, що підняла конверсію на 34% і довела Lighthouse до 98.
Що було зламано
Три речі, що коштували грошей:
Швидкість. Середнє завантаження сторінки — 4.2 секунди. WordPress + Elementor + 14 плагінів на шаред-хостингу. Кожна сторінка вантажила повний стек jQuery, бібліотеку каруселі, якою ніхто не користувався, і три аналітичних скрипти. На мобілці — гірше: 6+ секунд на 3G.
Управління контентом. Агентство хотіло публікувати блог-пости на всіх трьох мовах. WordPress із WPML робив це можливим, але болючим: кожен переклад — окремий пост із ручною мовною прив'язкою. Команда могла писати словацькою, але публікація вимагала розробника для налаштування hreflang-тегів, виправлення слагу та очищення кешу. Вони перестали публікувати.
Конверсія. Контактна форма була WooCommerce-потоком «додати в кошик», переробленим під запити на розцінки. Користувачі буквально додавали «Послугу перекладу» в кошик, заповнювали деталі на чекауті та відправляли. Воронка плутала всіх — 88% відвал між сторінкою послуги та відправленим запитом.
Обмеження
В агентства була робоча айдентика бренду (кольори, типографіка, логотип) і наявний контент трьома мовами. Ми не переробляли бренд — ми перебудовували засіб доставки.
Бюджет фіксований. Термін — 6 тижнів від старту до продакшену, із жорстким дедлайном: в агентства конференція в Братиславі, де вони хотіли роздавати візитки з посиланням на новий сайт.
Що відвантажили
Рішення щодо стеку
Next.js 15 із SSG. Кожна сторінка пререндериться на етапі збірки. SSR не потрібен — контент змінюється максимум раз на тиждень. SSG дає TTFB менше секунди з edge-CDN Vercel, а збірка всього трьохлокального сайту займає менше 30 секунд.
SCSS Modules замість Tailwind. Брендбук агентства був детальним — конкретна шкала відступів, кольорові токени, типографічні правила. SCSS Modules дозволили відтворити бренд 1:1 через змінні з дизайн-токенами, зберігаючи стилі поруч із компонентами. Tailwind би спрацював, але точність відтворення бренду була простішою з кастомним SCSS.
next-intl для інтернаціоналізації. Три локалі (sk, cs, en) із префіксами в маршрутах, автоматичні hreflang-теги та перекладені слаги. Роутинг просто працює — etalon.sk/en/services, etalon.sk/cs/sluzby, etalon.sk/sk/sluzby. Кожна локаль отримує свій запис у sitemap. Детальніше про граблі i18n — в окремому пості.
MDX для блогу. Команда пише Markdown у простому редакторі, кидає файл у репозиторій, і сайт автоматично перезбирається по пушу. Жодних логінів у CMS, жодних баз даних, жодного скидання кешу. Кожен пост — файл .mdx із фронтматтером для заголовка, опису, дати та локалі. Переклади — окремі файли зі збіжними слагами.
Потік контактної форми
Це був головний важіль конверсії. Ми замінили WooCommerce-монстра на односторінкову контактну форму:
- Користувач обирає категорію послуги (переклад, усний переклад, локалізація)
- Поля форми адаптуються — переклад показує вихідну/цільову мову та кількість слів, усний — дату/місце
- Відправка стріляє Telegram-сповіщенням власнику агентства та підтвердженням на email користувачу
Без кошика. Без чекауту. Без «додати в кошик». Три поля до відправленого запиту. Час від лендінгу до відправки впав із 4+ хвилин до менш ніж 40 секунд.
Робота над продуктивністю
Пост про Lighthouse 98 покриває технічні деталі. Коротка версія:
- Шрифти: Самохостинг підмножини фірмового шрифту,
font-display: swap, передзавантаження в<head>. Усунув FOIT, що додавав 800ms до сприйманого завантаження. - Зображення: Всі фото продуктів/команди конвертовані в WebP через
next/image. Hero на головній зменшився з 1.2MB JPEG до 90KB WebP. - JavaScript: Аудит кожної клієнтської залежності. Прибрали jQuery (не потрібен із React), бібліотеку каруселі (замінили CSS scroll-snap) і два з трьох аналітичних скриптів (залишили тільки Plausible — приватний, 1KB скрипт).
- Інтернаціоналізація на етапі збірки: Всі переклади резолвляться при збірці, не в рантаймі. Жодних клієнтських бандлів перекладів для невикористаних локалей.
Результат: 0.8s середнє завантаження по всіх сторінках. Lighthouse 98 на мобілці.
Цифри
Шість тижнів після запуску, порівняння за той самий період трафіку:
| Метрика | До | Після | Зміна |
|---|---|---|---|
| Середнє завантаження | 4.2s | 0.8s | -81% |
| Lighthouse (мобілка) | 42 | 98 | +56 пт |
| Заповнення форми | 12% | 46% | +34 пт |
| Постів у блозі | 0/міс | 4/міс | ∞ |
| Вартість хостингу | €45/міс | €0 | -100% |
Вартість хостингу заслуговує на виноску: безкоштовний тариф Vercel справляється з цим сайтом без проблем. Агентство платило €45/місяць за шаред-хостинг, який активно гальмував їхній сайт.
+34% конверсії — це заголовкова цифра, але швидкість публікації блогу важливіша в довгостроковій перспективі. Команда перейшла від нуля публікацій (бо потрібен був розробник) до 4 постів на місяць трьома мовами. Це компаундована SEO-цінність, якої раніше не існувало.
Що здивувало
У старого сайту не було аналітики. Метрики «до» вище реконструйовані з даних Google Search Console та серверних логів доступу. Google Analytics був встановлений, але неправильно налаштований — відстежував перегляди на панелі адміністратора, а не на публічному сайті. Виявили тільки при міграції. Урок: перевіряйте аналітику до старту — вам потрібні цифри «до», щоб довести «після».
Міграція контенту — найдовша окрема задача. Копіювання тексту між системами звучить тривіально. Зайняло 8 робочих днів із 6-тижневого таймлайну. На кожній сторінці були інлайн-стилі від Elementor, биті HTML-сутності та непослідовне форматування між мовами. Я написав Node-скрипт для витягування чистого тексту з WordPress-експорту, але чеські та англійські переклади все одно потребували ручної перевірки на точність.
Агентству не потрібна була CMS. Моя початкова пропозиція включала Sanity як headless CMS. Під час дискавері я зрозумів, що реальний робочий процес команди був: написати в Google Docs → відправити розробнику → розробник публікує. MDX зберіг цей потік мінус вузьке горлечко з розробником. Вони пишуть у Docs, експортують у Markdown, комітять у репозиторій. Простіше, дешевше і на один сервіс менше для обслуговування.
Що б зробив інакше
Пропустив би кастомну SCSS-систему. Це було правильним рішенням для точності бренду, але додало ~10 годин налаштування та постійного обслуговування порівняно з Tailwind із правильним конфігом. Для наступної корпоративної перебудови — почну з Tailwind та конфіга дизайн-токенів. Точність бренду досяжна, а DX кращий.
Додав би Sentry з першого дня, а не з четвертого тижня. Ми додали Sentry у фінальному спринті для моніторингу продакшену. Зловив би два CSS-баги рендерингу на стейджингу, які знайшли вручну. Вартість раннього додавання — близька до нуля.
Наполягав би на конвертації WebP при міграції. Ми конвертували hero-зображення, але залишили частину фото внутрішніх сторінок як оптимізовані JPEG. Вони нормальні — але «нормально» не значить «98 на кожній сторінці». Повернутися і конвертувати їх зараз — тривіально, але відчувається як прибирання, яке варто було зробити одразу.
Бізнес-результат
Сайт Etalon тепер вантажиться менш ніж за секунду, публікує контент без участі розробника та конвертує відвідувачів у запити на розцінки в 3.8× ефективніше за старий. Конференція агентства відбулася через 6 тижнів після запуску — вони роздавали візитки, люди заходили на сайт, і форма запиту працювала.
Шість місяців потому сайт досі працює на безкоштовному тарифі. Жодного інциденту обслуговування. Жодного екстреного дзвінка. Агентство публікує щотижня, і їхній органічний пошуковий трафік виріс у 2.1× від базової лінії до перебудови.
Для 6-тижневого проєкту з фіксованим обсягом робіт — це результат, до якого я прагну: сайт, що працює, швидкий і не заважає клієнту.
Якщо у вас WordPress-сайт, що гальмує, важко оновлюється й втрачає конверсії — математика перебудови зазвичай сходиться. Запишіться на 20-хвилинний дзвінок, і я чесно скажу, чи підходить ваш випадок для перебудови, чи вистачить легшого рішення.