Ciocia Ania Animacje – Wdrożenie produkcyjne i optymalizacja wydajności
Kompleksowa budowa i wdrożenie produkcyjne strony od zera dla animatorki dziecięcej działającej we Wrocławiu, Oleśnicy i na całym Dolnym Śląsku — od przygotowania treści i zdjęć, przez pełne SEO i dostępność, po strojenie wydajności aż do perfekcyjnych wyników Lighthouse. Zero kompromisów w szczegółach: od poprawnego kontrastu kolorów po eliminację przesunięć layoutu.
Strona dla animatorki dziecięcej
Ciocia Ania Animacje to indywidualna działalność animatorska — urodziny, wesela, pikniki, festyny i eventy firmowe dla dzieci, z pełną ofertą atrakcji (face painting, tatuaże brokatowe, bańki XXL, pokazy magiczne, maskotki i wiele więcej) na terenie Wrocławia, Oleśnicy i całego Dolnego Śląska.
Strona (React + TypeScript + Vite + Tailwind + Framer Motion) została zbudowana od zera — klientka nie miała wcześniej żadnej własnej strony internetowej. Zadaniem było przygotowanie treści i materiałów wizualnych, wdrożenie produkcyjne oraz techniczne dopieszczenie pod SEO, dostępność i wydajność.
Branża
Animacje dla dzieci
Technologie
React, TypeScript, Vite, Tailwind CSS, Framer Motion
Zakres
Uzupełnienie treści i galerii, SEO, dostępność (WCAG AA), optymalizacja wydajności, wdrożenie produkcyjne, konfiguracja hostingu i DNS
Rok realizacji
2026
Jakie były założenia projektu?
Projekt wymagał realnych zdjęć zamiast placeholderów użytych na etapie budowy, pełnego SEO pod kątem lokalnej działalności, oraz dociągnięcia wydajności i dostępności do najwyższego poziomu — bez utraty efektownych animacji, które klientka już zaakceptowała. Do tego doszło uruchomienie na docelowej domenie produkcyjnej wraz z pełną konfiguracją DNS, SSL i hostingu OVH.
Uzupełnienie galerii (19 zdjęć) i 12 maskotek w wysokiej rozdzielczości, z miniaturkami (thumbs) i osobnymi wersjami mobile/desktop pod maksymalną prędkość ładowania.
Pełne SEO: dane strukturalne (schema.org LocalBusiness), sitemap, robots.txt, llms.txt/llms-full.txt pod boty AI (strona to SPA renderowane w JS — bez tego boty niewykonujące JS widziałyby pustą stronę).
Dostępność WCAG AA — poprawiony kontrast tekstu w kilku miejscach, odpowiedni rozmiar obszarów dotykowych.
Wydajność: self-hosted fonty (zamiast Google Fonts), cache-control, priorytetyzacja ładowania obrazu LCP, eliminacja przesunięć layoutu (CLS) wynikających z podmiany fontów.
Uruchomienie produkcyjne: DNS, wymuszenie HTTPS, przekierowanie www → bez www, aktywacja SSL na hostingu OVH.
Co zostało wykonane?
Treść i galeria
Podpięcie pełnej galerii zdjęć (masonry, pion i poziom przeplecione dla naturalnego układu) z miniaturkami (thumbs) dla maksymalnej prędkości ładowania, oraz 12 maskotek z osobnymi miniaturami i zdjęciami w powiększeniu. Nowa podstrona polityki prywatności zgodna z RODO.
SEO | GEO | AIO
Sitemap, robots.txt, dane strukturalne schema.org (LocalBusiness), weryfikacja Google Search Console, oraz llms.txt/llms-full.txt — pełna treść strony w czystym tekście dla botów AI, które nie renderują JavaScriptu.
Dostępność
Kontrast tekstu podniesiony do WCAG AA w kilku komponentach, powiększone obszary dotykowe elementów interaktywnych, poprawne atrybuty width/height na obrazach.
Wydajność
Self-hosted fonty zmiennoprzecinkowe (Baloo 2, Nunito) z podzbiorem latin-ext pod polskie znaki, cache-control dla plików statycznych, fetchpriority="high" i jawne wymiary na obrazie LCP, miniaturki (thumbs) w galerii zamiast pełnych zdjęć oraz osobne, lżejsze wersje zdjęć na mobile.
Stabilność wizualna
Wyeliminowanie przesunięć layoutu (CLS) powodowanych przez podmianę fontu w trakcie ładowania — zamiana font-display: swap na optional dla nagłówków.
Wdrożenie produkcyjne
Konfiguracja i uruchomienie na domenie produkcyjnej, .htaccess z wymuszeniem HTTPS i przekierowaniem www → bez www, diagnostyka i naprawa DNS/SSL na hostingu OVH (zły rekord A, wygasła zaślepka przekierowania, aktywacja certyfikatu).
Google Firma i Search Console
Założenie i konfiguracja profilu Google Firma (GBP) oraz Google Search Console — w cenie projektu jako wsparcie przy starcie. Dalsze wypełnianie treścią i zdjęciami po stronie klientki.
Wykorzystane technologie
Strona zbudowana jest w oparciu o nowoczesny stos React, zoptymalizowany pod kątem wydajności i pełnej responsywności — z dopracowanymi animacjami Framer Motion, które nie odbijają się na wynikach Core Web Vitals.
Wynik audytu Google PageSpeed Insights
Pełne dopracowanie wydajności, dostępności, SEO i sprawdzonych metod — bez utraty efektownych animacji wejścia, kart-blobów ze zdjęciami czy interaktywnej galerii.
Mobile Performance
Desktop Performance
SEO
Przeglądanie agentowe (AI)
Desktop Lighthouse
Mobile Lighthouse
Strona osiąga maksymalny wynik 100/100 na desktopie we wszystkich czterech kategoriach audytu (Wydajność, Ułatwienia dostępu, Sprawdzone metody, SEO) oraz 94/100 w kategorii wydajności na urządzeniach mobilnych (FCP 2,1s, LCP 2,8s, TBT 30ms, CLS 0) przy 100/100 w pozostałych trzech kategoriach — bez rezygnacji z efektownych animacji Framer Motion.
Efekty widoczności w sieci
Strona wystartowała produkcyjnie na docelowej domenie z pełnym SEO i poprawnie skonfigurowanym SSL. Klientka miała już obecność na Facebooku i Instagramie — dołożyłem do tego własną stronę www, profil Google Firma i Google Search Console, w pełni skonfigurowane i gotowe do monitorowania. Dziś strona została zaindeksowana w Google — wyniki widoczności pojawią się tutaj, gdy tylko zbiorę dane.
Rezultat projektu
Projekt Ciocia Ania Animacje pokazuje, że dopracowanie strony "do setki" nie musi oznaczać rezygnacji z efektownych animacji czy charakterystycznego designu — kluczem jest precyzyjna diagnoza (np. animacja blokująca LCP, maska CSS niewczytywana w webview Messengera, zły rekord DNS) i chirurgiczne poprawki zamiast kompromisów.
Klientka nie miała własnej strony internetowej — jedyną obecnością w sieci był profil na Facebooku i Instagramie.
Własna strona internetowa zbudowana od zera, w pełni wdrożona produkcyjnie z kompletną galerią, pełnym SEO (w tym pod boty AI) i WCAG AA, wynikami Lighthouse 100/100/100/100 (desktop) i 94/100/100/100 (mobile) — a do istniejącego Facebooka i Instagrama dołożyłem profil Google Firma i Google Search Console.
Podoba Ci się ten efekt?
Zapraszam do kontaktu!