Come ho raggiunto un punteggio mobile da 100 Google Pagespeed su WooCommerce con WP Rocket

Stai mirando a ottenere un 100 perfetto su Google Pagespeed Insights per il cellulare con il tuo negozio WooCommerce?

In questo articolo, ti mostrerò esattamente come l'abbiamo raggiunto con femme-fatale.gr, un e-shop di bellezza che inizialmente correva su Magento. A quel tempo, i carichi di pagina mobili hanno impiegato tra 5 e 15 secondi e il sito stava sanguinando vendite, nonostante un catalogo di 35.000 prodotti con 500 categorie di prodotti e 450 attributi di prodotto.

Sono Dimitris Vayenas, fondatore di Oxford Metadata. Negli ultimi tre decenni, sono stato ossessionato da ogni millisecondo delle prestazioni web. All'inizio del 2022, il mio amico Nikos Orfanos mi ha chiesto di aiutare con il suo negozio online e abbiamo avuto modo di lavorare.

Dopo aver migrato a WooCommerce e concentrandoci interamente sulla velocità - usando il razzo WP come la nostra arma segreta, abbiamo distrutto i punteggi delle pagine mobili con un punteggio coerente tra 99 e 100/100. Ancora più importante, il sito è passato da stagnante a entrate.

Continua a leggere e imparerai come siamo riusciti a ottenere tali risultati e come WP Rocket ci ha aiutato a raggiungere un punteggio di oltre 95, oltre alla modifica finale che ci ha spinto a un perfetto 100. Ancora più importante, scoprirai l'impatto aziendale che ha seguito una volta che il sito ha iniziato a caricare in soli 300 millisecondi.

Perché concentrarsi sulle prestazioni, specialmente sul cellulare

In Femme - Fatale.gr, oltre il 90% degli acquisti si verifica su dispositivi mobili. Ciò ha reso le prestazioni mobili la nostra massima priorità dal primo giorno.

I dispositivi mobili sono lo stress test finale per qualsiasi sito Web. CPU limitata, memoria e connessioni instabili possono far caricare anche le pagine più magre fino a 10 volte più lente rispetto al desktop. Ecco perché ogni ottimizzazione è importante.

Velocità significa efficienza. Codice più pulito, risorse più piccole e un DOM più snello si traducono in un'esperienza più fluida per ogni visitatore, specialmente sui dispositivi mobili.

Come mi piace dire: "Se la tua esperienza mobile non è istantanea, stai perdendo soldi veri con ogni millisecondo in più".

Il punto di svolta: migrazione da Magento a WooCommerce

Nel dicembre 2021, Nikos ha raggiunto una chiara sfida. "Il mio negozio ha raggiunto il picco durante il blocco a € 0,81 per sessione. Quindi le vendite sono tornate a € 0,15 per sessione. Possiamo tornare ai massimi di blocco?"

Sapevamo che il primo passo era cambiare le piattaforme.

Prima di tutto, abbiamo scelto WooCommerce per il suo stack agile e moderno. Offriva un ecosistema di plugin e creatori di temi che coprono ogni funzionalità immaginabile, insieme alla più grande comunità di ingegneri web orientati alle prestazioni.

Siamo andati in diretta nel marzo 2022 senza cambiare i dati del prodotto o aumentare la spesa di marketing. L'unica differenza era la velocità. Abbiamo tagliato i carichi di pagina da 5 a 10 secondi da solo da 1 a 2 secondi.

Questa è la schermata GTMETRIX che mostra i risultati del tempo di caricamento prima della migrazione da Magento: 5,8 secondi per la homepage e 7,9 secondi per la categoria, catturati mentre stavamo ancora sviluppando il nuovo sito Web.

D'altra parte, questa è la performance attuale, con tutti i vitali web core in verde:

Qual è il vero valore di velocità per un wooCommerce?

L'impatto aziendale sulle prestazioni era impossibile da ignorare e i numeri lo hanno reso cristallino.

Prima della migrazione, femme - fatale.gr era rimasta bloccata in una routine di performance. Su Magento, il fatturato mensile variava da € 7.000 a € 10.000 con circa 40.000 sessioni, con una media di solo € 0,15 a € 0,20 per sessione. Anche durante il picco di blocco nel 2020, quando il traffico è salito a 62.500 sessioni, le migliori prestazioni sono state sottoposte a € 0,81 per sessione.

