Какие проблемы могут быть в карточке товара и что можно улучшить?

Что проверяют

Обычно это живое упражнение: показывают карточку или макет и смотрят, как вы её разбираете. Интервьюеру важно, видите ли вы кроме внешнего вида производительность, доступность, состояния и SEO. Следом спрашивают, как вы проверите, что улучшение сработало.

Как отвечать

Идите по слоям, а не перечисляйте всё подряд:

• производительность: главное фото обычно и есть LCP. Ему нужны srcset и sizes, AVIF или WebP, fetchpriority="high" и никакого loading="lazy", а остальные фото галереи, наоборот, ленивые. width и height или aspect-ratio убирают сдвиги макета (CLS);
• состояния: товар закончился, нужного размера нет, цена со скидкой, загрузка, ошибка добавления в корзину. На макетах часто нарисовано только идеальное состояние;
• варианты: выбранные цвет и размер хранятся в URL, чтобы ссылкой можно было поделиться, а фото и цена меняются вместе с вариантом;
• кнопка «В корзину»: мгновенная обратная связь (оптимистичное обновление, счётчик в шапке), защита от двойного клика, на мобильном кнопка закреплена внизу;
• доступность: кнопки это <button>, а не div с обработчиком, у фото осмысленный alt, галерея листается с клавиатуры, выбор размера работает как группа радиокнопок;
• данные и SEO: цена форматируется через Intl.NumberFormat, страница рендерится на сервере, в разметке JSON-LD Product с offers, чтобы поисковик показал цену и наличие;
• доверие: рейтинг и отзывы, сроки доставки и условия возврата рядом с кнопкой.

Как проверять: Lighthouse и данные реальных пользователей по Core Web Vitals (хорошие значения: LCP до 2,5 с, INP до 200 мс, CLS до 0,1), аналитика воронки от просмотра до корзины, A/B-тест для спорных изменений.

Где спотыкаются

Уходят целиком в дизайн. От фронтендера ждут технической части: вес картинок, CLS, состояния, семантика.

Предлагают улучшения без способа их измерить. «Сделаю фото крупнее» звучит как вкусовщина, пока не названа метрика.

Не уточняют контекст. Карточка маркетплейса с тысячами продавцов и карточка небольшого магазина решают разные задачи, и сильный кандидат спрашивает об этом в начале.