Techniczne zadanie dla rozwoju strony na Shopify
Cel projektu
Stworzyć funkcjonalną i wydajną stronę na platformie Shopify, odpowiadającą nowoczesnym wymaganiom w następujących aspektach:
• Wydajność (Performance): Zgodność z zaleceniami Google PageSpeed i Core Web Vitals z wynikami nie niższymi niż 85/100.
• Dostępność (Accessibility): Zgodność z normami WCAG 2.1 na poziomie AA.
• Najlepsze praktyki (Best Practices): Optymalne wykorzystanie zasobów platformy Shopify.
• SEO-optymalizacja (SEO-readiness): Maksymalna gotowość strony do indeksacji i wysokiego rankingu w wyszukiwarkach.
1. Wydajność i optymalizacja
1.1 Minimalizacja ładowań (w miarę możliwości i w razie potrzeby, biorąc pod uwagę cechy funkcjonalności Shopify):
• Używać tylko niezbędnych skryptów CSS i JS, wykluczyć zbędny kod.
• Zapewnić Critical CSS dla przyspieszenia ładowania treści w obszarze above-the-fold.
• Wykluczyć ładowanie zewnętrznych skryptów JS w górnej części strony.
1.2 Core Web Vitals:
• Strona powinna spełniać podstawowe metryki Core Web Vitals, w tym Interaction to Next Paint (INP).
• Przeprowadzać regularne testy za pomocą Google PageSpeed i GTmetrix.
1.3 Responsywny design:
• Optymalizować stronę pod różne urządzenia (komputery stacjonarne, tablety, smartfony).
• Używać nowoczesnych technologii CSS, takich jak Flexbox i Grid.
1.4 Obrazy:
• Wsparcie dla formatu WebP i wersji 2X Retina obrazów.
• Używać responsywnych rozmiarów obrazów.
• Automatyczna optymalizacja obrazów podczas ładowania (można użyć aplikacji Shopify).
2. Dostępność (Accessibility)
2.1 WCAG 2.1 AA:
• Wdrożyć standardy dostępności WCAG 2.1 na poziomie AA dla wygody użytkowników z szczególnymi potrzebami oraz przejścia testu Google Accessibility.
• Używać semantycznych elementów HTML5 (<header>, <main>, <footer>, <section>, <article>).
• Zapewnić poprawną hierarchię nagłówków (H1, H2, H3, H4, H5…)
3. SEO-optymalizacja
3.1 Podstawowe parametry SEO:
• Używać wbudowanych narzędzi SEO Shopify lub podłączyć aplikacje (np. SEO Manager lub Plug in SEO).
• Wskazać poprawne metadane (title, description).
• Skonfigurować Open Graph do udostępniania w mediach społecznościowych.
• Automatyczne aktualizowanie XML Sitemap i jej podłączenie w robots.txt.
3.2 Schema Markup:
• Wdrożyć aktualną strukturę Schema.org dla poprawy widoczności w wyszukiwarkach.
• Zrealizować strukturę dla następujących typów treści: FAQ, Produkty, Opinie, Wideo.
• Sprawdzić poprawność za pomocą narzędzi Google Rich Results i Schema Validator.
3.3 Przekierowania:
• Zapewnić poprawne działanie 301-przekierowań dla zachowania obecnego ruchu podczas przenoszenia starej strony.
4. Nawigacja i struktura
4.1 Doświadczenie użytkownika:
• Prosta i intuicyjna nawigacja.
• Realizacja okruszków chleba (Breadcrumbs).
• Minimalizacja liczby kliknięć do osiągnięcia końcowego celu użytkownika (np. zakupu produktu).
4.2 Ważność kodu:
• Wszystkie strony powinny przechodzić weryfikację przez W3C Validator bez krytycznych błędów.
• Kod HTML, CSS i JavaScript powinien być zgodny z normami W3C.
5. Integracje i aplikacje
5.1 Rekomendowane aplikacje:
• SEO Manager lub analog do zarządzania SEO.
• Aplikacja do optymalizacji obrazów (np. TinyIMG).
• Aplikacja do automatyzacji cache i przyspieszania ładowania po uzgodnieniu na etapie końcowym.
5.2 Formy i interakcje:
• Podłączyć formularze z ochroną przed spamem przez Google reCAPTCHA.
• Możliwość integracji z botami Telegram do powiadomień (opcjonalnie).
6. Bezpieczeństwo
6.1 Środki ochrony:
• Zapewnić dostęp do strony tylko przez HTTPS z użyciem certyfikatu SSL.
• Skonfigurować automatyczne kopie zapasowe.
• Włączyć dwuetapową autoryzację dla kont administracyjnych.
6.2 Aktualizacje:
• W momencie oddania strona powinna mieć najnowsze wersje wszystkich używanych aplikacji i modułów
7. Testowanie i uruchomienie
7.1 Etapy testowania:
• Sprawdzenie wydajności przez Google PageSpeed i GTmetrix.
• Testowanie responsywności na różnych urządzeniach i przeglądarkach.
• Pełne testy funkcjonalne formularzy, przekierowań i elementów interaktywnych.
7.2 Uruchomienie:
• Zapewnić minimalną utratę indeksacji i pozycji strony podczas przejścia.
• Przeprowadzić audyt przez Google Search Console.
• Monitorowanie błędów i usuwanie wykrytych problemów w ciągu pierwszego miesiąca.
8. Cechy funkcjonalności
8.1 Przypięte menu podczas przewijania w górę
8.2 Integracja opinii z bieżącej wersji strony i import z Amazona
8.3 Dodanie możliwości upsell/cross-sell podczas dodawania do koszyka.
Behance
Freelancehunt
