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