Optymalizacja prędkości pobierania witryny

ZADANIE TECHNICZNE (ZT)na opracowanie premium landing page„Oczyszczona Woda Pitna”1. Ogólne informacje o projekcie Typ strony: Jednostronicowy premium landing page (Landing Page) z wysoką konwersją i możliwością rozbudowy do pełnoprawnej strony z blogiem/bazą wiedzy. Cel: Pozyskiwanie leadów (wnioski o konsultację), budowanie zaufania do marki poprzez emocjonalną wizualizację, fakty naukowe i prezentację wartości firmy. Platforma: Wykonawca proponuje optymalną platformę (Webflow lub WordPress + Bricks Builder) z uzasadnieniem w ofercie handlowej. Preferowane są rozwiązania zapewniające czysty kod, wysoką prędkość i premium wizualizację bez szablonowych rozwiązań.2. Grupa docelowa Rodziny (szczególnie z dziećmi), które dbają o zdrowie i jakość życia. Ludzie, którzy cenią przemyślaną kuchnię, wysokiej jakości oczyszczoną wodę i długoterminowe rozwiązania dla domu. Osoby w wieku 30–55 lat, o średnich i wyższych dochodach, które szukają niezawodnego partnera do instalacji systemu oczyszczania wody z serwisem.3. Styl wizualny i design (UI/UX) Referencja: Dołączony referencyjny makiet (zdjęcie telefonu z sekcją hero i blokiem „Wartości”). Styl powinien w pełni odpowiadać temu makietowi: czysty, jasny, premium lifestyle z ciepłymi akcentami. Paleta kolorów: Biały i jasnoszary tło (czystość), elementy naturalnego drewna lub ciepłe akcenty, słoneczno-pomarańczowe/żółte przyciski CTA, głęboki niebieski/antacyt dla tekstu. Obrazy: Wyłącznie premium lifestyle. Żywi emocjonalni ludzie (nie patrzą w kamerę), miękkie poranne światło słoneczne, naturalne kolory. Żadne sztuczne zdjęcia stockowe. Typografia: Nowoczesna, czytelna, z odpowiednią interlinią i białą przestrzenią. Profesjonalny poziom bez przeciążenia.4. Struktura landing page (6 głównych bloków)BLOK 1. Ekran główny (Hero) Wizual: Duże jasne zdjęcie na cały ekran — nowoczesna kuchnia, mama, tata, córka i synek piją czystą wodę ze szklanek, uśmiechają się, miękkie poranne słońce. Nagłówek: „Twoje zdrowie zaczyna się od łyka oczyszczonej wody pitnej.” Podtytuł: Systemy oczyszczania wody pitnej z dożywotnią obsługą serwisową dla Twojej rodziny na co dzień. Przycisk CTA: „Uzyskaj konsultację eksperta” (pomarańczowy/żółty, widoczny).BLOK 2. Nasze Wartości i Filozofia (Przemówienie założyciela) Wizual: Profesjonalne zdjęcie właściciela (smart casual, otwarty i ufny wygląd). Tekst (z referencji): NASZA MISJA Osobiste przemówienie: CTA: „Chcę być zdrowy” (przewiń do Bloku 3 lub formularza).BLOK 3. Kurs edukacyjny (Naukowe podejście) Nagłówek: Dowiedz się więcej o wodzie, którą pijesz! Format: Stylowa interaktywna siatka z 10 klikalnymi blokami/kartami. Każda karta prowadzi do osobnej strony artykułu/wideo (zalecane dla SEO) lub okna modalnego z pełnym tekstem/wideo. Uwaga: Teksty/wideo artykułów dostarcza Zamawiający. Wykonawca zapewnia wygodną strukturę i atrakcyjne wyświetlanie.BLOK 4. Oczyszczona woda pitna zmienia smak życia! (Emocjonalne dowody) 4 premium karty w siatce lub kolażu: Zdrowie: Dziewczyna pije oczyszczoną wodę. Tekst: „Odzyskuj swoje zdrowie łyk po łyku.” Barszcz / Dania: Makro barszczu z parą. Tekst: „Poczuj intensywny smak swoich potraw z oczyszczoną wodą pitną.” Kawa / Herbata: Tata parzy kawę, babcia z filiżanką herbaty. Tekst: „Odkryj prawdziwy aromat kawy i ciesz się pachnącą herbatą.” Gospodarstwo / Technika: Córka prasuje koszulę czystą parą. Tekst: „Zachowaj sprzęt na lata: idealna para bez kamienia.”BLOK 5. Kompleksowe rozwiązanie (Produkt) Wizual: Estetyczny montaż 5-stopniowego systemu odwróconej osmozy pod zlewem (czysty wygląd, bez chaosu rur) + stylowy oddzielny kranik na blacie. Tekst: Zalety poprzez końcowy rezultat dla klienta (czystość, smak, dbałość o zdrowie). Oferta: „System pod klucz + Profesjonalny montaż + Dożywotnia obsługa”.BLOK 6. Blok zaufania (Dowody społeczne i gwarancje) Główny trigger: Duża akcentująca plansza: „Jeśli jakość wody Ci się nie spodoba — zwróć system w ciągu 60 dni (0% ryzyka)”. Elementy: Karuzela opinii (wideo lub zrzuty ekranu rzeczywistych rozmów). Galeria rzeczywistych prac „Przed / Po” montażu. Logotypy / wzmianki (jeśli są).5. Wymagania funkcjonalne i techniczneFormularze i generowanie leadów Formularz konsultacji z polami: Imię, Telefon, Miasto/dzielnica, „Jaka woda masz teraz?” (lub krótkie pytanie). Integracja z botem Telegram lub CRM (do wyboru Zamawiającego).Analityka i marketing Google Analytics 4 + zdarzenie na wysłanie formularza. Meta Pixel (Facebook/Instagram). Ustawienia konwersji.Szybkość i SEO PageSpeed Insights ≥ 90 na urządzeniach mobilnych i desktopowych. Czysta semantyczna struktura, zoptymalizowane obrazy, lazy loading.Wersja mobilna Mobile-first design. Idealne wyświetlanie na iPhone i Android (referencja — makieta na telefonie).CMS i artykuły Wygodny system do dodawania i edytowania artykułów kursu (kolekcja/posty).6. Etapy realizacji i zatwierdzenia (4 etapy) Prototyp (UX-szkic): Czarno-biała schemat bloków i przycisków. Sprawdzenie logiki i akcentów. Koncepcja designu (UI): Kolorowy makiet pierwszych 3 bloków z zatwierdzonymi zdjęciami. Sprawdzenie stylu, czcionek, kolorów przycisków. Pełny design: Wizualizacja wszystkich 6 bloków. Ostateczne poprawki graficzne. Kodowanie i uruchomienie: Gotowa strona na wybranej platformie. Sprawdzenie szybkości, responsywności, działania formularzy, analityki.7. Wymagania wobec wykonawcy Doświadczenie w tworzeniu premium landing page dla produktów/usług zdrowia, ekologii, technologii lub marek lifestyle (obowiązkowe portfolio z linkami). Doświadczenie w pracy z Webflow lub Bricks Builder (obowiązkowe). Gotowość do pracy etapowej z pośrednimi zatwierdzeniami.8. Co potrzebne w ofercie handlowej Rekomendowana platforma z uzasadnieniem (Webflow / WP + Bricks). Stała cena z podziałem na etapy (lub stała + możliwe poprawki). Terminy realizacji po etapach. 2–3 odpowiednie przykłady z portfolio (linki + krótki opis). Warunki wsparcia po uruchomieniu (pierwsze 1–3 miesiące). Osoba kontaktowa i gotowość do rozmowy/spotkania w celu omówienia.9. Dodatkowe informacje Cała treść tekstowa (z wyjątkiem referencyjnych fraz) jest dostarczana przez Zamawiającego. Zdjęcia i wizualizacje: Wykonuje wykonawca, integruje i optymalizuje. Domena i hosting: Zamawiający dostarcza lub wykonawca pomaga w podłączeniu. Prawa autorskie: Po pełnej płatności wszystkie prawa do strony przechodzą na Zamawiającego.

