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