Nel febbraio 2022, poco prima che fossimo emigrati a WooCommerce, il sito era leggermente migliorato a € 0,29 per sessione, ma era ancora lontano dal suo potenziale.

L'impatto delle prestazioni più rapide è stato immediato. Nel marzo 2022, il primo mese intero dopo la migrazione, le entrate per sessione raddoppiarono a € 0,58, nonostante un tuffo temporaneo nelle sessioni mentre i robot riscaldarono le cache.

I guadagni non si sono fermati qui. Entro il dicembre 2023, abbiamo abbinato il picco di blocco di € 0,81 per sessione. Oggi, quel numero è salito ancora più in alto: il sito Web ora guadagna € 1,11 per sessione con 40.000 visite mensili.

Nikos, il proprietario di femme - fatale.gr, lo ha messo meglio:

Abbinando e ora superando il nostro picco Covidid, abbiamo dimostrato che la velocità è la più grande leva della nostra attività.

La Fondazione per le prestazioni di cui ogni sito WooCommerce ha bisogno

Prima che WP Rocket potesse offrire il suo pieno potenziale di prestazione, è necessario in atto una solida base. Queste prime decisioni hanno avuto un impatto notevole sui nostri risultati, e questo è anche ciò che consiglio vivamente a chiunque gestisca un negozio WooCommerce:

1. Scegli un tema per le prestazioni: abbiamo testato dozzine di temi prima di sistemarci sulle migliori opzioni. Botiga (basato su Gutenberg) di Athemes e Ray Tema (basato su Elementor) ha segnato entrambi 90+ ​​nelle demo del fornitore. Qualcosa di meno di 70? L'abbiamo evitato.

2. Scegli un host davvero veloce: usiamo Cloudways , supportato da Linode, Vultr e DigitalOcean in regioni europee chiave come Londra, Francoforte, Amsterdam, Milano e Stoccolma. Ci dà aggiornamenti PHP e database con un clic, vernici integrate e Redis, oltre a rilevare il dispositivo mobile senza soluzione di continuità. Ciò garantisce che le chiamate API non siano sempre colpite da contenuti ottimizzati. Abbiamo avuto tempi di inattività zero in tre anni e il loro team di supporto è eccezionale.
   
   In e -commerce, la vicinanza ai tuoi clienti non è negoziabile: ogni query, aggiornamento del carrello e controllo dell'inventario tocca la tua origine. Con gli acquirenti ad Atene o nelle Isole greche e Cloudways che non ha un nodo locale, dobbiamo distribuire FastPath . Ancoraggia direttamente con tutti i principali operatori mobili greci e cloudflare, offrendo TTFBS sub -50 MS e un'esperienza veramente locale.

3. Collabora con fornitori di supporto: abbiamo scelto venditori che offrono un supporto affidabile e rapido per rispondere a domande e risolvere i problemi al tuo fianco, da Athemes e Fibosearch a Welyunch , Pixel il tuo sito , forme di gravità , Aioseo e WP Rocket stesso.

4. Ottimizza i tuoi contenuti: abbiamo convertito tutte le immagini in WebP e le abbiamo organizzate in cartelle basate su Date, garantendo che ogni cartella contenga meno di 10.000 file. Per i caratteri, abbiamo ospitato i file Woff2 e li sottoponevano a includere solo i personaggi di cui il nostro pubblico aveva bisogno. Ciò ha ridotto le dimensioni dei file di carattere dal 70 all'80 percento. Servire a livello locale e precaricare presto ha contribuito a eliminare le ricerche esterne ed evitare i turni di layout.

5. Utilizzare il caricamento del plug -in chirurgico e mantenere l'igiene del database: abbiamo utilizzato i filtri di plug -in e filtri manuali per caricare solo i plugin necessari per pagina. Abbiamo anche pulito i transitori settimanali e disabilitati per le voci WP_Ooptions di grandi dimensioni.

Le caratteristiche del razzo WP che ci hanno portato al 99/100 su pagine

