Техническое задание для разработки сайта на Shopify

Цель проекта

Создать функциональный и производительный сайт на платформе Shopify, отвечающий современным требованиям в следующих аспектах:

• Производительность (Performance): Соответствие рекомендациям Google PageSpeed и Core Web Vitals с показателями не ниже 85/100.

• Доступность (Accessibility): Соответствие стандартам WCAG 2.1 уровня AA.

• Лучшие практики (Best Practices): Оптимальное использование ресурсов платформы Shopify.

• SEO-оптимизация (SEO-readiness): Максимальная готовность сайта к индексации и высокому ранжированию в поисковых системах.

1. Производительность и оптимизация

1.1 Минимизация загрузок (по возможности и при необходимости, учитывая особенности функционала Shopify):

• Использовать только необходимые CSS и JS-скрипты, исключить избыточный код.

• Обеспечить Critical CSS для ускорения загрузки контента в области above-the-fold.

• Исключить загрузку внешних JS-скриптов в верхней части страницы.

1.2 Core Web Vitals:

• Сайт должен соответствовать основным метрикам Core Web Vitals, включая Interaction to Next Paint (INP).

• Проводить регулярное тестирование через Google PageSpeed и GTmetrix.

1.3 Адаптивный дизайн:

• Оптимизировать сайт под различные устройства (десктопы, планшеты, смартфоны).

• Использовать современные технологии CSS, такие как Flexbox и Grid.

1.4 Изображения:

• Поддержка WebP-формата и 2X Retina-версий изображений.

• Использовать адаптивные размеры изображений.

• Автоматическая оптимизация изображений при загрузке (можно использовать Shopify Apps).

2. Доступность (Accessibility)

2.1 WCAG 2.1 AA:

• Внедрить стандарты доступности WCAG 2.1 уровня AA для удобства пользователей с особыми потребностями и прохождения теста Google Accessibility.

• Использовать семантические HTML5 элементы (<header>, <main>, <footer>, <section>, <article>).

• Обеспечить правильную иерархию заголовков (H1, H2, H3, H4, H5…)

3. SEO-оптимизация

3.1 Основные параметры SEO:

• Использовать встроенные SEO-инструменты Shopify или подключить приложения (например, SEO Manager или Plug in SEO).

• Указать корректные метаданные (title, description).

• Настроить Open Graph для социального шеринга.

• Автоматическое обновление XML Sitemap и её подключение в robots.txt.

3.2 Schema Markup:

• Внедрить актуальную разметку Schema.org для улучшения видимости в поисковых системах.

• Реализовать разметку для следующих типов контента: FAQ, Товары, Отзывы, Видео.

• Проверить корректность через инструменты Google Rich Results и Schema Validator.

3.3 Перенаправления:

• Обеспечить корректную работу 301-редиректов для сохранения текущего трафика при переносе старого сайта.

4. Навигация и структура

4.1 Пользовательский опыт:

• Простая и интуитивно понятная навигация.

• Реализация хлебных крошек (Breadcrumbs).

• Минимизация количества кликов для достижения конечной цели пользователя (например, покупки товара).

4.2 Валидность кода:

• Все страницы должны проходить проверку через W3C Validator без критических ошибок.

• Код HTML, CSS и JavaScript должен соответствовать стандартам W3C.

5. Интеграции и приложения

5.1 Рекомендуемые приложения:

• SEO Manager или аналог для управления SEO.

• Приложение для оптимизации изображений (например, TinyIMG).

• Приложение для автоматизации кэширования и ускорения загрузки по согласованию на финальном этапе.

5.2 Формы и взаимодействия:

• Подключить формы с защитой от спама через Google reCAPTCHA.

• Возможность интеграции с Telegram-ботами для уведомлений (опционально).

6. Безопасность

6.1 Меры защиты:

• Обеспечить доступ к сайту только через HTTPS с использованием SSL-сертификата.

• Настроить автоматические резервные копии.

• Включить двухфакторную аутентификацию для административных учетных записей.

6.2 Обновления:

• На момент сдачи сайт должен иметь крайние версии всех используемых приложений и модулей

7. Тестирование и запуск

7.1 Этапы тестирования:

• Проверка производительности через Google PageSpeed и GTmetrix.

• Тестирование адаптивности на разных устройствах и браузерах.

• Полный функциональный тест форм, редиректов и интерактивных элементов.

7.2 Запуск:

• Обеспечить минимальную потерю индексации и позиций сайта при переходе.

• Провести аудит через Google Search Console.

• Мониторинг ошибок и устранение выявленных проблем в течение первого месяца.

8. Особенности функционала

8.1 Закрепленное меню при прокрутке вверх 

8.2 Интеграция отзывов с текущей версии сайта и импорт с Амазона

8.3 Добавление возможностей upsell/cross-sell во время добавления в корзину.