Specjalista ds. optymalizacji prędkości pobierania witryny

1. Ogólne informacje o projekcie Zleceniodawca: rodzinny park rozrywki w Niemczech (pełna nazwa i domena zostaną ujawnione wykonawcy po rozpoczęciu projektu) Typ projektu: pełny redesign i przebudowa strony od podstaw Aktualna strona: WordPress/Elementor, przestarzała, wymaga całkowitej wymiany Grupa docelowa: rodziny z dziećmi w wieku od 2 do 12 lat, region Niemiec z kilkoma dużymi miastami w pobliżu (15 do 20 minut samochodem) Język strony: główny niemiecki (DE), dodatkowo angielski (EN), osobna wersja językowa CMS: według uznania dewelopera, WordPress z niestandardowym motywem, Webflow lub headless CMS. Nie używać Elementora. Domena: istniejąca, przenoszona bez zmiany Termin oddania: do uzgodnienia z zleceniodawcą 2. Cele i kluczowe KPI Nowa strona powinna spełniać trzy strategiczne funkcje: Przekazywać atmosferę parku jako immersywnej przygody, nie lista usług, a zanurzenie w tematycznym świecie. Maksymalizować konwersję: odwiedzający stronę powinien dokonać rezerwacji w mniej niż 3 kliknięcia z dowolnej strony. Zapewnić doskonałe mobilne UX, ponad 60% ruchu oczekiwane z urządzeń mobilnych. KPI #1: czas do pierwszego kliknięcia "Zarezerwuj" nie więcej niż 10 sekund od momentu załadowania strony głównej KPI #2: Page Speed Score (Google PageSpeed Insights) nie mniej niż 85 na urządzeniach mobilnych, nie mniej niż 90 na desktopie KPI #3: wskaźnik odrzuceń (Bounce Rate) poniżej 45% KPI #4: poprawne wyświetlanie we wszystkich nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge) oraz na iOS/Android 3. Zakres prac 3.1 Strony i sekcje Minimalny zestaw stron: Strona główna: sekcja Hero, zapowiedź pokazu na żywo w weekendy, top 5 atrakcji, opinie Google, blok CTA Katalog atrakcji z filtrem według wieku (0 do 3 / 3 do 6 / 6 do 12 lat), karty z zdjęciami i filmami Pakiety urodzinowe, opis plus konfigurator Aktualne promocje i sezonowe wydarzenia, każde z własną wizualną kartą Ceny, tabela plus widget rezerwacji online (integracja z zewnętrznym systemem rezerwacji) Restauracja, menu i atmosfera Galeria zdjęć plus wbudowany feed Instagram O parku, zasady, FAQ (bez powielania zasad) Kontakt, mapa Google Maps, formularz kontaktowy, godziny otwarcia, klikalny telefon i email Odbicie wszystkich stron w języku angielskim 3.2 Co należy usunąć z aktualnej strony Wszystkie teksty o ograniczeniach COVID 19 (2021 do 2022), w tym stopka FAQ z pytaniami o koszty tworzenia stron internetowych (treści zewnętrzne) Przestarzały copyright, zastąpić aktualnym Niedziałające przyciski popup Elementor Przestarzałe powiadomienia o otwarciu po ograniczeniach Powielanie zasad parku w sekcji FAQ 4. Wymagania funkcjonalne P1 = krytyczne dla uruchomienia, P2 = pożądane w v1.0, P3 = możliwe poprawki później 4.1 Sekcja Hero (strona główna) P1, Fullscreen Video Hero: autoplay wideo bez dźwięku (muted, loop), 100vw na 100vh. Po kliknięciu włączenie dźwięku. Na wideo krótki slogan i przycisk CTA. P1, warstwa tekstowa nad wideo: nagłówek H1, podtytuł plus przyciski "Zarezerwuj" i "Dowiedz się więcej". Czcionka czytelna na każdym tle. P1, Sticky Navigation: pasek nawigacyjny przyczepia się na górze podczas przewijania, tło zmienia się z przezroczystego na ciemne podczas przewijania. P1, Sticky CTA Button: przycisk "Zarezerwuj" zawsze widoczny, na desktopie w nagłówku, na urządzeniach mobilnych stały pasek na dole ekranu. P2, animacje przewijania: elementy pojawiają się z animacją CSS (fade in plus slide up) podczas przewijania. Biblioteka Intersection Observer lub AOS.js. Bez ciężkich bibliotek 3D. 4.2 Atrakcje P1, karty atrakcji: zdjęcie/wideo, nazwa, krótki opis, ikona ograniczenia wiekowego, przycisk "Więcej informacji" P1, filtr według wieku: filtr klienta bez przeładowania strony, realizacja klasy CSS plus komponent vanilla JS lub Vue/React P1, szczegółowa strona atrakcji: własny URL, duże zdjęcie/wideo, pełny opis, ograniczenia wzrostu/wieku, przycisk rezerwacji P2, krótki film wideo: 15 do 30 sekundowy film dla każdej atrakcji, autoplay przy najechaniu na desktopie lub tap na urządzeniach mobilnych 4.3 System rezerwacji P1, integracja z zewnętrznym systemem rezerwacji: widget wbudowany inline (iframe lub JS embed) na stronach cen i urodzin, bez otwierania w nowej karcie P1, wieloetapowy proces rezerwacji: kreator krok po kroku, typ wizyty, data/godzina, liczba gości, potwierdzenie, obowiązkowy pasek postępu P1, wyjaśnienie slotów czasowych: blok informacyjny obok wyboru czasu P2, na żywo dostępność slotów: zapytanie API do systemu rezerwacji, wyświetlanie zajętych/wolnych slotów w czasie rzeczywistym 4.4 Konfigurator urodzinowy P1, wieloetapowy konfigurator: wiek jubilata, liczba dzieci, wybór pakietu, dodatkowe opcje, wybór daty, formularz zapytania lub bezpośrednia rezerwacja P1, dynamiczne obliczanie ceny: aktualizowane w czasie rzeczywistym przy zmianie parametrów, bez przeładowania P2, podsumowanie końcowe: zbiorcza karta wyboru na ostatnim kroku z przyciskami "Zapytaj" i "Zarezerwuj bezpośrednio" 4.5 Zaufanie i społeczna weryfikacja P1, widget Google Reviews: minimum 5 recenzji, średnia ocena, gwiazdki, umiejscowienie na stronie głównej nad blokiem CTA rezerwacji P1, feed Instagram: wbudowany feed ostatnich 9 do 12 postów przez oficjalne API lub widget, link do konta P2, licznik odwiedzających: animowany licznik 4.6 Dodatkowe bloki funkcjonalne P1, status "teraz otwarte/zamknięte": automatyczne oznaczenie na podstawie godzin otwarcia P1, klikalne kontakty: telefon i email jako aktywne linki, obowiązkowo w nagłówku i na stronie kontaktowej P2, interaktywna mapa parku: SVG lub mapa obrazkowa z klikalnymi strefami atrakcji P2, tracker obciążenia: wizualny wskaźnik oczekiwanego obciążenia parku P2, odliczanie do wydarzenia: widget odliczający do najbliższego sezonowego wydarzenia P3, osobna sekcja wieczornych wydarzeń: strona lub sekcja z własnym stylem wizualnym i przyciskiem rezerwacji 5. Wymagania niefunkcjonalne 5.1 Wydajność LCP nie więcej niż 2,5 sekundy na urządzeniach mobilnych (3G fast) CLS mniej niż 0,1 FID/INP mniej niż 100 ms Google PageSpeed Score nie mniej niż 85 mobile, nie mniej niż 90 desktop Obrazy: format WebP plus fallback JPEG, lazy loading, srcset Wideo: streaming przez CDN lub osadzenie YouTube/Vimeo, nie przechowywać ciężkich MP4 na hostingu 5.2 SEO Schema.org: LocalBusiness plus OpeningHoursSpecification plus Event Meta tagi: unikalne title (nie więcej niż 60 znaków) i description (nie więcej niż 155 znaków) na każdej stronie Hreflang dla przełącznika językowego Canonical URL na każdej stronie Sitemap.xml automatycznie generowany Skonfigurowany robots.txt 5.3 Dostępność WCAG 2.1, poziom AA jako minimalny standard Atrybuty alt obowiązkowe dla wszystkich obrazów Kontrast tekst/tło nie mniej niż 4,5 do 1 Pełna nawigacja z klawiatury Atrybuty ARIA na wszystkich interaktywnych elementach 5.4 Bezpieczeństwo HTTPS obowiązkowy, przekierowanie z HTTP DSGVO/GDPR: baner cookie (Zarządzanie zgodą), aktualna polityka prywatności Ochrona CSRF, honeypot lub reCAPTCHA v3 na wszystkich formularzach Wszystkie zależności aktualnych wersji, bez znanych luk w zabezpieczeniach 5.5 CMS i edytowalność Teksty, ceny, godziny otwarcia, zdjęcia edytowalne przez CMS bez angażowania dewelopera Tworzenie/archiwizowanie promocji i wydarzeń przez interfejs CMS Automatyczna aktualizacja feedu Instagram przez API Film instruktażowy (10 do 15 minut) dotyczący pracy z CMS, obowiązkowy deliverable 6. System designu 6.1 Paleta kolorów: głęboka zieleń jako kolor podstawowy, średnia leśna zieleń jako kolor wtórny, czerwony akcent dla CTA, jasna zieleń dla tła kart, beżowy dla akcentów teksturowych, ciemny dla tekstu głównego, biały 6.2 Typografia: wyrazista czcionka display dla nagłówków (w duchu przygody), czytelna neutralna czcionka sans serif dla tekstu głównego, minimalny rozmiar 16px body, 14px caption, wysokość linii 1,5 do 1,7 6.3 Obrazy i media: tylko prawdziwe zdjęcia, zdjęcia stockowe nie używać, format WebP, minimum 1920px dla hero, 800px dla kart, wideo hero nie dłuższe niż 30 do 60 sekund w wersji loop, wszystkie obrazy z prawem do publikacji 6.4 Animacje: efekty hover płynne (scale 1.03 na kartach), animacje przewijania fade in plus translateY, tylko transform i opacity dla przyspieszenia GPU 7. Oczekiwane wyniki Projekty w Figma: desktop plus mobilny widok wszystkich stron (desktop 1440px, mobilny 375px) Responsywna struktura: punkty przerwania 375 / 768 / 1024 / 1440px, podejście mobile first Gotowa strona na domenie stagingowej do odbioru, po zatwierdzeniu wdrożenie na domenę produkcyjną Konfiguracja CMS: wszystkie edytowalne obszary skonfigurowane, testowo wypełnione Film instruktażowy (10 do 15 minut) dotyczący zarządzania treścią Podstawowa konfiguracja SEO: meta tagi, Schema, Sitemap, podłączenie Google Search Console Instalacja Google Analytics 4 plus Google Tag Manager, konfiguracja zdarzeń (click CTA, form submit, page_view) Testowanie między przeglądarkami i urządzeniami, raport PageSpeed Insights przed oddaniem Przekazanie kodu źródłowego (repozytorium Git) zleceniodawcy po finalnej płatności 8. Kryteria akceptacji Wszystkie wymagania P1 zrealizowane i przetestowane PageSpeed Score nie mniej niż 85 mobile, potwierdzone zrzutem ekranu Poprawne wyświetlanie na iPhone (Safari), Android (Chrome), iPad, MacBook, Windows (Chrome, Edge, Firefox) Formularz rezerwacji pomyślnie wysyła zapytanie i wysyła potwierdzenie Google Reviews ładują się poprawnie Feed Instagram aktualizuje się automatycznie Wszystkie linki działają, brak błędów 404 Baner cookie zgodny z DSGVO, GDPR Treść w CMS edytowalna bez angażowania dewelopera

