PageSpeed 99/100 su un vero negozio PrestaShop 9.1 con 80+ moduli

Non una demo. Un negozio reale.

Quando si vedono case study PageSpeed online, di solito riguardano un sito minimale con poche pagine e appena qualche funzionalità. Non è questo il caso.

mypresta.rocks è il nostro negozio PrestaShop 9.1 in produzione. Gestisce oltre 80 moduli attivi — e non si tratta di moduli leggeri solo di configurazione. Parliamo di moduli che aggiungono vera funzionalità front-end: slider animati, mega menu con sottomenu, un checkout one-page completo, un motore blog con commenti e condivisione, un widget di ricerca in tempo reale, feed di social media, gallerie di prodotti, popup di vendita, timer conto alla rovescia, banner di consenso ai cookie, programmi fedeltà, dashboard analitiche e molto altro.

Ognuno di questi moduli carica i propri file CSS e JavaScript. Ognuno si aggancia al front office e renderizza elementi visibili e interattivi sulla pagina. Questo è il tipo di configurazione che normalmente distrugge il tuo punteggio PageSpeed.

Eppure, ecco i nostri punteggi Google PageSpeed Insights:

• Mobile: 99 Performance, 97 Accessibility, 100 Best Practices, 100 SEO
• Desktop: 99 Performance, 97 Accessibility, 100 Best Practices, 100 SEO

Non è teoria. È ciò che Google misura in questo momento sulla nostra homepage live.

I numeri

Mobile (4G lento, Moto G Power)

• First Contentful Paint: 1,2s
• Largest Contentful Paint: 1,5s
• Total Blocking Time: 110ms
• Cumulative Layout Shift: 0
• Speed Index: 1,4s

Desktop

• First Contentful Paint: 0,3s
• Largest Contentful Paint: 0,9s
• Total Blocking Time: 30ms
• Cumulative Layout Shift: 0,011
• Speed Index: 0,5s

Questi risultati provengono da Lighthouse 13 in esecuzione sull'infrastruttura di Google — lo stesso test che alimenta il report PageSpeed Insights che ogni proprietario di negozio controlla.

Come l'abbiamo fatto

Non esiste un unico trucco magico. Le performance a questo livello derivano da una pipeline disciplinata che tocca ogni livello dello stack. Abbiamo trattato i fondamentali nella nostra guida all'ottimizzazione delle performance PrestaShop.

Estrazione del Critical CSS

Il più grande nemico del rendering veloce è il CSS che blocca il rendering. Il sistema CCC di PrestaShop (Combine, Compress, Cache) unisce tutti i fogli di stile dei moduli in un unico file grande. Nel nostro negozio, quel file supera i 500KB.

Estraiamo il CSS critico above-the-fold usando la libreria Critters di Google e lo integriamo direttamente nell'HTML. Il foglio di stile completo viene poi caricato in modo asincrono usando il pattern media="print" onload="this.media='all'". Il browser renderizza la pagina immediatamente con gli stili incorporati, e il resto si carica in background senza bloccare nulla.

Purga del CSS

Con 80+ moduli, il CSS combinato contiene migliaia di regole che non vengono mai usate su nessuna pagina specifica. Eseguiamo PurgeCSS sull'HTML reale delle pagine chiave più tutti i file JavaScript e template nel tema e nei moduli.

Il risultato: 852KB ridotti a 548KB — una riduzione del 36% del payload CSS. Meno CSS significa download più veloci, parsing più veloce e uno scambio più fluido senza spostamenti del layout.

Suddivisione JavaScript

Non tutto il JavaScript deve essere eseguito immediatamente. Dividiamo il bundle JavaScript CCC in due parti:

• Bundle sincrono (~140KB / 41KB gzip): Funzionalità di base — jQuery e gli script core di PrestaShop
• Bundle differito (~497KB / 111KB gzip): Bootstrap, script del tema e script di moduli non critici caricati tramite <script defer>

Il bundle differito si carica senza bloccare il thread principale. Questo da solo ha ridotto il nostro JavaScript sincrono di oltre il 60%.

Caricamento intelligente degli asset

Il JavaScript del checkout (180KB+ minificato) è completamente differito sulle pagine non di checkout. Si carica tramite requestIdleCallback sulla homepage e sulle pagine di contenuto, e si carica immediatamente solo sulle pagine prodotto, carrello e checkout dove è effettivamente necessario.

Il JavaScript di pagamento Stripe viene rimosso completamente dalle pagine non di checkout.

Ottimizzazione delle immagini

Tutte le immagini di prodotti e banner vengono servite in formato AVIF tramite la content negotiation di Apache — zero overhead PHP. Il nostro convertitore batch ha elaborato 5.399 immagini, riducendo lo storage totale delle immagini da 994MB a 44MB (riduzione del 95,6%).

Il nostro banner hero mobile è di soli 25KB. La versione desktop è di 56KB. Entrambi mantengono un'eccellente qualità visiva a queste dimensioni.

Precarichiamo solo l'immagine LCP mobile e nient'altro. Su una connessione 4G lenta con ~200KB/s di larghezza di banda, ogni risorsa precaricata compete con il CSS critico per la larghezza di banda. Precaricare un font o un banner desktop ha effettivamente peggiorato il nostro FCP — una lezione appresa nel modo più difficile.

Accessibilità WCAG 2.1

L'alto punteggio di accessibilità ha richiesto un'attenzione particolare ai rapporti di contrasto per ogni elemento sulla pagina:

• Tutti i testi soddisfano i requisiti di contrasto WCAG 2.1 AA (4,5:1 per il testo normale, 3:1 per il testo grande)
• Gli elementi interattivi hanno indicatori di focus visibili
• Corretta gerarchia dei titoli e label ARIA ovunque
• Gli elementi nascosti usano .visually-hidden correttamente per gli screen reader

Perché questo è importante

Google utilizza i Core Web Vitals come segnale di ranking. Un negozio veloce e accessibile si posiziona meglio, converte meglio e offre un'esperienza migliore a ogni visitatore.

Ma ancora più importante per i nostri clienti: ogni tecnica di ottimizzazione che usiamo su mypresta.rocks è integrata nei nostri prodotti. Il modulo Performance Revolution che alimenta questa pipeline è disponibile per tutti i nostri clienti. La stessa estrazione di Critical CSS, lo stesso splitting JavaScript, lo stesso caricamento intelligente degli asset.

Se possiamo raggiungere 99/100 con 80+ moduli attivi su un vero negozio in produzione — moduli che aggiungono slider, ricerca, checkout, blog, popup e tutto il resto — anche il tuo negozio può arrivarci. Abbinalo con Instant Redis per il caching lato server e avrai uno stack di performance completo.