![PiheLux: Luxus Webshop 100/100 Lighthouse Pontszámmal — 1 Hét Alatt [Esettanulmány]](/_next/image?url=%2Fimages%2Fblog%2Fpihelux-case-study-webshop.webp&w=3840&q=75)
PiheLux: Luxus Webshop 100/100 Lighthouse Pontszámmal — 1 Hét Alatt
TL;DR: A PiheLux prémium textil webshop Next.js 15 + React 19 + Tailwind CSS 4 alapokon készült, 7 nap alatt. Az eredmény: 100/100 Lighthouse Performance, Accessibility, Best Practices és SEO kategóriában egyaránt. Ez nem véletlen — hanem tervezési döntések sorozatának következménye. Ebben a cikkben végigmegyünk az egész folyamaton.
Projekt háttér: Ki a PiheLux?
A PiheLux egy prémium minőségű magyar textil webshop, amely exkluzív párnákat, paplanokat és ágyneműket kínál. Az ügyfél pontosan tudta, mit akar: egy olyan webshop, amely vizuálisan is tükrözi a termékek prémium mivoltát — fehér tér, letisztult tipográfia, nagy képek — miközben villámgyorsan tölt be.
A megbeszélés elején elhangzott az igény: „Próbáltunk már Shopify-t, de lassú volt, és nem tudtuk úgy testreszabni, ahogy szerettük volna." Ez egy tipikus helyzet, amellyel rendszeresen találkozunk. A SaaS platformok kényelmet kínálnak, de a sebesség és a designszabadság terén komoly kompromisszumokkal járnak.
Kihívások: Mit kellett megoldani?
A négy fő kihívás:
- Luxus brandhez illő, egyedi vizuális design nagyfelbontású képekkel
- Maximális betöltési sebesség — annak ellenére, hogy sok a kép
- Tökéletes mobil UX egy olyan szegmensben, ahol a vásárlók 70%-a mobilról böngészik
- Webshop funkciók: terméklistázás, szűrés, kosár, Stripe fizetés integráció
Az eredmények — Számokban
Technológiai döntések: Miért nem Shopify vagy WooCommerce?
Ez az egyik leggyakoribb kérdés, amit ügyfeleinktől kapunk. A válasz egyszerű, de sokaknak meglepő: a Shopify és a WooCommerce strukturálisan képtelen 100/100 Lighthouse-t elérni. Nem azért, mert rossz platformok — hanem mert a rugalmasságuk ára a teljesítmény.
| Szempont | Shopify / WooCommerce | Next.js (egyedi) |
|---|---|---|
| Lighthouse Performance | 40–70 (tipikusan) | 90–100 elérhető |
| Designszabadság | Korlátozott (témák) | Teljes |
| Third-party scriptek | Sok (analytics, chat, stb.) | Csak amit te adsz hozzá |
| Havidíj | 29–299 USD/hó platform + bővítmények | Csak tárhely (~5–10 USD) |
| SEO alap | Közepes | Kiváló (SSG/ISR) |
A Next.js App Routerrel minden terméklap statikusan generálható (SSG), így a keresőmotorok számára azonnal indexelhető, és a betöltési idő 100 ms alá süllyed. A dinamikus funkciók (kosár, szűrés) Server Components és Client Components okos szétválasztásával valósulnak meg.
A fejlesztés folyamata — Nap nap után
A 14 napos garanciánkat a PiheLux projektnél 7 napra teljesítettük. Íme, hogyan alakult a hét:
1–2. nap: Design és architektúra
Moodboard, colorpalette meghatározása (fehér, krémszín, arany akcentusok). Figma wireframe-ek a főoldalra, terméklistára és terméklapra. A Next.js projekt scaffolding és a Tailwind CSS 4 konfigurálása a luxus designhoz igazítva.
3–4. nap: Fejlesztés
Terméklistázó oldal kategória- és árazás alapú szűréssel. Dinamikus terméklapok (generateStaticParams). Stripe Checkout integráció, kosárkezelés Zustand-dal. A képek next/image-mel: automatikus WebP konverzió, responsive srcset, lazy loading. Minden egyedi SVG ikon — nulla icon font betöltése.
5–6. nap: Tartalom, SEO és tesztelés
Strukturált adat (JSON-LD Product schema) minden termékhez. Meta title és description optimalizálás. Open Graph képek dinamikus generálása (next/og). Lighthouse audit és finomhangolás: kritikus CSS inlining, font swap optimalizálás, preconnect/preload direktívák.
7. nap: Launch
modern infrastruktúra deploymentje custom domain-nel, SSL-lel. Végleges Lighthouse audit: 100/100/100/100. Átadás, ügyfél-tréning, monitorozás beállítása. Az ügyfél reakciója: „Nem hittem, hogy ez lehetséges. A Shopify-os verziónk 54-es pontszámot kapott."
Teljesítmény adatok: Core Web Vitals
A Lighthouse pontszámok mögött konkrét Core Web Vitals értékek állnak. A PiheLux esetében mért eredmények:
Ezek az értékek nem csupán technikai mérőszámok. A Google 2021 óta rangsorolási faktorként veszi figyelembe a Core Web Vitals eredményeket. Egy 0.8 másodperces LCP és nulla CLS közvetlenül javítja az organikus keresési pozíciókat.
SEO eredmények 3 hónappal a launch után
A technikai alap önmagában nem elegendő — de egy erős technikai alap drámaian felgyorsítja a SEO eredményeket. A PiheLux esetében, 3 hónappal a launch után:
- Az összes terméklap Google által indexelve 72 órán belül (SSG + XML sitemap)
- 5 prémium textil kulcsszóra az első oldalra kerülés organikusan
- A webshop átlagos Google PageSpeed mobilon: 94/100 (valós felhasználói adatok alapján)
- Bounce rate: 34% — az iparági átlag 55-65% helyett
- Átlagos munkamenet-hossz: 3 perc 12 másodperc
A 100/100 Lighthouse alap közvetlen üzleti hatást generál: a vásárlók tovább maradnak az oldalon, kevesebben hagyják el, és a Google organikusan magasabbra rangsorolja a termékoldalakat.
Tanulságok a projekt alapján
Minden projekt tanít valamit. A PiheLux esetében néhány kulcstanulság:
- A luxus design és a sebesség nem ellentétes. A nagy, gyönyörű képek gyorsak tudnak lenni — ha WebP-ben szolgálod ki őket, és a next/image lazy loadingját használod.
- A Stripe integráció egyszerűbb, mint a legtöbben gondolják. A Stripe Checkout 2 nap alatt integrálható és PCI DSS compliant.
- A 7 napos delivery lehetséges — de csak ha az ügyfél időben szállítja a tartalmat. A PiheLux kész volt termékfotókkal és leírásokkal. Ez a leggyakoribb bottleneck.
- A modern infrastruktúra deployment a legjobb választás Next.js-hez. Edge network, automatikus SSL, instant rollback — és az alapcsomag ingyenes.
Frequently Asked Questions
Miért ért el 100/100 Lighthouse-t a PiheLux, míg a Shopify verziójuk 54-et kapott?+Neked is kell egy ilyen webshop?
A PiheLux eredményét meg tudjuk ismételni a te termékednél is. 0 Ft előleg, 14 napos szállítási garancia, 90+ Lighthouse alapból.
Kérj ingyenes konzultációt →