Potrzebna jest modernizacja nowoczesnego sklepu internetowego narzędzi elektrycznych, benzynowych i akumulatorowych z osobną platformą B2B dla partnerów, dealerów i dropshipperów. Na tym etapie chciałbym otrzymać wstępną wycenę kosztów, terminów realizacji oraz rekomendacje dotyczące technologii. (bo mam stronę na platformie Horoshop)Główna strona Trzeba przewidzieć: katalog produktów z kategoriami, markami, filtrami i wyszukiwarką; strony produktów z charakterystykami, zdjęciami, opisami, cenami i dostępnością; koszyk i składanie zamówienia; indywidualne konto klienta; adaptacyjną wersję na telefon, tablet i komputer; ustawienia SEO; możliwość samodzielnego dodawania i edytowania produktów, kategorii, stron i banerów; integracje z systemami płatności, usługami dostawy, CRM lub systemem księgowym; import i automatyczne aktualizowanie produktów, cen i stanów magazynowych.Platforma B2B Po autoryzacji partner powinien mieć dostęp do osobnego panelu, gdzie będzie mógł: widzieć indywidualne lub hurtowe ceny; przeglądać aktualne stany magazynowe produktów; tworzyć i śledzić zamówienia; przeglądać historię zamówień; widzieć statusy zamówień; przeglądać swój bilans, zadłużenie, płatności i rozliczenia; ładować faktury, dokumenty przewozowe i inne dokumenty; składać wnioski o zwrot, gwarancję lub serwis; otrzymywać powiadomienia o nowościach, promocjach i zmianach cen. Preferowane jest przewidzenie różnych typów partnerów z różnymi cenami, rabatami, limitami kredytowymi i warunkami współpracy.Część administracyjna Administrator powinien mieć możliwość: zarządzania produktami, cenami i stanami magazynowymi; tworzenia partnerów i przypisywania im indywidualnych warunków; ustawiania osobistych rabatów i limitów; przeglądania wszystkich zamówień, płatności i zadłużeń; tworzenia dokumentów; przeglądania statystyk sprzedaży; zarządzania wnioskami o serwis, zwrot i gwarancję; wysyłania wiadomości do poszczególnych partnerów lub wszystkich użytkowników platformy B2B; przydzielania praw dostępu między pracownikami.Ważne wymagania System musi być szybki, bezpieczny, wygodny dla użytkowników i odpowiedni do dalszej rozbudowy. Ważne, aby większość informacji można było zmieniać przez panel administracyjny bez ingerencji programisty. W odpowiedzi proszę wskazać: orientacyjną cenę realizacji; przybliżone terminy; zalecaną technologię lub CMS; co wchodzi w cenę; jakie integracje można zrealizować; czy oferujecie dalsze wsparcie techniczne; przykłady podobnych sklepów internetowych lub systemów B2B, które opracowaliście. Rozważam zarówno pełną realizację od podstaw, jak i wdrożenie na gotowej CMS z dalszym dopracowaniem pod wymagany funkcjonalność.

