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.