Монолітний WordPress гальмує при 5000 публікаціях? В адмінці кожен клік триває 3 секунди? Редактори втрачають терпіння, а PHP-шаблони не дають реалізувати сучасний дизайн. Вихід — headless-архітектура. Ми допомагаємо мігрувати сайти під ключ, зберігаючи SEO-позиції та скорочуючи Time to Market. На фронтенді використовуємо Next.js або Nuxt — SSR/SSG, ліниве завантаження, оптимізація Core Web Vitals. Контент-менеджери працюють у зручному інтерфейсі, а розробники вільні обирати стек.
Headless CMS відокремлює управління контентом від представлення. Міграція потребує ретельного планування: інвентаризації контенту, мапінгу типів записів, налаштування API та періоду паралельної роботи.
Оцінка до початку
Перед вибором цільової CMS проводимо аудит: інвентаризуємо кастомні типи записів, поля ACF, використовувані плагіни (WooCommerce, Events Calendar), рівень підготовки контент-команди, бюджет на ліцензії та вимоги до чернеток і preview. На основі цих даних обираємо платформу: Strapi для self-hosted, Contentful для SaaS з потужним редактором, Sanity для гнучкої схеми. Після міграції витрати на хостинг та ліцензії знижуються до 60% — середня економія складає від 2000$ до 5000$ на рік.
Як обрати Headless CMS?
Порівняємо популярні платформи:
| Критерій | Contentful | Sanity | Strapi | KeystoneJS |
|---|---|---|---|---|
| Хостинг | SaaS | SaaS/Self | Self | Self |
| Тариф | Enterprise | Стартовий | Open Source | Open Source |
| Редактор | Хороший | Відмінний | Базовий | Базовий |
| API | REST + GraphQL | GROQ + GraphQL | REST + GraphQL | GraphQL |
| Медіа | CDN включено | CDN включено | Своє сховище | Своє |
Strapi перевершує KeystoneJS за розміром спільноти в 3 рази та за кількістю готових плагінів. GraphQL API дозволяє обирати тільки потрібні поля, скорочуючи обсяг переданих даних у 2-3 рази порівняно з REST. Вартість ліцензій headless CMS в середньому в 2-3 рази нижча, ніж у корпоративних рішень. На Next.js з headless CMS LCP у 2-3 рази нижчий, ніж на класичному WordPress, що підтверджують виміри Core Web Vitals.
Етап 1: Аудит і мапінг контенту (1–2 тижні)
Інвентаризація існуючого контенту:
# Експорт з WordPress через WP-CLI
wp export --post_type=post,page,product --status=publish --path=/var/www/html
# Аналіз ACF-полів
wp acf field-group export --group_id=all --output=json > acf-fields.json
# Статистика за типами
wp post list --post_type=post --format=count
wp post list --post_type=page --format=count
Мапінг WordPress → цільова CMS:
# mapping.yaml
wordpress_types:
post:
target: blogPost
fields:
post_title: title
post_content: body (RichText)
post_excerpt: excerpt
post_date: publishedAt
_thumbnail_id: featuredImage (Asset)
categories: categories (Reference[])
tags: tags (Reference[])
acf.seo_title: seoTitle
acf.seo_description: seoDescription
product:
target: product
fields:
post_title: name
_regular_price: price (Number)
_stock_qty: stock (Number)
product_cat: categories
acf.gallery: gallery (Asset[])
Як перенести контент без втрат?
Для цього пишемо скрипти на TypeScript. Вони через WP REST API отримують записи, медіа та зв'язки, а потім відправляють їх у нову CMS через Management API. Код обробляє rate limiting, перетворює HTML на Markdown та завантажує зображення.
// scripts/migrate-from-wp.ts
import axios from 'axios';
import * as contentful from 'contentful-management';
import TurndownService from 'turndown';
const turndown = new TurndownService({ headingStyle: 'atx' });
const cmaClient = contentful.createClient({ accessToken: process.env.CMA_TOKEN! });
async function migratePosts() {
const space = await cmaClient.getSpace(process.env.SPACE_ID!);
const env = await space.getEnvironment('master');
let page = 1;
while (true) {
const { data: posts } = await axios.get(
`${WP_URL}/wp-json/wp/v2/posts?per_page=100&page=${page}&_embed`
);
if (!posts.length) break;
for (const wpPost of posts) {
await migratePost(env, wpPost);
await delay(200);
}
page++;
}
}
async function migratePost(env: any, wpPost: any) {
const featuredImageUrl = wpPost._embedded?.['wp:featuredmedia']?.[0]?.source_url;
let imageAsset;
if (featuredImageUrl) {
imageAsset = await uploadAsset(env, featuredImageUrl, wpPost.title.rendered);
}
const entry = await env.createEntry('blogPost', {
fields: {
title: { 'en-US': wpPost.title.rendered },
slug: { 'en-US': wpPost.slug },
body: { 'en-US': turndown.turndown(wpPost.content.rendered) },
excerpt: { 'en-US': wpPost.excerpt.rendered.replace(/<[^>]*>/g, '') },
publishedAt: { 'en-US': wpPost.date },
...(imageAsset && {
featuredImage: { 'en-US': { sys: { type: 'Link', linkType: 'Asset', id: imageAsset.sys.id } } },
}),
},
});
await entry.publish();
console.log(`Migrated: ${wpPost.title.rendered}`);
}
Етап 2: Налаштування нової CMS (1 тиждень)
Створення Content Types у цільовій CMS точно за мапінгом. Налаштування валідацій, локалізації, ролей. Цей етап робимо паралельно з аудитом.
Етап 3: Скрипт міграції (1–2 тижні)
Код вище — приклад для Contentful. Аналогічні скрипти пишемо для Strapi через його REST API або для Sanity через mutation API.
Етап 4: Міграція медіафайлів
// Завантажуємо та завантажуємо всі медіафайли WP
async function migrateMedia() {
const { data: media } = await axios.get(`${WP_URL}/wp-json/wp/v2/media?per_page=100`);
for (const item of media) {
const asset = await env.createAsset({
fields: {
title: { 'en-US': item.title.rendered },
description: { 'en-US': item.alt_text },
file: { 'en-US': {
contentType: item.mime_type,
fileName: path.basename(item.source_url),
upload: item.source_url,
}},
},
});
await asset.processForAllLocales();
await asset.publish();
mediaIdMap[item.id] = asset.sys.id;
}
}
Етап 5: Паралельний запуск та перемикання
- Запустити новий фронтенд на staging з реальними даними.
- Провести редизайн-рев'ю з контент-командою.
- Налаштувати автоматичну синхронізацію WordPress → нова CMS на період переходу.
- DNS-перемикання в low-traffic період.
- Відключити WordPress через 2–4 тижні після стабілізації.
Строки типової міграції
| Етап | Невеликий сайт (<500 записів) | Середній (500–5000) | Великий (5000+) |
|---|---|---|---|
| Аудит і мапінг | 1 тиждень | 1–2 тижні | 2–4 тижні |
| Налаштування CMS | 3–5 днів | 1 тиждень | 1–2 тижні |
| Скрипт міграції | 1 тиждень | 1–2 тижні | 2–4 тижні |
| Тестування | 3–5 днів | 1 тиждень | 2 тижні |
| Запуск | 1 день | 1–2 дні | 1 тиждень |
| Всього | 4–6 тижнів | 6–10 тижнів | 3–5 місяців |
Типові помилки при міграції
- Простій сайту через відсутність паралельної роботи.
- Втрата зв'язків між записами через некоректний мапінг.
- Падіння продуктивності через неоптимізовані GraphQL-запити.
- Некоректна обробка медіафайлів (дублікати, втрата alt-тегів).
Усі ці ризики ми закриваємо на етапі тестування.
Що входить у роботу?
- Аудит поточної архітектури та мапінг контенту.
- Налаштування цільової CMS (Content Types, ролі, локалізація).
- Скрипти міграції контенту та медіа.
- Налаштування автоматичної синхронізації на перехідний період.
- Розробка фронтенду на Next.js/Nuxt з урахуванням Core Web Vitals.
- DNS-перемикання та пост-міграційна підтримка.
- Документація та навчання контент-команди.
Гарантуємо збереження SEO-позицій за умови виконання наших рекомендацій. Оцінимо ваш проєкт за 2 дні. Зв'яжіться з нами для попереднього аудиту. Отримайте консультацію — ми підберемо оптимальну архітектуру та строки.