Многие владельцы сайтов на WordPress рано или поздно упираются в «стеклянный потолок» производительности. В этой статье я расскажу, как перевел проект с тяжеловесного конструктора Elementor на архитектуру Headless CMS с использованием SvelteKit, TypeScript и Node.js, и почему это лучшее решение для SEO в 2024 году.

Проблема: Elementor и «ожирение» веба

Типичный сайт на Elementor — это кладбище из 20+ плагинов, десятки неиспользуемых CSS-файлов и тонны JS, который блокирует основной поток.Дано:

  • Сайт-визитка с каталогом услуг.

  • Google PageSpeed: 15–20 баллов на мобильных.

  • LCP (Largest Contentful Paint): 4.5 секунды.

Решение: Разделяй и властвуй

Я предложил клиенту оставить WordPress только в качестве админки (для привычного наполнения контентом), а весь фронтенд написать с нуля на SvelteKit.

Мой стек:

  • Backend: WordPress + ACF (Advanced Custom Fields) + WP REST API.

  • Frontend: SvelteKit (Node.js адаптер).

  • Язык: TypeScript.

  • Стили: Tailwind CSS.

Техническая магия

1. Типизация данных (TypeScript + ACF)

Самая большая боль в связке с WP — это непредсказуемые ответы API. Я использовал интерфейсы для строгой типизации полей из ACF, чтобы фронтенд не «падал» при пустых данных.

typescript

// src/lib/types/project.ts
export interface Project {
    id: number;
    title: { rendered: string };
    acf: {
        description: string;
        hero_image: string;
        performance_score: number;
    };
}

Используйте код с осторожностью.

2. Загрузка данных в SvelteKit

Мы используем функцию load, чтобы получить данные на стороне сервера (SSR). Это гарантирует, что поисковики увидят готовый HTML сразу.

typescript

// src/routes/projects/[slug]/+page.server.ts
import type { PageServerLoad } from './$types';
import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params, fetch }) => {
    const res = await fetch(`https://api.yoursite.com{params.slug}`);
    const data = await res.json();

    if (!data.length) throw error(404, 'Проект не найден');

    return { project: data[0] };
};

Используйте код с осторожностью.

3. Почему SvelteKit?

В отличие от React или Vue, Svelte — это компилятор. Он не тащит тяжелый рантайм в браузер клиента. Весь код превращается в чистый и быстрый JavaScript еще на этапе сборки.

Итоги перехода

После деплоя на Node.js сервер мы получили следующие цифры:

  1. Lighthouse: 100 / 100 / 100 / 100.

  2. Вес страницы: Уменьшился с 3.5 Мб до 180 Кб.

  3. Скорость загрузки: Интерактивность наступает через 0.4 сек.

Вывод

Headless-подход — это идеальный компромисс. Клиент продолжает работать в любимом WordPress, а пользователи получают молниеносный интерфейс. Если ваш сайт на конструкторе тормозит бизнес — время переходить на SvelteKit.

Если у вас остались вопросы по реализации Headless WP или вам нужна помощь в оптимизации проекта — пишите в комментариях или в личные сообщения.