Una volta che la fondazione era in atto, WP Rocket ci ha aiutato a aumentare la velocità e ottenere rapidamente risultati di prestazioni eccezionali. Queste funzionalità hanno giocato un ruolo chiave nel portarci a un punteggio di oltre 95 su Google Pagespeed sul cellulare:

• Preload cache mobile e sitemap: WP Rocket rileva automaticamente i dispositivi mobili e crea una cache dedicata per loro. Ciò significa che gli utenti di smartphone ricevono sempre un'istantanea HTML precaricata. Il preloader basato su Sitemap striscia anche le tue pagine subito dopo qualsiasi spurgo della cache, che rimuove il ritardo che spesso si verifica alle prime visite.
  
• Minificazione CSS e JS : WP Rocket stringe lo spazio bianco e commenti per ridurre le dimensioni dei file. Può anche combinare i file JavaScript in uno, riducendo il numero di richieste HTTP. Ciò è particolarmente importante per gli utenti mobili su reti più lente.  
  
• Rimuovi CSS inutilizzati (RUCSS): A differenza della semplice minificazione, RUCSS analizza l'HTML delle tue pagine e spoglia ogni regola CSS mai utilizzata sul front -end. Questo declatrio di fogli di stile spesso taglia decine di kilobyte, quindi il browser si rende più veloce con meno byte. Abbiamo visto in prima persona che consentire a RUCSS da solo rasato di 200 kb dal nostro carico utile della homepage, con conseguenti pagine di caricamento più veloci.
  
• Ritardare l'esecuzione JavaScript : script come analisi, strumenti di chat o widget di terze parti di solito non devono essere eseguiti immediatamente. WP Rocket li ritarda fino a quando l'utente scorre, tocchi o clic. Ciò rende le pagine interattive più velocemente e migliora l'interazione con la vernice successiva e la reattività complessiva di Page alle interazioni degli utenti.

Dopo aver abilitato queste funzionalità, abbiamo ottenuto un punteggio di performance Pagespeed 99 per mobili:

Bonus: componenti aggiuntivi di WP Rocket per casi speciali

A volte le impostazioni fuori box necessitano di un piccolo aumento. Per configurazioni selezionate come la nostra - con programmi complessi, regole di carattere personalizzate o rilevamento insolito dei dispositivi - abbiamo installato cinque componenti aggiuntivi WP Rocket gratuiti dopo aver consultato gli ingegneri senior del razzo WP:

• Cambia i parametri RUCSS: abbiamo regolato la frequenza con cui il razzo WP profondamente rimuove i CSS inutilizzati. Ciò era essenziale per la compatibilità con plug -in come AutomateWoo, che potrebbe sovraccaricare lo scheduler di attività.
• Deattivare i frammenti del carrello WooCommerce: poiché il nostro database era già ottimizzato, abbiamo disabilitato la cache del carrello del carrello di WP Rocket per accelerare ulteriormente le chiamate di pagamento.
• Disabilita caratteri CSS usati Preload: abbiamo usato caratteri WOFF2 personalizzati con regole di precarico manuale. Questo componente aggiuntivo ha assicurato che tali regole non fossero sovrascritte dal precarico di font automatico di WP Rocket.
• Rimuovi le regole di scadenza HTML: il nostro CDN e il server hanno già gestito le intestazioni della cache, quindi abbiamo rimosso le regole di HTML predefinite di WP Rocket scadono le regole per evitare conflitti.
• Imposta i tablet come mobile: abbiamo trattato tablet come dispositivi mobili per garantire che abbiano beneficiato della memorizzazione nella cache mobile e delle ottimizzazioni reattive. Questo è stato importante per la funzionalità personalizzata che si basa sul controllo WP_IS_MOBILE ().

A parte il plug-in dei tablet, la maggior parte di questi componenti aggiuntivi sono necessari solo nei negozi ad alta complessità. Per le tipiche configurazioni di eCommerce, WP Rocket funziona alla grande fuori dalla scatola.

The 100/100 Secret: Perfecting Lazyloading e quell'immagine LCP

Raggiungere 99 su Google Pagespeed Insights è stato un grande traguardo, ma non eravamo soddisfatti. Un punto si trovava tra noi e la perfezione.

