Studio Kàros

Portfolio di studio architettonico — galleria immersiva, WordPress headless e attenzione maniacale al peso delle immagini.

WordpressArchitetturaHeadless
Cliente
Studio Kàros
Ruolo
Designer · Full-stack
Durata
12 settimane
Team
3 (architetti, me)
Anno
2023
−68%Peso medio pagina
97Lighthouse Perf
120Progetti pubblicati
+3.4×Tempo di sessione

120 progetti da mostrare. Un sito che crollava al click.

Studio Kàros è uno studio di architettura romano con 15 anni di portfolio — 120 progetti, migliaia di foto, tre soci. Il sito Wordpress tradizionale caricava in 14 secondi e crashava su mobile sotto carico.

Il mandato: passare a WordPress headless con front-end Next.js, portare il sito sotto 1 secondo di LCP, mantenere la familiarità del CMS per il team interno. Dodici settimane.

Performance, scala, e un team che non vuole reimparare.

#01Immagini ad alta risoluzione

Gli architetti consegnano render a 20MB. Il sito doveva mostrare la qualità senza trasmetterla byte per byte.

#02WordPress come CMS noto

Il team usava WordPress da anni. Cambiare CMS era fuori discussione — la soluzione headless doveva essere invisibile per chi pubblica.

#03Gallery immersiva

Il portfolio doveva permettere navigazione fluida tra 120 progetti con filtri per categoria, anno, tipologia.

Headless senza traumi.

Ho costruito il front-end in Next.js con ISR: ogni pagina progetto viene rigenerata al salvataggio nel CMS. Il team pubblica come sempre in WordPress, il sito si aggiorna da solo in meno di 10 secondi.

Le immagini passano per un pipeline di ottimizzazione: resize automatico, conversione WebP, lazy loading progressivo. Il peso medio di pagina è sceso da 8.4MB a 2.7MB — meno 68%.

Pubblichiamo esattamente come prima — e il sito sembra completamente diverso. Non sapevo fosse possibile.

— GIULIO KÀROS, SOCIO FONDATORE

−68% di peso. Triplato il tempo di sessione.

Il sito è passato da 14 secondi di caricamento a LCP sotto 1 secondo. Lighthouse Performance: 97.

Il tempo medio di sessione è cresciuto di 3.4×: i visitatori esplorano in media 8 progetti per visita.

[Deliverable]
  • Front-end Next.js con WordPress headless
  • Pipeline di ottimizzazione immagini
  • Gallery filtrabile con 120 progetti
  • ISR per aggiornamenti automatici
  • Migrazione completa archivio esistente
▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚
GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?