Stworzyć analogi strony internetowej dotyczącej przewozów autobusowych jak pavluks-trans i rubikon Można na gotowym szablonie design +-

Potrzebne jest wdrożenie na stronach OpenCart (3 szt.) pełnoprawnego mechanizmu zarządzania zgodą na użycie plików cookie (Cookie Consent) oraz skonfigurowanie Google Consent Mode v2. Wymagane: zainstalowanie i skonfigurowanie CMP (Cookie Management Platform) lub innego rozwiązania do zarządzania zgodami użytkowników; wdrożenie pełnoprawnego banera Cookie Consent z możliwością akceptacji, odrzucenia oraz konfiguracji kategorii cookie; skonfigurowanie Google Consent Mode v2 za pośrednictwem Google Tag Manager; zapewnienie poprawnego przesyłania statusów zgody do Google Analytics 4, Google Ads, a także innych usług marketingowych; skonfigurowanie działania tagów analitycznych i reklamowych w taki sposób, aby uruchamiały się tylko zgodnie z uzyskanymi zgodami użytkownika. Obecnie baner cookie jest jedynie informacyjny i nie zarządza zgodami, a także nie przesyła ich statusu do usług Google. Potrzebne jest pełne skonfigurowanie zgodnie z aktualnymi wymaganiami GDPR oraz Google Consent Mode v2.

