Headless-редизайн Shopify для мастерской деревянного декора — Performance 52 → 100, все четыре метрики зелёные

Mobile PageSpeed (Lighthouse), до → после пересборки.

Ключевые факты

• Клиент: Семейная мастерская из Шарлотта, NC. Зеркала и декор из массива дерева с ручной резьбой, экологичное производство.
• Объём работ: дизайн, полная разработка, техническое SEO. Headless-витрина на Astro поверх действующего Shopify — новый фронтенд, тот же Shopify-чекаут и административка.
• Стек: Astro (SSG), Shopify Storefront API (GraphQL), Vercel
• Срок: ~2 недели
• PageSpeed мобильный до → после: Performance 52 → 100, Accessibility 88 → 100, Best Practices 88 → 100, SEO 92 → 100
• Image-payload: ~6 МБ на ключевых страницах (оригиналы 3000×3000 px → srcset + CDN Shopify + WebP)
• Добавленные страницы: Workshop, Author/биография мастера, Privacy Policy, Terms, Return Policy, Shipping Details, Accessibility Statement — у старой темы было 7 страниц; новый сайт поставляется с полным доверительным и юридическим слоем
• Блог: 17 унаследованных статей → 22 живых (+5 новых корнерстоун-гайдов, опубликованных в июне 2026, под высокоинтентные поисковые запросы покупателей)

Проблема оригинальной темы

Магазин работал на популярной платной Shopify-теме — гибкой, но тяжёлой. Это давало:

• Неоптимизированные изображения: фотографии товаров в полном разрешении на любом устройстве
• Render-blocking CSS: тема грузила полный стайлшит до первого рендера
• Нет структурированных данных: ни Product, ни Offer, ни LocalBusiness для поисковиков и AI-краулеров
• Нет контроля над разметкой: canonical, hreflang и Open Graph управлялись настройками темы, а не кодом

Бренд также хотел большего — premium-сторфронт, соответствующий уровню изделий ручной работы. У платных тем есть потолок и по производительности, и по дизайну.

Решение: headless без рисков

Headless-редизайн означает, что Astro-фронтенд показывает всё, что видит покупатель, а Shopify обрабатывает всё, чем управляет владелец: чекаут, платежи, заказы, склад, email-уведомления. Владелец не меняет ни одного рабочего процесса — меняется только витрина.

Shopify Storefront API даёт все данные (товары, коллекции, варианты, цены, наличие) через GraphQL. Astro пре-рендерит страницы на этапе сборки (SSG): каждая страница — готовый HTML-файл, который Vercel отдаёт с CDN без ожидания сервера.

Работа над производительностью

Изображения — самый весомый результат. Оригинальная тема отдавала JPEG 3000×3000 px на все устройства, включая телефоны. Новый билд:

• Использует CDN-ресайзинг Shopify (параметр ?width=N к URL картинки) для подходящего размера под каждое устройство
• Генерирует srcset с 4–5 брейкпоинтами на изображение
• Конвертирует все hero- и collection-изображения в WebP
• Lazy-load для изображений ниже fold; hero-изображение preload
• Итог: ~6 МБ экономии на ключевых страницах

CSS инлайнится для above-the-fold стилей и грузится non-blocking для остального — устраняет render-blocking пенальти, который стоил оригинальной теме ~1,5 секунды First Contentful Paint.

Шрифты загружаются с font-display: swap и preconnect-хинтами. Никакого layout shift от позднего шрифта.

SSG-доставка: каждая страница (главная, коллекция, товар, блог) пре-рендерится при сборке. Vercel отдаёт с edge CDN — Time to First Byte < 50 мс глобально.

SEO и структурированные данные

Каждый тип страницы получает свою схему:

• Страницы товаров: Product, Offer, AggregateRating (при наличии отзывов)
• Главная и about: LocalBusiness, Person (биография мастера)
• Блог: Article, Person (автор)
• FAQ-блоки: FAQPage
• Навигация: BreadcrumbList

URL-структура совпадает с оригинальным магазином — ни одного потерянного URL, никаких редиректов. Автогенерируемый XML-sitemap отправляется при деплое. IndexNow пингует Bing и Yandex при появлении нового контента. Google Merchant Center product feed подготовлен для Shopping-кампаний.

Доверие, юридические аспекты и доступность

• Cookie consent с поддержкой Global Privacy Control (GPC) — обязательно для магазинов с трафиком из Калифорнии
• Ссылка CCPA «Do Not Sell or Share» в футере
• Аналитика только после согласия — GA4 активируется только после accept
• ADA / WCAG 2.1 AA: skip links, видимые focus-состояния, минимальный контраст, prefers-reduced-motion, aria-* атрибуты на всех интерактивных элементах, страница accessibility statement
• Accessibility: 100 по PageSpeed (Lighthouse, не только axe-core)

Что было поставлено

• Headless Astro-витрина
• Страницы листинга товаров и коллекций
• Карточки товаров (PDP) с выбором варианта, добавлением в корзину, корзиной-drawer
• Передача в Shopify-чекаут (нативный Shopify, без кастомного платёжного кода)
• Поиск по сайту (Pagefind)
• Фильтры коллекций по размеру, материалу, стилю
• Гибридный блог: 22 статьи (17 мигрированных из Shopify + 5 новых корнерстоун-гайдов)
• Полные структурированные данные и техническое SEO
• Cookie consent / CCPA / юридические страницы
• ADA / WCAG 2.1 AA
• Аналитика (GA4 + consent layer)
• Google Merchant Center product feed
• Деплой на Vercel с preview-окружениями

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

Headless-редизайн кажется избыточным для небольшого интернет-магазина. Но не тогда, когда фотографии изделий ручной работы и история бренда должны загружаться достаточно быстро, чтобы мобильный покупатель не ушёл. Performance 52 → 100 — это не метрика ради метрики. Это разница между страницей, которая открывается 3 секунды, и страницей, которая открывается меньше секунды на телефоне через 4G.

Shopify-чекаут остаётся на месте. Владелец работает в знакомой административке. Покупатель получает более быстрый и качественный опыт. А Google получает полный набор структурированных данных для ранжирования.

Именно так мы подходим к веб-разработке и техническому SEO для DTC-брендов. Запросить аудит роста — посмотрим, что возможно для вашего магазина.