**TL;DR.** Отличные PDP оптимизируют три вещи: (1) скорость (LCP < 1.8s, INP < 200ms), (2) ясность (галерея, вариант, кнопка покупки) и (3) доверие (отзывы, политика возврата, доставка, социальное доказательство). Каждый элемент имеет измеримый эффект на конверсию. Ставьте их целенаправленно.
## Воронка PDP
Типичная воронка электронной коммерции (отраслевые ориентиры 2025–2026):
| Шаг | Медианная конверсия | Верхний квартиль |
| ------------------------------------- | ------------------- | ----------------- |
| Просмотр PDP → добавление в корзину | 8–15% | 20–30% |
| Добавление в корзину → оформление | 50–65% | 70–80% |
| Оформление → покупка | 50–70% | 75–90% |
| **Общая конверсия просмотр PDP → покупка** | **2–4%** | **8–15%** |
Магазины, которые переходят от медианы к верхнему квартилю на каждом шаге, удваивают или утраивают доход на сессию.
## Скорость
Подробно рассмотрено в [руководстве по Core Web Vitals](/guides/core-web-vitals-ecommerce-2026). Ключевые пороги для PDP:
- LCP ≤ 1.8s (цель), ≤ 2.5s (хорошо).
- INP ≤ 150ms (цель), ≤ 200ms (хорошо).
- CLS < 0.05 (цель), ≤ 0.1 (хорошо).
Один секунды улучшения LCP на PDP обычно дает 5–15% прирост конверсии.
## Галерея и основное изображение
Первое изображение продукта — это ваш LCP. Шаблоны:
| Элемент | Лучшие практики |
| ------------------ | --------------------------------------------------------------------- |
| Размер основного изображения | 800×800px до 1200×1200px на десктопе; полная ширина экрана на мобильном |
| Формат | AVIF (с резервным вариантом WebP/JPEG) |
| Предварительная загрузка LCP | Да, `
```
**Размер**: используйте кнопки с обозначением размера.
```html
S
M
L
XL (Нет в наличии — уведомите меня)
```
Правила:
- Используйте `aria-pressed` для выбранного состояния.
- Визуально отключите варианты, которых нет в наличии; предложите "Уведомить, когда появится."
- Обновите URL, чтобы включить выбранный вариант для удобства обмена (`?variant=size-m`).
- Оптимистичный интерфейс для смены варианта (подробности в [руководстве по INP](/guides/inp-optimization-product-pages)).
## Добавление в корзину
Основной CTA. Лучшие практики:
| Элемент | Шаблон |
| ---------------------- | ---------------------------------------------------------------------- |
| Текст кнопки | "Добавить в корзину" или "Добавить в сумку" (ваша брендовая лексика) |
| Цвет | Основной цвет бренда; высокий контраст с фоном страницы |
| Размер | Полная ширина на мобильном; минимальная цель для нажатия 48×48px |
| Закрепление на мобильном | Да, прикреплено к низу при прокрутке за пределы начального экрана |
| Состояние загрузки | Индикатор загрузки в кнопке, пока сервер подтверждает; никогда не блокируйте страницу |
| Шаблон подтверждения | Слайд-в мини-корзина или уведомление; не прерывайте страницу |
| Срочность наличия | "Осталось только 3" если это правда; никогда не обманывайте |
| Цена рядом с кнопкой | Да, крупно и четко |
Антипаттерны:
- Несколько основных CTA ("Добавить в корзину" + "Купить сейчас" + "Быстрая покупка") — отвлекает внимание.
- Модальное прерывание после добавления в корзину ("Продолжить покупки или оформить заказ?") — добавляет шаг.
- Скрытая цена (принуждает прокрутить вверх, чтобы увидеть).
## Сигналы доверия
Кластер сигналов рядом с кнопкой покупки:
1. **Порог бесплатной доставки**: "Бесплатная доставка при заказе от $50" — увеличивает размер корзины.
2. **Резюме политики возврата**: "Бесплатный возврат в течение 30 дней" — снижает трение при покупке.
3. **Ожидаемая доставка**: "Прибудет в среду, 15 мая" — конкретные даты лучше диапазонов.
4. **Значки безопасности**: индикатор "Безопасная оплата" в стиле Stripe — незначительный, но накопительный.
5. **Общие звезды отзывов + количество**: "4.7 ★ из 218 отзывов" — основной сигнал доверия.
## Социальное доказательство
Эффективные шаблоны социального доказательства:
- **Выдержки из проверенных отзывов**: 2–3 отзыва над сгибом с рейтингом звезд, автором, датой.
- **Количество отзывов**: большое число (218 отзывов) более убедительно, чем просто звезды.
- **"X человек просмотрели это сегодня"**: низкопрессурная нехватка. Используйте реальные данные, а не случайные.
- **Уведомления о недавних покупках**: всплывающее окно с сообщением "Сара из Лондона купила это 3 часа назад." Реально, с согласия покупателя. Частота: каждые 30–60 секунд, максимум.
- **Фотографии, созданные пользователями**: сетка в стиле Instagram с клиентами, использующими продукт.
Избегайте:
- Фальшивых отзывов.
- Фальшивой срочности наличия ("Остался только 1!" когда их 200).
- Агрессивных таймеров обратного отсчета ("Предложение заканчивается через 3:21!").
Это приводит к обратному эффекту — современные покупатели распознают их, и доверие падает.
## Часто покупают вместе
Настоящий рычаг конверсии. Шаблон:
```
Этот продукт: Коричневая кожаная сумка через плечо $149
+ Ремень с латунной пряжкой $89
+ Кожаный кошелек $49
─────────────────────────────────────────────────────────────
Итоговая сумма: $287
[ Добавить комплект в корзину → $258 ] (экономит $29)
```
Реализация:
- Предварительно вычислите пары "часто покупают вместе" на основе совместного появления товаров в заказах + косинусного сходства на `descriptionEmbedding`.
- Реальные `` теги, указывающие на рекомендуемые продукты (доступные для SEO).
- Добавление комплекта в один клик.
## Похожие продукты
Под часто покупаемыми вместе. Используйте:
- косинусное сходство pgvector на `descriptionEmbedding`, чтобы найти похожие в той же категории.
- Опционально фильтруйте по ценовому диапазону.
- Реальные ` ` теги с `rel="related"`.
## Характеристики и описание
Длинный контент полезен для SEO и хорош для покупок с высоким уровнем рассмотрения. Структура:
```markdown
## Описание
[Полный маркетинговый текст — 2-4 абзаца]
## Характеристики
| Материал | Натуральная кожа |
| Размеры | 13" × 11" × 4" |
| Вес | 1.8 lbs |
| Фурнитура | Латунь |
| Происхождение | Сделано в Италии |
## Что в коробке
- Сумка
- Съемный плечевой ремень
- Чехол для пыли
- Инструкция по уходу
## Уход
[Инструкции по уходу]
```
Этот контент также попадает в поле `description` JSON-LD продукта, улучшая глубину богатых результатов.
## Раздел отзывов
Под разделом характеристик. Лучшие практики:
- Явно показывайте среднее значение за все время + количество.
- Гистограмма распределения (5 звезд: 67%, 4 звезды: 22%, 3 звезды: 8%, 2 звезды: 2%, 1 звезда: 1%).
- Сортировка и фильтрация (самые недавние, самые полезные, по звездам).
- Пагинация или бесконечная прокрутка (ленивая загрузка).
- Ответы на отзывы, где это уместно.
- Значок проверенной покупки.
## Как построен стандартный PDP Ordiko
- Серверная отрисовка с использованием React Server Components.
- Основное изображение LCP предварительно загружено с `priority` и `fetchPriority="high"`.
- Выбор варианта с `useOptimistic` для мгновенной обратной связи.
- Закрепление мобильного добавления в корзину при прокрутке за пределы начального экрана.
- Подтверждение слайд-в мини-корзины (без прерывания страницы).
- Сигналы доверия (бесплатная доставка, возвраты, безопасная оплата) отрисованы на стороне сервера.
- Резюме проверенных отзывов и список отзывов (топ-5 в JSON-LD).
- Часто покупаемые вместе через косинусное сходство pgvector.
- Похожие продукты в той же категории, доступные ссылки.
- Полное описание + характеристики + отзывы под сгибом.
Стандартный INP < 200ms p75 с этой настройкой.
## FAQ
**Какова самая недооцененная оптимизация PDP?**
Закрепленная кнопка добавления в корзину на мобильном, которая остается видимой во время прокрутки. На длинных PDP (которые должны быть для SEO) пользователи, прокручивающие отзывы или характеристики, нуждаются в одном нажатии, чтобы купить. Магазины, которые добавляют закрепленный CTA, обычно видят прирост мобильной конверсии на 10–20%.
**Должен ли я скрывать варианты, которых нет в наличии?**
Нет. Показывайте их визуально отключенными, но все еще присутствующими. Скрытие создает непоследовательный UX и сигнализирует, что возвращающиеся клиенты не могут найти продукт, который они покупали ранее. Отключите + 'Уведомите меня, когда появится' превращает клиентов в подписчиков по электронной почте.
**Сколько социального доказательства слишком много?**
Одно всплывающее уведомление о недавних покупках каждые 30–60 секунд кажется полезным. Каждые 5 секунд кажется манипулятивным. Постоянное "X человек просмотрели это за последние 24 часа" нормально. Чрезмерное социальное доказательство является основной причиной эрозии доверия.
**Как Ordiko подходит к UX PDP?**
Стандартный PDP Ordiko включает закрепленный мобильный CTA, предварительно загруженное основное изображение LCP, цветовые/размерные образцы с оптимистичным интерфейсом, резюме проверенных отзывов, часто покупаемые вместе (косинусное сходство pgvector на встраиваниях описания) и хлебные крошки + JSON-LD по умолчанию. INP < 200ms p75 с темой по умолчанию.