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>`, dwa srcset (1240px desktop + 640px mobile), media query `(max-width: 620px)` blokuje PSI DPR-trap. Self-hosted Inter via @fontsource (brak round-tripu do Google Fonts). CSS inlineowany (`inlineStylesheets: 'always'`) — 0 render-blocking requestów. Dwujęzyczność: EN w `src/pages/`, PL w `src/pages/pl/` — manual mirror bez i18n pluginu, prosty i przewidywalny. Dane z JSON (artworks, series, contact, about, seo). Lightbox vanilla JS — Esc, click-outside, swipe, focus trap. PSI Mobile 95+, Desktop 99-100.
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 przy tej samej jakości.
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' na 3x display.
Self-hosted font, zero FOUT
@fontsource/inter — pliki woff2 w public/assets/fonts/. Preload w `<head>`, `font-display: swap`. Brak round-tripu do Google, brak FOUT.
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
Może Cię zainteresować
Serwis przygotowania pism procesowych dla osób fizycznych — 4 typy usług, blog prawny z 9 artykułami, formularz z załącznikami i Web3Forms.
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
Wielostronicowa wizytówka apartamentu wakacyjnego — blog, galeria, formularz Web3Forms.
Durres.pl — apartament w Albanii
HTML · GSAP · SwiperTwó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.