Portofoliul premium al unei hairstyliste, reconstruit în jurul unor Core Web Vitals reale — nu doar un redesign.
Prezentare
Un site de portofoliu pentru o hairstylistă din Cluj-Napoca, construit să prezinte un portofoliu foto mare cu finisajul unui editorial de modă, nu cu al unui șablon obișnuit de afacere locală.
O grilă de portofoliu plină de fotografii încărca toate imaginile deodată, iar o animație separată din hero bloca firul principal al paginii — amândouă împingeau timpii reali de încărcare mult peste ce ar trebui să accepte un site cu pretenții premium.
Provocare
Banda de portofoliu, derulând în ritmul site-ului live.
Abordare
Am reconstruit strategia de încărcare a imaginilor pe geometria reală a ecranului, nu pe ghicit după index, am izolat fundalul animat din hero ca să nu mai blocheze pagina și am corectat felul în care afacerea e descrisă în rezultatele căutării.
Despre Paula
Cu peste 8 ani de experiență, Paula transformă fiecare programare într-o poveste — de la tunsori de precizie la culoare lucrată artistic. Fiecare client pleacă din salon cu un look documentat foto și video, gata de distribuit.
Secțiunea „despre” a site-ului, reconstruită în browser — cu fontul, paleta și rama aurie ale clientei.
Site-ul, așa cum e construit
Design și dezvoltare
- Imagini activate după geometrie
- Cadrele de portofoliu vizibile fără scroll sunt detectate din măsurători reale ale layoutului, nu din presupuneri despre numărul de coloane — restul își amână încărcarea până se apropie de ecran și se activează treptat, pe măsură ce vizitatorul derulează.
Decizii tehnice
- O regresie provocată de mine, găsită și reparată în aceeași zi
- Refacerea încărcării imaginilor a adus propriul cost de performanță — o serie de scrieri de stil pe fiecare cadru obliga browserul să recalculeze layoutul mult mai des decât era nevoie. Am găsit-o prin măsurare directă și am reparat-o grupând scrierile într-o singură trecere.
- Fundalul din hero, scos din pachetul principal
- Fundalul animat din hero a fost rescris ca să se încarce doar când e nevoie de el, nu ca parte din JavaScriptul inițial al paginii — eliminând o sarcină lungă care bloca interactivitatea la prima încărcare.
- Date corecte despre afacere în rezultatele căutării
- Am corectat datele structurate ale site-ului, de la o entitate de afacere care nu exista la o relație corectă persoană–angajator, așa cum funcționează de fapt afacerea.
Rezultate
Largest Contentful Paint
1408ms~620ms
Măsurătoare reală, fără încetinire, pe site-ul live, după refacerea încărcării imaginilor — o îmbunătățire de aproximativ 55%.
Cereri inițiale de imagini
500
Restul se activează treptat, pe măsură ce vizitatorul derulează — confirmat că funcționează, nu doar măsurat o dată.
- Rol
- Design, Dezvoltare, Optimizare de performanță
- Stack
- Next.js, TypeScript, Tailwind CSS
- An
- 2026
- Domeniu
- Hairstyling și frumusețe