Specyfikacja techniczna dotycząca opracowania oficjalnej strony internetowej Organizacja społeczna „Federacja siatkowej piłki nożnej na siedząco Ukrainy” 1. Informacje ogólne Konieczne jest opracowanie nowoczesnej, szybkiej, bezpiecznej i responsywnej oficjalnej strony internetowej Federacji siatkowej piłki nożnej na siedząco Ukrainy. Strona powinna poprawnie działać na: komputerach; tabletach; smartfonach (Android i iPhone). Języki strony: Ukraiński (główny) Angielski 2. Projekt Styl: nowoczesny; sportowy; oficjalny; minimalistyczny. Główne kolory: niebieski; żółty; biały. Konieczne jest użycie: logo Federacji; symboliki państwowej Ukrainy; zdjęć sportowców; zdjęć weteranów; zdjęć reprezentacji narodowej. 3. Strona główna Na stronie głównej powinny być: duży baner; logo Federacji; aktualności; ostatnie wydarzenia; kalendarz zawodów; przycisk „Zostań członkiem Federacji”; przycisk „Wspieraj Federację”; przycisk „Skontaktuj się z nami”. 4. Sekcje strony O Federacji historia; misja; cele; obszary działalności; Statut (PDF); dokumenty oficjalne. Kierownictwo Osobna strona: Prezydent Wiceprezydent Zarząd Rada Nadzorcza Komisja Rewizyjna Dla każdej osoby: zdjęcie; stanowisko; krótkie biogram; kontakty. Aktualności Możliwość samodzielnego dodawania: aktualności; zdjęć; dokumentów; wideo. Kalendarz Powinien zawierać: mistrzostwa; Puchar Ukrainy; międzynarodowe turnieje; szkolenia; seminaria. Zawody Osobna sekcja: kalendarz; wyniki; tabele turniejowe; zdjęcia; wideo. Reprezentacje Ukrainy Sekcja: męska; żeńska; młodzieżowa; weterani. Regionalne ośrodki Interaktywna mapa Ukrainy. Dla każdej obwodu: kontakty; kierownik; adres; telefon. Galeria Osobne albumy: zdjęcia; wideo; turnieje; szkolenia; weterani. Dokumenty Możliwość przesyłania PDF: Statut; zarządzenia; protokoły; regulaminy; decyzje; wnioski; formularze. Partnerzy Logotypy: Ministerstwo Młodzieży i Sportu Ukrainy; Krajowy Komitet Sportu Osób Niepełnosprawnych Ukrainy; międzynarodowe federacje; sponsorzy. Kontakty Powinny być: adres; telefon; e-mail; mapa Google Maps; formularz kontaktowy. 5. Panel użytkownika Po rejestracji użytkownik powinien mieć możliwość: zmiany danych osobowych; opłacania składek członkowskich (w przyszłości); składania wniosków o udział w zawodach; otrzymywania dokumentów; przeglądania historii wniosków. 6. Panel administracyjny Administrator powinien mieć możliwość: dodawania aktualności; edycji stron; przesyłania dokumentów; tworzenia galerii zdjęć; zarządzania użytkownikami; tworzenia kalendarza wydarzeń; publikowania wyników turniejów. 7. Integracje Konieczne jest podłączenie: Facebook Instagram YouTube Telegram TikTok Również: Google Maps Google Analytics Google Search Console 8. SEO Pełna optymalizacja SEO: prawidłowe URL; META Title; META Description; Open Graph; Sitemap; Robots.txt. 9. Bezpieczeństwo Powinno być: certyfikat SSL; kopie zapasowe; ochrona przed spamem; ochrona panelu administracyjnego; uwierzytelnianie dwuskładnikowe (jeśli to możliwe). 10. Szybkość Ocena Google PageSpeed: Desktop — nie mniej niż 95 punktów. Mobile — nie mniej niż 90 punktów. 11. CMS Strona powinna być opracowana na nowoczesnym CMS (WordPress lub innym), aby pracownicy Federacji mogli samodzielnie: edytować tekst; dodawać aktualności; przesyłać dokumenty; dodawać zdjęcia; tworzyć strony bez pomocy programisty. 12. Domeny i hosting Konieczne jest: podłączenie domeny; konfiguracja hostingu; korporacyjny e-mail automatyczne kopie zapasowe. 13. Dodatkowo Przewidzieć możliwość dalszego rozwoju strony: rejestracja online sportowców; online płatności składek członkowskich; baza sportowców; baza trenerów; baza sędziów; transmisje online; elektroniczny obieg dokumentów; panel użytkownika członka Federacji; aplikacja mobilna (w przyszłości). Oczekiwany rezultat Programista powinien stworzyć nowoczesną oficjalną stronę internetową, która będzie spełniać europejskie standardy, będzie miała wysoką szybkość działania, responsywny design, wygodny system zarządzania i będzie gotowa do dalszego rozwoju Federacji siatkowej piłki nożnej na siedząco Ukrainy na poziomie krajowym i międzynarodowym.

Potrzebuję wprowadzić kilka dodatków i zmian na stronie docelowej w Framer. -- Zmień 1 słowo w nagłówku -- Zmień nagłówek i opis 1 bloku sprzedażowego -- Wyłącz dwa przyciski i zmień ich kolor na jasnoszary (aby odzwierciedlić, że nie są klikalne) -- Zmodyfikuj istniejący formularz, dodaj obowiązkowy wybór wielokrotny przed wysłaniem formularza oraz pole imienia

Cześć Trzeba stworzyć stronę na WordPressie zgodnie z projektem https://www.figma.com/design/ACsevxwJgi3TO2shYUff0S/Luminous?node-id=0-1&t=HjmWrZKKzDYSYvA1-1