Case study
Portfolio dla współczesnej malarki
Pi Square tworzy malarstwo olejne i akrylowe w trzech cyklach twórczych. Strona miała przenieść siłę płótna do sieci — bez WordPressa, bez bloatu, z prawdziwą szybkością.
Wyzwanie
Z czym przyszedł klient
Malarka Pi Square miała istniejącą stronę na WordPress z ciężkimi JPEG-ami i wynikiem PSI Mobile poniżej 50. Galeria na 30+ obrazów ładowała się po 8 sekundach — w segmencie sztuki, gdzie pierwsze wrażenie wizualne decyduje o tym, czy kolekcjoner wróci. Dodatkowo: dwie wersje językowe (PL/EN) dla rynku polskiego i zagranicznego, lightbox do oglądania detalów obrazów w pełnej rozdzielczości, czytelna biografia artystki bez korporacyjnego tonu. Migracja z WordPressa bez straty URL-i.
Podejście
Jak to rozwiązaliśmy
Astro 6 z pełnym static outputem — zero runtime JS po stronie serwera, HTML serwowany bezpośrednio z Cloudflare Pages CDN. Strategia obrazów: AVIF primary + WebP fallback przez picture element, dwa srcset (1240px desktop + 640px mobile), media query blokuje PSI DPR-trap. Self-hosted Inter via @fontsource (brak round-tripu do Google Fonts). CSS inlineowany — 0 render-blocking requestów. Dwujęzyczność: EN w src/pages/, PL w src/pages/pl/ — manual mirror bez i18n pluginu.
Rezultaty
Co udało się osiągnąć
95+
PSI Mobile (migracja z WP < 50)
AVIF
primary format — 60% lżejszy niż JPEG
0
render-blocking requestów
EN + PL
pełna dwujęzyczność bez i18n pluginu
Zakres prac
Co zbudowaliśmy
AVIF + WebP picture elements
Każdy obraz jako picture z AVIF primary i WebP fallback. Dwa srcset: 1240px desktop + 640px mobile. Oszczędność 50-70% vs JPEG.
DPR-trap fix via source media
source media='(max-width: 620px)' wymusza 640px na mobile niezależnie od DPR urządzenia. PSI nie wyświetla błędu 'oversized images'.
Self-hosted font, zero FOUT
@fontsource/inter — pliki woff2 w public/assets/fonts/. Preload w head, font-display: swap. Brak round-tripu do Google.
CSS inlineowany w head
Astro inlineStylesheets: 'always' — cały CSS wbudowany w HTML. 0 render-blocking stylesheet requestów, LCP widzi tekst natychmiast.
Lightbox vanilla JS
30+ obrazów z możliwością oglądania w pełnej rozdzielczości (do 1920px). Klawiatura (Esc, strzałki), swipe mobile, focus trap, reduced-motion.
Bilingual EN/PL bez pluginu i18n
EN w src/pages/, PL w src/pages/pl/ — ręczny mirror. Przewidywalne URL-e, pełna kontrola nad SEO per język, zero zależności od pluginu.
Migracja z WordPress
Przeniesienie treści, obrazów i struktury z WP. Nowe AVIF generowane z oryginałów 1920px z lokalnego WP.
PSI Mobile 95+, Desktop 99-100
All audit-doctor checks pass. Speed Index < 2s na Slow 4G dzięki inlined CSS, self-hosted font i Cloudflare Pages anycast.
Stack technologiczny
Z czego jest zbudowane
Czas realizacji
niecałe 3 tygodnie
Twój projekt może być następny. Wyślij brief — przygotujemy konkretną propozycję w jeden dzień roboczy.
Wyceń podobny projektInne realizacje
Serwis przygotowania pism procesowych — 4 typy usług, blog prawny z 9 artykułami, formularz z załącznikami.
PismoProcesowe — serwis pism prawnych
React · Vite · CSS
Butikowy sklep e-commerce z hand-woven torebkami z naturalnych włókien — editorial design bez frameworków.
INARD — luxury hand-woven bags
Vanilla HTML · CSS · JS
Minimalistyczne portfolio malarki z Warszawy — galeria z lightboxem, trzy cykle twórcze, bio artystki i pełna optymalizacja PSI.
Alina Hus — portfolio malarki olejnej
Next.js 16 · Tailwind v4 · WebPTwój projekt może być następny
Masz pomysł? Zrealizujemy go.
Niezależnie czy potrzebujesz nowej strony, sklepu czy modernizacji — wyślij brief i porozmawiajmy.