Konieczne jest dodanie 129 produktów. Jest plik z eksportem produktów, jednak standardowy import nie jest odpowiedni, ponieważ przed załadowaniem należy stworzyć strukturę katalogu: kategorie, działy i w razie potrzeby podkategorie. Następnie należy wykonać import produktów i sprawdzić, czy wszystkie karty zostały poprawnie przypisane do kategorii. Jeśli masz doświadczenie w realizacji podobnych zadań, prześlij przykłady prac, terminy realizacji i koszt.

CO TRZEBA ZROBIĆ Prace podzielone są na bloki, można zająć się wszystkim lub poszczególnymi blokami: Blok 1 — Optymalizacja prędkości (Mobile-First) Aktualna ocena mobilnej wersji PageSpeed — 51/100. Należy podnieść do 80+. Docelowe metryki: LCP < 2.5 s (obecnie 7.4 s), FCP < 1.8 s (obecnie 3.9 s), TBT < 200 ms. Prace: krytyczny CSS inline, opóźniony JS, WebP/AVIF, lazy load, audyt wtyczek. Blok 2 — GTM i analityka Usunąć hardcoded skrypty GA4/Google Ads z header.php. Zainstalować i skonfigurować wtyczkę GTM4WP. Wdrożyć Google Consent Mode v2 (skrypt lub cookie-banner). Blok 3 — Szablon karty produktu Jedyny Mobile-First szablon Single Product w Elementorze. Sticky przycisk „Kup” podczas przewijania na urządzeniach mobilnych. Cross-sell blok usług pod przyciskiem zakupu. Sprawdzenie automatycznego przesyłania zdarzeń view_item, add_to_cart przez GTM4WP. Blok 4 — Feed produktowy dla Google Merchant Center Zainstalować Product Feed Pro (AdTribes) lub CTX Feed. Skonfigurować XML-feed z poprawnym mapowaniem pól (id, title, gtin, brand, price, availability). Codzienne aktualizacje przez WP-Cron, automatyczne wykluczanie produktów „brak w magazynie”. Blok 5 — 6 stron docelowych (landingów) w Elementorze 3 strony e-commerce: katalog komponentów, gotowe rozwiązania UPS, zestawy SES. 3 strony lead generation: montaż UPS pod klucz, SES dla domu, rozwiązania dla biznesu. Istnieją szczegółowe prototypy ze strukturą i blokami każdej strony. Blok 6 — Formy i zdarzenia dataLayer 6 unikalnych zdarzeń dataLayer przy pomyślnym przesłaniu formularzy (CF7 i Elementor Pro Forms). Wymagania obowiązkowe dla wszystkich formularzy: maska wprowadzania telefonu, ochrona przed ponownym przesłaniem, reCAPTCHA v3 lub Honeypot. --- WYMAGANIA — Praktyczne doświadczenie z Elementor Pro (szablony Single Product, niestandardowe Page Templates) — Zrozumienie WooCommerce dataLayer i działania GTM4WP — Doświadczenie w optymalizacji prędkości WordPress (Critical CSS, WebP, WP Rocket lub analogiczne) — Doświadczenie w konfiguracji zdarzeń dataLayer dla CF7 lub Elementor Pro Forms — Portfolio lub przykłady podobnych prac — obowiązkowo Znajomość Google Consent Mode v2 będzie atutem. --- WARUNKI PRACY Strona na produkcyjnym hostingu — wszystkie zmiany tylko przez staging lub testowy duplikat. Jakakolwiek optymalizacja nie powinna naruszać inicjalizacji GTM i dynamicznego dataLayer. Szczegółowe wymagania zostaną przekazane po pierwszym kontakcie. Wynagrodzenie etapowe według bloków lub za cały projekt (dogadamy się) Napisz w odpowiedzi: 1. Twoje doświadczenie z podobnymi zadaniami (link lub krótki opis przypadku) 2. Czy jesteś gotów wykonać cały projekt czy poszczególne bloki 3. Orientacyjny koszt i terminy po zapoznaniu się z wymaganiami