Innanzitutto, abbiamo affrontato Element Bloat, il che significa ridurre il numero di elementi HTML sulla pagina. Google penalizza le pagine con oltre 810 elementi DOM e i nostri menu, cursori e piè di pagina da soli ci hanno spinto ben oltre 1.000.

Ecco cosa abbiamo fatto:

• Contenuto statico a carico pigro : abbiamo differito elementi non critici come menu di intestazione, cursori della categoria di prodotti, giostre di marca e piè di pagina fino a dopo la vernice iniziale.

• Elementi non necessari rimossi : abbiamo potato livelli di menu profondi e aree di widget inattive disabilita sui dispositivi mobili. Questo ci ha aiutato a ottenere il conteggio totale del DOM sotto la soglia di penalità di Google.

Anche con una pagina più pulita, non riuscivamo ancora a rompere 100. Il numero finale era l'immagine dell'eroe.

Inizialmente, era un'immagine 350 × 622 px con sovrapposizioni, ombre e testo - troppo complessa per caricare rapidamente. L'abbiamo semplificato a un WebP da 350 × 350 px e lo abbiamo precaricato con alta priorità usando il seguente codice:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

Ed è così, semplificando e precaricando l'immagine dell'eroe, abbiamo ottenuto un punteggio perfetto da 100/100 psi dal cellulare.

L'impatto del business: velocità come motore di crescita

Come ho spiegato, la velocità non ha semplicemente migliorato il nostro punteggio Pagespeed. Ha aumentato direttamente la nostra linea di fondo.

Dopo aver ottimizzato le prestazioni e sfruttato le funzionalità di razzo WP, abbiamo visto guadagni misurabili nei risultati:

• I tassi di conversione sono aumentati del 33%.

• Le entrate per sessione sono aumentate di oltre cinque volte , da € 0,20 a € 1,11.

Tali risultati si sono tradotti in ulteriori € 384.000 di entrate durante i primi 18 mesi dopo la migrazione .

Questi non erano piccoli miglioramenti. Hanno abbinato e alla fine hanno superato le nostre prestazioni di blocco del picco, dimostrando che la velocità del sito è stata la leva chiave per la crescita .

Come mi piace dire: "Ogni millisecondo rasato ha aggiunto euro reali alla linea di fondo."

3 consigli pratici per gli imprenditori

Se stai gestendo un negozio di e -commerce, vorrei condividere alcuni suggerimenti pratici aggiuntivi può aiutarti a ottenere il massimo dai tuoi sforzi di prestazione, che tu sia tecnico o meno.

1. Traccia gli utenti reali: utilizzare Real User Monitoring (RUM) per tenere d'occhio i dati sul campo. I punteggi di laboratorio sono utili, ma ciò che conta davvero è il modo in cui il tuo sito funziona per i visitatori reali. Assicurati di disabilitarlo quando si eseguono test di approfondimenti pagine per evitare risultati distorti.
2. Geolocate la tua origine: ospita il tuo sito vicino ai tuoi clienti. Quando il tuo server di origine è vicino al tuo pubblico, tutto, dalle ricerche sui prodotti alla cassa diventa più veloce e più affidabile.
3. Lega al razzo WP: inizia con le impostazioni predefinite. Gestiscono automaticamente la maggior parte dei problemi di prestazioni immediatamente. Una volta che la linea di base è solida, puoi perfezionare consentendo alcune funzionalità aggiuntive, ad esempio per ottimizzare i file CSS e JS. E se non sei esperto di tecnologia, ricorda: "Siti più veloci significano meno frustrazione, più vendite e clienti più felici".

Avvolgimento

Siamo passati da Magento a WooCommerce, abbiamo aumentato il nostro punteggio di Pagespeed mobile da 55 a un 100 perfetto e ha aumentato le entrate per sessione da € 0,20 a € 1,11. Quel viaggio ha dimostrato chiaramente una cosa: la velocità è più di una pietra miliare tecnica. È un vero motore della crescita aziendale.

Ci siamo concentrati sulle prestazioni, abbiamo costruito una solida base tecnica e abbiamo usato il razzo WP per sbloccare rapidamente i risultati. Se il tuo negozio WooCommerce si sente lento o sottoperformante, ora è il momento di agire. Un sito più veloce significa un'esperienza più fluida per i tuoi visitatori e guadagni reali per la tua attività.