Case Study: Od kanału YouTube do sklepu i rezerwacji. Strona marki FLAT OUT
FLAT OUT to marka motorsportowa z kanałem YouTube liczącym ponad 32 tys. subskrybentów. Zamiast gotowego szablonu zbudowaliśmy dedykowany motyw WordPress, sklep WooCommerce z Przelewy24, rezerwacje Amelia, blog z filmami w lightboxie i liczniki z YouTube API. Lighthouse: Performance 99 na desktopie i 95 na mobile, SEO i Best Practices 100.
FLAT OUT to marka motorsportowa Marcina Radeckiego: kanał YouTube „radzio FLAT OUT” z ponad 32 tysiącami subskrybentów i ponad 500 filmami, a do tego szkolenia techniki jazdy, consulting i wynajem aut. Marcin jest kierowcą rajdowym, instruktorem jazdy sportowej i inżynierem samochodów klasy GT3. Widz, który obejrzy film, chce teraz kupić koszulkę, umówić konsultację albo zarezerwować termin szkolenia. Gotowy szablon z kilkunastoma wtyczkami nie zbuduje takiej drogi. Dlatego zastąpiliśmy go dedykowanym motywem WordPress z własnymi blokami edytora i sklepem WooCommerce.
Zadanie: zamienić widza z YouTube w klienta bez opuszczania marki
Założenia były cztery i każde z nich przełożyło się na konkretny element systemu:
⛔ MIT: „Do bloga, sklepu i rezerwacji wystarczy gotowy szablon i page builder” 🚫
RZECZYWISTOŚĆ: Page builder i kilkanaście wtyczek to kilkaset kilobajtów kodu na każdej podstronie i ryzyko, że aktualizacja WooCommerce rozjedzie koszyk w środku sezonu. W FLAT OUT cała logika wyglądu i działania siedzi w jednym, dedykowanym motywie. Aktualizacje WordPressa i WooCommerce jej nie nadpisują, a klient edytuje treści w natywnym edytorze Gutenberg.
Architektura systemu: co zbudowaliśmy ⚙️
Serwis flatout.pl działa na WordPressie z motywem napisanym od zera, bez page buildera. Najważniejsze elementy:
- Własne bloki edytora: hero, liczniki, sekcje i oś czasu mają dedykowane panele w Gutenbergu (treść i nagłówki, tło i media, liczniki, timeline). Klient zmienia teksty i zdjęcia na żywo w canvasie, bez dotykania kodu.
- Strona główna jako nawigator: menu z dynamicznym scrollspy prowadzi przez sekcje SZKOLENIA, CONSULTING, WYNAJEM AUT, O MNIE, WIEDZA i KALKULATOR SPRĘŻYN, a obok są przyciski sklepu i koszyka. Czerwone podkreślenie płynnie podąża za przewijaniem.
- Liczniki YouTube z jednego źródła: subskrypcje, liczba filmów i wyświetlenia pobierane są z YouTube Data API i pokazywane identycznie w nagłówku, stopce i hero. Wynik trafia do cache na 6 godzin, a gdy API zawiedzie, strona pokazuje ostatnią poprawną wartość. Bezpiecznik wstrzymuje ponowne zapytania na 15 minut, a administrator widzi w kokpicie powiadomienie po polsku z przyczyną awarii.
- Blog z filmami w lightboxie: miniatury w formacie 16:10, odtwarzacz YouTube otwierany nad treścią i znacznik odtwarzania na kafelku wpisu.
- Sklep WooCommerce na własnych szablonach: koszyk, kasa i konto klienta mają dedykowane widoki i trzyetapowy stepper (koszyk, dostawa i płatność, potwierdzenie). Płatności obsługuje Przelewy24: BLIK, szybkie przelewy online i karty.
- Rezerwacje: kalendarz Amelia na stronach konsultacji i terminów szkoleń, zintegrowany z WooCommerce.
- Historia marki: kronika 22 wydarzeń z lat 1990-2026 z 18 zdjęciami archiwalnymi, a na stronie głównej siedem kamieni milowych z efektem hover.
- Analityka we własnym kokpicie: licznik wejść z deduplikacją 15-minutową pokazuje odsłony dziś, w 7 i 30 dni, podział na urządzenia oraz ostatnie 50 wejść. Obok działa Google Site Kit z GA4.
- Zgodność i SEO: zarządzanie zgodami na cookies, komplet dokumentów (regulamin, polityka prywatności RODO, cookies, zwroty i reklamacje) oraz ręcznie ustawione metatytuły i opisy dla 14 stron w The SEO Framework.
🎯 Korzyść dla twórcy i właściciela marki:
Strona nie jest wizytówką kanału, tylko drugą połową biznesu. Widz przechodzi od filmu do wpisu, od wpisu do sklepu albo kalendarza w kilku kliknięciach, a właściciel sam aktualizuje treści i widzi w jednym kokpicie, co działa.
Wydajność i utrzymanie: twarde dane z wdrożenia 📊
Po wdrożeniu na serwer produkcyjny (LiteSpeed, PHP 8.3, HTTPS) zoptymalizowaliśmy środowisko i zmierzyliśmy efekt 3 września 2026. Później sprawdziliśmy gotową stronę w Lighthouse 13.6 (6 listopada 2026):
- Lighthouse, desktop: Performance 99, Accessibility 97, Best Practices 100, SEO 100. LCP 0,9 s, Total Blocking Time 0 ms, CLS 0,01.
- Lighthouse, mobile: Performance 95, Accessibility 97, Best Practices 100, SEO 100. Total Blocking Time 60 ms, CLS 0.
- Czas odpowiedzi strony głównej: z 2,94 s do 0,46 s (poprawa o około 84%).
- Transfer strony głównej: z 101 KB do 25,9 KB dzięki kompresji GZIP (spadek o około 75%).
- Baza danych: wyczyszczone transienty i logi, optymalizacja wszystkich 57 tabel.
- Cache: statyczny page cache oraz długie nagłówki cache dla fontów, obrazów, CSS i JS.
- Odporność na aktualizacje: cały kod wyglądu żyje w motywie, więc aktualizacje WordPressa i WooCommerce go nie nadpisują.
Masz kanał, markę albo ofertę, której strona nie nadąża obsłużyć?
Porozmawiajmy o motywie, sklepie i rezerwacjach zaprojektowanych pod Twój biznes. Bez ciężkich szablonów i bez zbędnych wtyczek.
UMÓW BEZPŁATNĄ KONSULTACJĘ →Zobacz realizację na żywo: flatout.pl, sprawdź naszą ofertę sklepów internetowych lub zajrzyj do pozostałych realizacji w portfolio MGSupport.
Najczęściej zadawane pytania
- Dlaczego dla marki z kanałem YouTube lepszy jest dedykowany motyw niż gotowy szablon z page builderem?
- Page builder i kilkanaście wtyczek dokładają kilkaset kilobajtów kodu do każdej podstrony i zwiększają ryzyko awarii po aktualizacji. Dedykowany motyw zawiera tylko to, czego marka potrzebuje, a aktualizacje WordPressa i WooCommerce go nie nadpisują.
- Jak widz z YouTube trafia do sklepu albo rezerwacji?
- Nagłówek, blog z filmami w lightboxie i sekcje strony głównej prowadzą do sklepu, konsultacji i kalendarza terminów w kilku kliknięciach. Płatności obsługuje Przelewy24 (BLIK, szybkie przelewy, karty), a terminy rezerwuje się w kalendarzu Amelia.
- Co się dzieje z licznikami YouTube, gdy API nie odpowiada?
- Strona pokazuje ostatnią poprawną wartość z API, a bezpiecznik wstrzymuje kolejne zapytania na 15 minut. Administrator widzi w kokpicie powiadomienie z przyczyną awarii, więc liczby na stronie nigdy nie znikają ani nie skaczą do wartości zastępczych.
- Czy właściciel marki może sam edytować treści?
- Tak. Hero, liczniki, sekcje i oś czasu mają dedykowane panele w edytorze Gutenberg, więc teksty i zdjęcia zmienia się na żywo, bez programisty i bez dotykania kodu.
Michał Grycz
Inżynier oprogramowania i założyciel MGSupport. Projektuje i wdraża wysokowydajne serwisy internetowe, e-commerce oraz automatyzacje.