Pixy Labs

Ho ripensato il sito da zero: strategia, contenuti, design e architettura. Il risultato è un WordPress headless, cioè usato solo per gestire i contenuti, con un frontend separato scritto in Next.js e React.

Via Elementor, dentro l'architettura headless

• WordPress resta il pannello dove scrivo articoli, progetti e servizi, su un sottodominio dedicato. Ho modellato i contenuti con tipi personalizzati e campi ACF in un plugin indipendente dal tema, così non dipendono più da nessun page builder.
• Il sito che vedono i visitatori è un'applicazione Next.js (React, TypeScript) che legge i contenuti tramite WPGraphQL e genera pagine pronte, che si aggiornano da sole quando modifico un contenuto nel CMS.
• Elementor, Elementor Pro e altri cinque plugin disattivati: quello che serviva davvero, come il banner dei cookie e il contatto WhatsApp, ora è scritto su misura, più leggero e sotto controllo.
• Nessun link perso: ho controllato tutti gli 83 indirizzi del vecchio sito e impostato i reindirizzamenti dove le pagine sono cambiate. I dati SEO restano gestiti con Rank Math.

Restyling e posizionamento

• Nuova identità visiva coerente con il logo: blu notte, viola e un accento corallo, tipografia più editoriale, un percorso animato in home che racconta il metodo «dall'esigenza al lancio».
• Servizi riscritti intorno a quello che so fare meglio: WordPress per progetti complessi, project management e coordinamento tecnico, accessibilità web.
• Casi studio veri, con il problema, la soluzione e le tecnologie usate, invece di una semplice galleria di lavori.
• Sito bilingue italiano e inglese con WPML, per i clienti e le aziende internazionali.

Prestazioni: misurate su smartphone, pagina per pagina

Le prestazioni le ho misurate, non stimate. Ho usato Lighthouse, lo strumento di Google, in modalità smartphone: simula un telefono di fascia media su una rete mobile lenta, cioè le condizioni in cui un sito si mette davvero alla prova. Ho confrontato cinque pagine equivalenti del vecchio e del nuovo sito, misurate in alternanza dallo stesso server e più volte ciascuna, e ho tenuto il valore mediano. Ho scartato le misure falsate, per esempio quelle fatte mentre il server si stava riavviando.

In media, sulle cinque pagine:

• il punteggio di performance passa da 86 a 98;
• il primo contenuto visibile compare in 1,3 secondi invece di 3,0 (−57%);
• il contenuto principale è pronto in 2,1 secondi invece di 3,4 (−38%);
• servono il 69% di richieste in meno e la pagina pesa il 30% in meno;
• il layout praticamente non si sposta più durante il caricamento (CLS vicino a 0);
• accessibilità, buone pratiche e SEO sono a 100 su tutte le pagine misurate.

Da dove arriva la differenza. Il vecchio sito non era lento per trascuratezza: era già ottimizzato, ma un page builder si porta dietro molto più di quello che la pagina usa davvero. Guardando cosa carica la home si capisce dove sta il guadagno:

• Font ospitati sul sito e ridotti ai soli caratteri latini: da 357 a 64 KiB, senza collegarsi a Google Fonts.
• Un solo foglio di stile di 13 KiB al posto dei 36 file di Elementor e dei plugin.
• Pagine generate in anticipo e aggiornate in background: il server risponde in circa 200 millisecondi invece di oltre 400, senza eseguire PHP né interrogare il database a ogni visita.
• Nessun servizio esterno al caricamento: Google Analytics arriva solo dopo il consenso.

Cosa ho ottimizzato dopo le prime misure. La prima versione del nuovo sito era già più veloce, ma le misure hanno mostrato dove si poteva fare meglio, e ho corretto:

• il testo d'apertura entrava con una dissolvenza che ritardava il contenuto principale: ora è visibile dal primo istante e si muove solo di qualche pixel;
• l'immagine dei progetti aspettava la fine dell'animazione per comparire: ora si disegna subito, sotto l'effetto tendina;
• il sito scaricava in anticipo tutte le pagine collegate nel menu e nel footer, una quindicina di richieste che su smartphone rubavano banda: ora una pagina viene preparata solo quando ci si passa sopra o la si tocca, e le richieste della home sono scese da 36 a 16;
• l'animazione della home ridisegnava la linea a ogni fotogramma: ora la ricalcola solo quando cambia forma, parte a pagina caricata e si ferma quando esce dallo schermo;
• due problemi di accessibilità: il viola sugli sfondi chiari ora ha un contrasto di 4,7:1 (livello AA) e un ruolo ARIA sbagliato è stato corretto.

Il compromesso, detto chiaramente. L'unica voce che cresce è il JavaScript, da 45 a 147 KiB: è il costo di React, che rende il sito un'applicazione moderna. Su smartphone blocca la pagina per circa 70 millisecondi in media, ben sotto la soglia di 200 indicata da Google, e il guadagno su font, stili, richieste e server lo ripaga ampiamente.

Più sicuro per come è costruito

• Il sito pubblico non esegue WordPress: chi visita pixylabs.com non tocca né PHP né il database. Il pannello di amministrazione vive su un dominio separato.
• Meno plugin, meno superficie d'attacco: sette plugin in meno da aggiornare e da sorvegliare.
• Intestazioni di sicurezza su tutte le pagine (HSTS, protezione da framing e sniffing, permessi del browser limitati) e nessuna indicazione sulla tecnologia del server.
• Modulo contatti protetto contro lo spam e l'inserimento di intestazioni, con invio tramite la casella di posta del dominio.

Privacy senza plugin

Il banner dei cookie è scritto su misura secondo le linee guida del Garante: Google Analytics si carica solo dopo il consenso, «Accetta» e «Rifiuta» hanno lo stesso peso, e la scelta si può cambiare in ogni momento dal footer. Privacy e Cookie Policy sono state riscritte con le tabelle dei cookie effettivamente usati.

Rilascio automatico

Il codice vive in un repository GitHub privato. Ogni modifica approvata viene compilata e pubblicata in automatico con GitHub Actions su un hosting Node.js, passando prima da un ambiente di staging dove controllo tutto prima del lancio.

Con l'AI al mio fianco

Ho realizzato il progetto in coppia con Claude, l'assistente AI di Anthropic. Strategia, posizionamento, contenuti, scelte di design e di architettura sono miei; Claude mi ha aiutata a scrivere e verificare il codice, preparare le immagini, misurare le prestazioni e automatizzare i rilasci. Ogni modifica è passata dallo staging e dalla mia revisione prima di andare online.

È lo stesso metodo che porto nei progetti dei clienti: l'AI accelera il lavoro ripetitivo, l'esperienza decide cosa costruire e come.