Il Cliente

Velasca è un brand italiano di calzature premium che unisce tradizione artigianale e innovazione digitale. Specializzata nella produzione di scarpe da uomo realizzate a mano in Italia, Velasca si distingue per l'attenzione ai dettagli, la qualità dei materiali e un modello di business diretto al consumatore che elimina gli intermediari, offrendo prodotti di alta qualità a prezzi accessibili.

Con un e-commerce di riferimento su piattaforma Shopify (velasca.com), il brand si rivolge a un pubblico attento allo stile, alla qualità e all'esperienza d'acquisto online.

La Sfida

Il sito e-commerce di Velasca, pur essendo visivamente accattivante e funzionale, presentava problematiche significative in termini di performance e velocità di caricamento. I Core Web Vitals segnalavano criticità che impattavano negativamente sull'esperienza utente e, potenzialmente, sul posizionamento SEO e sul tasso di conversione.

Metriche di Partenza (Prima dell'Intervento)

Le metriche rilevate attraverso analisi delle performance evidenziavano tempi di caricamento e interattività molto elevati:

Questi valori, ben oltre le soglie raccomandate da Google, compromettevano l'esperienza utente, soprattutto su dispositivi mobili e connessioni più lente.

Problematiche Identificate

Durante la fase di audit del codice, sono emerse diverse criticità:

1. Script di terze parti bloccanti: widget come Zendesk, Google APIs, Iubenda e Accessibility App caricavano in modalità sincrona, bloccando il rendering della pagina
2. Assenza di lazy loading: alcune immagini e risorse caricate tutte all'avvio, anche se non immediatamente visibili
3. CSS non ottimizzato: mancanza di CSS critico inline e defer per i fogli di stile non essenziali
4. Bundle JavaScript pesanti: chunk React caricati senza ottimizzazioni
5. Rendering lento del menu: snippet ricorsivi che richiedevano ~560ms per il rendering
6. Immagini sovradimensionate: preview di slider con risoluzioni eccessive rispetto alle necessità effettive

La Soluzione

Hoculus ha condotto un progetto di ottimizzazione tecnica approfondita focalizzato su due obiettivi principali:

• Riduzione drastica dei tempi di caricamento
• Miglioramento dell'interattività e della percezione di velocità

Interventi Tecnici Implementati

1. Lazy Loading Avanzato degli Script di Terze Parti

Implementazione di un sistema di caricamento differito per tutti gli script esterni non essenziali:

• Zendesk Chat Widget: caricamento posticipato dopo interazione utente (click, scroll, slide)
• Google APIs: lazy loading attivato solo dopo input dell'utente
• Iubenda: caricamento differito del sistema di gestione cookie e privacy
• Accessibility App: integrazione ottimizzata per evitare il blocco del rendering

Soluzione tecnica: creazione sistemi per prevenire il caricamento di script prima di un'interazione utente.

2. Ottimizzazione del Caricamento delle Immagini

• Implementazione lazyloading su tutte le immagini below-the-fold
• Riduzione delle dimensioni delle immagini di preview negli slider:
  • Preview prodotto: da 200px a 70px
  • Preview recensioni: da 300px a 60px
• Preload delle immagini hero con media query per una visualizzazione immediata
• Implementazione di algoritmi di sizing adeguati per il rendering di dimensioni adeguate ai container

3. CSS Critico Inline

Estrazione e implementazione del CSS critico necessario per il rendering above-the-fold:

• CSS critico inline per l'immagine hero e gli elementi principali
• Defer dei CSS non critici
• Ottimizzazione delle media queries per evitare doppi download
• Defer degli script nei template

4. Ottimizzazione Bundle JavaScript

• Lazy loading dei chunk React
• Caricamento on-demand dei bundle solo quando necessari
• Gestione asincrona dell'inserimento script

5. Refactoring del Codice

• Menu Navigation: refactoring dello snippet relativo al menu di navigazione per eliminare ricorsività e ridurre il tempo di rendering da ~560ms a ~160ms
• Consolidamento script: accentramento della gestione di tutti gli script in un unico file per una gestione più efficiente del call stack
• Utilities JavaScript: implementazione di utilities vanilla per la gestione asincrona delle risorse

6. Hoculus Utils Framework

Creazione di un framework di utilities JavaScript personalizzato che include:

• gestione asincrona dell'inserimento di script da URL con callback al termine del caricamento
• Sistema di blacklist per il controllo granulare del caricamento delle risorse
• Event delegation per l'attivazione on-demand delle funzionalità

I Risultati

Metriche Post-Intervento

Le ottimizzazioni hanno prodotto risultati straordinari su tutti i Core Web Vitals:

Analisi dei Miglioramenti

• First Contentful Paint (FCP): ridotto del 41% (da 2,4s a 1,4s) - gli utenti vedono contenuti significativi molto più rapidamente
• Speed Index (SI): migliorato del 61% (da 11,5s a 4,9s) - percezione di velocità notevolmente superiore
• Largest Contentful Paint (LCP): ridotto del 55% (da 14,1s a 6,4s) - elemento principale visibile in meno della metà del tempo
• Time to Interactive (TTI): migliorato del 61% (da 21,3s a 8,3s) - la pagina diventa interattiva in tempi accettabili
• Total Blocking Time (TBT): ridotto dell'80% (da 900ms a 110ms) - drastica riduzione dei blocchi del main thread
• Cumulative Layout Shift (CLS): mantenuto stabile con un valore trascurabile

Impatto Business

I miglioramenti tecnici si traducono in benefici concreti:

1. Esperienza Utente Superiore: navigazione più fluida e reattiva su tutti i dispositivi
2. SEO Migliorato: i Core Web Vitals sono un fattore di ranking confermato da Google
3. Aumento Potenziale delle Conversioni: studi dimostrano che ogni secondo risparmiato aumenta il conversion rate
4. Riduzione Bounce Rate: utenti meno propensi ad abbandonare il sito per lentezza
5. Competitività Mobile: performance ottimale su smartphone e connessioni 3G/4G

Metodologia di Lavoro

Il progetto è stato strutturato con un approccio metodico:

1. Audit Iniziale: analisi approfondita del codice e identificazione dei colli di bottiglia
2. Pianificazione Interventi: definizione priorità e roadmap delle ottimizzazioni
3. Implementazione Proof of Concept: test di ogni soluzione in ambiente di sviluppo
4. Testing e Validazione: verifica del corretto funzionamento di tutte le funzionalità
5. Deployment Graduale: rilascio progressivo delle ottimizzazioni
6. Monitoraggio Post-Release: verifica delle metriche in produzione

Task Completate

Il progetto ha incluso 20 task tecniche, tra cui:

• Implementazione lazy loading per widget di terze parti
• Creazione framework Hoculus Utils
• Implementazione CSS critico inline
• Refactoring menu e snippet ricorsivi
• Consolidamento e ottimizzazione degli script

Tecnologie e Strumenti

• Piattaforma: Shopify Plus
• Linguaggi: JavaScript (Vanilla), Liquid, HTML5, CSS3
• Framework: React (ottimizzazione bundle)
• Tools di Analisi: Lighthouse, Chrome DevTools, PageSpeed Insights
• Metodologia: Performance Budget, Critical Rendering Path Optimization

Conclusioni

Il progetto di ottimizzazione performance per Velasca rappresenta un esempio concreto di come interventi tecnici mirati possano trasformare radicalmente l'esperienza utente di un e-commerce, con miglioramenti fino all'80% su metriche critiche.

Hoculus ha dimostrato competenza nell'identificazione dei bottleneck prestazionali e nella implementazione di soluzioni avanzate che bilanciano performance, funzionalità e manutenibilità del codice.

Il risultato è un sito più veloce, più performante e più competitivo, senza compromessi sulla ricchezza delle funzionalità e sull'estetica del brand.