Техническое задание для разработки сайта на 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 во время добавления в корзину.
Behance
Freelancehunt
