Come ottenere un punteggio di 90+ ​​Core Web Vitals per un negozio di e-commerce (caso di studio)

In questo post imparerai come ottenere un punteggio superiore a 90 sui tuoi Google Core Web Vitals (desktop e mobile) per un negozio di e-commerce anche se utilizzi molti plug-in.

Quando Google ha rilasciato per la prima volta la sua valutazione fondamentale dei dati vitali sul Web , molti proprietari di negozi di e-commerce hanno iniziato a farsi prendere dal panico.

A differenza di un sito di contenuti di base o di un blog, un negozio di e-commerce è pesante per l'immagine e richiede molti più elementi funzionali per chiudere una vendita. E ogni funzione aggiunta rallenta il tuo sito.

Ad esempio, la chat dal vivo può impiegare 6-10 secondi per caricarsi da sola. Il caricamento del tracciamento e-mail di base con Klaviyo può richiedere 1-2 secondi. Anche l'aggiunta del pixel di Facebook può richiedere un centinaio di millisecondi per caricarsi.

Non importa se il codice utilizza il caricamento posticipato o asincrono. Ogni elemento aggiuntivo sul tuo sito web avrà un impatto negativo sui tuoi principali aspetti vitali del web.

In questo momento, secondo Searchmetrics, il 96% dei siti testati negli Stati Uniti non supera il Core Web Vitals Assessment di Google per desktop, dispositivi mobili o entrambi.

E il tasso di fallimento è ancora più alto per i negozi di e-commerce a causa della funzionalità richiesta per portare le transazioni online.

In questo post, ti mostrerò i passaggi esatti che ho seguito per ottenere una valutazione di oltre 90 Google Core Vitals per il mio sito Web del negozio di e-commerce a 7 cifre.

Ottieni il mio mini corso gratuito su come avviare un negozio di e-commerce di successo

Se sei interessato ad avviare un'attività di e-commerce, ho messo insieme un pacchetto completo di risorse che ti aiuteranno a lanciare il tuo negozio online da zero. Assicurati di prenderlo prima di partire!

Clicca qui per scaricare

Cosa sono i Google Core Vital?

I Google Core Web Vitals sono un insieme di fattori che Google incorpora nelle classifiche di ricerca per misurare la qualità dell'esperienza dell'utente.

Google Core Vitals è composto da 3 componenti.

• Più grande Contentful Paint (Google richiede 2,5 secondi o meno) – Questa è una misura di quanto tempo ci vuole per vedere il più grande pezzo di contenuto visualizzato sullo schermo. Fondamentalmente, è la velocità di caricamento del tuo sito.
• Ritardo primo input (Google richiede 100 millisecondi o meno) – Questa è una misura della reattività e dell'usabilità della tua pagina. Nello specifico, Google sta misurando il ritardo tra un visitatore che fa clic su una funzione interattiva e la velocità con cui la pagina risponde a quel clic.
• Spostamento cumulativo del layout (Google richiede un punteggio pari o inferiore a 0,1) : questa è una misura di quanto sia stabile la tua pagina durante il caricamento. I tuoi contenuti si spostano su e giù durante il rendering della pagina? Questa è l'unica metrica di Google Core Web Vital che non ha nulla a che fare con la velocità della pagina. È anche il più difficile da eseguire il debug se non sai cosa stai facendo.

Le restanti sezioni di questo post descriveranno ESATTAMENTE come ho corretto queste 3 metriche per il mio negozio di e-commerce per ottenere un punteggio Google Core Vitals di oltre 90 su desktop e dispositivi mobili.

Il negozio di e-commerce utilizzato per questo caso di studio

La maggior parte dei proprietari di negozi di e-commerce si trova su Shopify, WooCommerce, BigCommerce o Shift4Shop e tutte queste strategie si applicano indipendentemente dalla piattaforma su cui ti trovi.

Il mio negozio a 7 cifre si trova su BumblebeeLinens.com. Sentiti libero di eseguire il test di velocità della pagina di Google sul mio negozio mentre leggi questo post per vedere i miei risultati in prima persona.

Prima di tutto, il mio negozio utilizza molti degli ultimi campanelli e fischietti di e-commerce perché insegno un corso di e-commerce su Profitable Online Store.

In effetti, tratto il mio negozio come un laboratorio per testare nuove funzionalità man mano che escono e ne parlo su questo blog.

Ecco i plugin e i servizi che sto eseguendo nel mio negozio per questo caso di studio.

• Klaviyo – La mia piattaforma di email marketing
• Postscript – La mia piattaforma di marketing via SMS
• Vizury – Il mio provider di notifiche push
• ManyChat – Il mio provider di marketing di Facebook Messenger che implementa la mia chat dal vivo
• Gorgias – Il mio software di assistenza clienti che gestisce tutta la corrispondenza dei clienti.
• Spin To Win Popup – Il mio magnete principale per il mio negozio
• Facebook Pixel : tiene traccia di tutte le mie vendite da Facebook
• Google Analytics – Tiene traccia delle vendite del mio sito web
• Notifica Slide Up – Fornisce una prova sociale visualizzando le vendite non appena arrivano

Solo per divertimento, ecco quanto velocemente il mio sito si carica SENZA ottimizzazioni .

Questa è la velocità con cui funziona con le ottimizzazioni che sto per insegnarti come implementare.

Come risolvere i problemi di grande contenuto di vernice (LCP) e di ritardo del primo input (FID)

I punteggi LCP e FID bassi sono causati dalla bassa velocità della pagina . Se riesci a rendere il tuo sito Web più veloce, entrambi i punteggi LCP e FID si risolveranno da soli.

Per il 99% dei negozi di e-commerce, i problemi LCP e FID sono causati da...

• Caricamento di JavaScript e CSS che bloccano il rendering : senza alcuna ottimizzazione, i file javascript e css vengono caricati in sequenza, il che può bloccare il rendering visivo della tua pagina. Il modo migliore per velocizzare il tuo javascript è caricare lentamente il tuo codice o posticipare il rendering in modo che non blocchi nulla.
• Caricamento di foto e/o video di grandi dimensioni: maggiore è la risoluzione delle tue immagini, più tempo impiegheranno per caricarsi. Non dovresti mai caricare un'immagine più grande di quella visualizzata sul tuo sito web. Inoltre, non dovresti mai caricare alcuna immagine che non sia visibile sullo schermo.
• Un server lento : un server lento non dovrebbe essere un problema con piattaforme completamente ospitate come Shopify, BigCommerce o Shift4Shop, ma se sei su WooCommerce, utilizzare un host più veloce come WPEngine potrebbe velocizzare notevolmente il tuo sito.

Ad alto livello, se affronti i 3 problemi menzionati sopra, avrai un sito Web velocissimo.

Come ottenere una velocità di caricamento della pagina di 1 secondo

Di seguito è riportato un elenco completo delle mie ottimizzazioni della velocità insieme a una valutazione di 1-5 dove 5 indica il massimo impatto sul miglioramento della velocità.

In generale, dovresti concentrarti sui 5 e implementare gli 1 e i 2 solo se hai tempo o se sei super anale :)

Se vuoi sapere come ho ottenuto una velocità di caricamento della pagina di 1 secondo , puoi saltare direttamente ai pezzi grossi con una valutazione di 5 :)!

Abilita la memorizzazione nella cache del browser (valutazione 1 su 5)

La memorizzazione nella cache del browser indica al browser client di memorizzare nella cache le immagini e altri elementi del tuo sito Web sul computer locale dell'utente per rendere la navigazione nel tuo sito Web molto più veloce DOPO il caricamento iniziale della pagina.

La memorizzazione nella cache del browser deve essere SEMPRE attivata, ma tieni presente che la memorizzazione nella cache del browser NON influirà sui tuoi Google Core Web Vitals . Google si preoccupa solo di come il tuo sito web viene caricato da uno stato completamente freddo.

Riduci al minimo i file CSS/JS (voto 1 su 5)

La riduzione al minimo del tuo CSS/JS rimuove tutto lo spazio bianco dai tuoi file CSS e javascript per salvare alcuni byte qua e là.

In generale, la minimizzazione dei tuoi file CSS/JS non migliorerà drasticamente la velocità della tua pagina.

Esegui questa ottimizzazione se stai cercando di ottenere fino all'ultimo millisecondo di velocità dal tuo sito.

Combina file HTML, CSS e JS (voto 2 su 5)

La combinazione dei tuoi file HTML, CSS e JS in un minor numero di file può avere un effetto sulla velocità della tua pagina perché il tuo server deve recuperare meno file.

Ma con la più recente tecnologia del server Web, è possibile recuperare più file contemporaneamente in parallelo, il che riduce drasticamente questa ottimizzazione . Non passerei troppo tempo su questo.

Pulisci i tuoi reindirizzamenti (Voto 2 su 5)

Il tuo sito web è in continua evoluzione e talvolta potresti avere reindirizzamenti da determinate immagini e/o pagine ad altre.

Ad esempio, quando ho migrato tutte le mie pagine da http:// a https:// molti anni fa, ho emesso reindirizzamenti 301 da determinate pagine e immagini alle loro controparti sicure come soluzione rapida.

Ogni reindirizzamento sulla tua pagina rallenterà il tuo sito, quindi assicurati di utilizzare uno strumento come GTMetrix per rilevare eventuali reindirizzamenti sugli elementi della tua pagina e rimuoverli.

Usa un host web più veloce (voto 3 su 5)

Se sei su una piattaforma open source come WooCommerce o Magento, il tuo primo istinto potrebbe essere quello di buttare soldi su un server nuovo di zecca per risolvere i tuoi problemi di velocità della pagina.

Ma la maggior parte delle volte, un server più veloce non risolverà i tuoi problemi di velocità . Tuttavia, se stai attualmente utilizzando un hosting condiviso economico , un VPS o un server dedicato potrebbe fare una differenza significativa.

Usa un CDN (voto 2-3 su 5)

Le reti di distribuzione dei contenuti o CDN archiviano più copie del tuo sito Web e immagini su più server in tutto il mondo in modo che i tuoi contenuti vengano consegnati dal server più vicino e geograficamente posizionato.

Se hai clienti in tutto il mondo e il tuo sito è molto ricco di immagini , l'utilizzo di un CDN potrebbe avere un impatto significativo sulla velocità della tua pagina.

Ma per i siti più piccoli come il mio che servono principalmente gli Stati Uniti, l'utilizzo di un CDN ha solo un impatto marginale sulla velocità della pagina .

Precarica immagini e script più grandi (valutazione 3 su 5)

Metriche come "la più grande pittura di contenuto" misurano la velocità dell'elemento più grande sulla tua pagina. Di conseguenza, ha senso "precaricare" gli elementi più grandi sulla tua pagina fornendo suggerimenti nel codice HTML.

I suggerimenti di precaricamento sono istruzioni nel codice HTML che indicano a un browser quali sono le risorse più importanti per la pagina.

Ad esempio, se hai un'immagine splash di grandi dimensioni , ha senso iniziare a caricare prima questa immagine per migliorare il tuo LCP.

Sebbene il precaricamento di elementi importanti sul tuo sito possa aiutare il tuo punteggio LCP, non avrà alcun impatto sulla velocità complessiva della tua pagina.

Riduci le tue immagini (Voto 4 su 5)

La maggior parte dei nuovi proprietari di negozi di e-commerce utilizza dimensioni delle immagini molto più grandi di quelle richieste . Se il tema del tuo negozio online utilizza immagini 1000×1000, non dovresti mai caricare un'immagine più grande di 1000 x 1000.

Se il tuo sito web utilizza la stessa immagine su più pagine di dimensioni diverse , dovresti creare un'immagine separata (e più piccola) per ogni versione.

Ad esempio, l' immagine di un prodotto nel mio negozio viene visualizzata a dimensione intera, dimensione 50%, dimensione 33% e dimensione 25% a seconda della pagina.

Di conseguenza, ho 4 diversi file di immagine (1 per ogni dimensione) sul mio sito e visualizzo solo l'immagine più piccola richiesta senza perdita di qualità.

Inoltre, dovresti comprimere tutti i tuoi file JPG fino a un massimo di 50 qualità in Photoshop (o qualsiasi programma di immagine che usi).

Comprimi e memorizza nella cache le tue pagine (voto 4 su 5)

Se ti trovi su una piattaforma completamente ospitata come Shopify, BigCommerce o Shift4Shop, è probabile che le tue pagine siano già compresse e completamente memorizzate nella cache prima di essere servite.

Ma se sei su una piattaforma open source come WooCommerce , assicurati di utilizzare un plugin come WP Rocket.

WP Rocket eseguirà il pre-rendering di tutte le tue pagine web in modo che il tuo negozio serva pagine statiche che richiedono un utilizzo minimo o nullo della CPU.

WP Rocket comprimerà anche la tua pagina web al 90% delle sue dimensioni.

Usa meno plugin che caricano codice esterno (Voto 4 su 5)

Ogni plugin che aggiungi al tuo sito web lo rallenterà . Di conseguenza, dovresti essere estremamente attento ogni volta che decidi di installare un nuovo strumento software.

Funzionalità apparentemente innocue a volte possono rallentare drasticamente il tuo sito!

Ad esempio , l'aggiunta di un pulsante di condivisione di Facebook o di un pulsante Pin it di Pinterest può potenzialmente causare il download di una nuova porzione di codice javascript da una fonte esterna.

Per pulsanti come Twitter, Facebook o Pinterest, utilizzo sempre versioni “non javascript” che non richiedono codice caricato esternamente.

Se desideri aggiungere un pulsante di condivisione di Facebook al tuo sito, dovresti utilizzare la versione con collegamento ipertestuale come mostrato di seguito.

https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/

Lazy Carica le tue immagini e il codice Javascript (Voto 5 su 5) - Il più importante!

Quando si tratta di migliorare la velocità di caricamento della pagina, dovresti caricare solo gli elementi del tuo sito che sono obbligatori o visibili.

Ad esempio, se c'è un'immagine sepolta 5 scorrimenti verso il basso nella tua pagina, non dovresti visualizzare quell'immagine finché il tuo cliente non arriva abbastanza lontano da vederla.

Allo stesso modo per il codice javascript, non dovresti caricare alcuna funzionalità per il tuo sito Web fino a quando non deve essere effettivamente caricato.

Come caricare pigramente il tuo codice Javascript e CSS

Il caricamento lento delle immagini è abbastanza semplice e la maggior parte dei temi ha già il caricamento lento delle immagini integrato.

Ma come puoi caricare pigramente il codice javascript in modo sicuro sul tuo sito?

Ecco il segreto come lo faccio.

Per ogni pagina del mio sito, carico prima gli elementi visivi del mio sito . Quindi, carico il codice javascript funzionale sul mio sito solo quando l'utente esegue un'azione sulla pagina .

Ad esempio , se vai su Bumblebee Linens in questo momento, noterai che il mio sito web si carica molto velocemente (a volte in meno di un secondo).

Ma se clicchi sulla pagina o sposti o scorri il mouse , solo allora la live chat viene caricata insieme alle altre funzionalità di "shopping" sul mio negozio.

In altre parole, sono pigro a caricare la funzionalità del carrello della spesa del mio sito solo quando l'utente sta effettuando un'azione o fa acquisti nel mio negozio.

Di conseguenza, la mia pagina si carica molto velocemente perché sto caricando solo gli elementi grafici HTML/CSS del mio sito.

Dal punto di vista dell'utente, l'esperienza di acquisto è perfetta perché ogni pagina si carica velocemente. Nel frattempo, Google vede anche una pagina a caricamento rapido.

Come implementare il caricamento lento di Javascript

Il primo passo necessario per caricare il tuo javascript in modo pigro è capire cosa può essere caricato in modo pigro SENZA rompere il tuo sito.

Ricorda, devi caricare tutto il codice "essenziale" sul tuo sito in modo che l'esperienza di acquisto "visiva" del tuo cliente non sia influenzata.

Di conseguenza, devi caricare ogni pezzo di codice che influisca sulla resa degli elementi grafici del tuo sito.

Ecco come capire cosa è essenziale.

Vai su GTMetrix e analizza il tuo grafico a cascata . Il tuo grafico a cascata ti dirà tutto ciò che è caricato sulla tua pagina e quanto tempo ci vuole per caricare.

Secondo il grafico sopra, klaviyo_subscribe.js impiega 450 ms per caricarsi. Inoltre, klaviyo_subscribe.css impiega altri 420 ms.

Klaviyo è il mio strumento di email marketing e so per certo che Klaviyo NON influisce affatto sul rendering del mio sito.

Di conseguenza, posso facilmente caricare Klaviyo senza alterare gli elementi visivi della pagina.

In effetti, rimuovere il codice Klaviyo ridurrà quasi un secondo intero dalla velocità della mia pagina!

Usando GTMetrix, crea un elenco di tutto il codice a caricamento lento che non è necessario per eseguire il rendering degli elementi visivi del tuo sito e quindi carica lentamente il codice quando si verifica QUALSIASI dei seguenti eventi.

• Movimento del mouse
• Scorrimento della pagina
• Tocco dello schermo

Ecco un piccolo frammento di codice che illustra la mia implementazione di javascript.


function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}

//Un array di eventi DOM che dovrebbero essere interpretati come
//attività dell'utente.
var attivitàEventi = [
'mousedown', 'mousemove', 'keydown', 'scorri',
'touchstart'
];

window.onload = function(){
//aggiunge questi eventi al documento.
//registra la funzione di attività come parametro listener.
activityEvents.forEach(function(eventName) {
document.addEventListener(eventName, activity, true);
});
}

Una volta implementato questo passaggio, dovresti essere in grado di raggiungere velocità di caricamento della pagina inferiori a 1 secondo su dispositivi mobili e desktop!

Come risolvere i problemi di spostamento del layout cumulativo

Il 90% dei tuoi problemi di spostamento cumulativo del layout sarà causato dai seguenti 2 motivi.

Caricamento di elementi senza dimensioni

I parametri della dimensione dell'immagine sono ciò che consente a un browser Web di conoscere la dimensione del contenuto durante il caricamento.

Ad esempio, se definisci le dimensioni dell'immagine nel codice HTML, il browser riserverà spazio per l'immagine durante il caricamento in modo che la pagina non salti.

Tuttavia, se mancano i parametri di dimensione, non avviene alcuna prenotazione e la pagina dovrà riorganizzarsi quando l'immagine verrà finalmente caricata.

La semplice soluzione a questo problema è specificare le dimensioni di ogni elemento del tuo sito come mostrato di seguito.

<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">

Aggiunta dinamica di contenuti con Javascript

Molti plug-in di Shopify utilizzano javascript per visualizzare dinamicamente le funzionalità sul tuo sito web. E a volte questo codice si carica in ritardo, il che può spingere la tua pagina su e giù.

Ad esempio, se pubblichi annunci sul tuo sito, il tuo sito potrebbe saltare su e giù durante il caricamento dell'annuncio.

Il modo migliore per evitare che ciò accada è preallocare lo spazio sulla tua pagina per visualizzare il contenuto aggiunto.

L'aggiunta di spazi bianchi pre-renderizzati può essere problematica per alcuni plug-in, quindi assicurati di contattare il creatore del plug-in se questo è un problema con il tuo negozio.

Come risolvere problemi CLS più complicati

Come accennato in precedenza, il 90% dei tuoi problemi CLS può essere risolto aggiungendo dimensioni ai tuoi elementi. Ma il restante 10% può essere ESTREMAMENTE difficile da risolvere senza utilizzare uno specifico set di strumenti.

Per i miei siti, mi ci sono volute letteralmente 3 settimane per risolvere i miei problemi di CLS perché il test di Google Page Speed ​​NON riflette i punteggi CLS misurati sul campo.

Ad esempio, il mio blog su MyWifeQuitHerJob.com ha ottenuto punteggi CLS perfetti nel test di laboratorio sulla velocità della pagina, ma ha fallito il test CLS sul campo.

Se non sai di cosa sto parlando, ecco una rapida ripartizione di Google Page Speed ​​Test.

Il punteggio più alto sono i dati raccolti da utenti reali che utilizzano il browser Chrome. Il punteggio più basso è il test eseguito in condizioni ideali .

Quando i 2 punteggi non corrispondono, è un problema da risolvere perché Google non ti dice cosa c'è che non va . In effetti, puoi avere un punteggio CLS perfetto in laboratorio ma fallire completamente CLS sul campo.

Ecco cosa Google NON ti dice su CLS.

Il test della velocità della pagina misura il tuo CLS above the fold solo in condizioni ideali. Nella vita reale, un utente scorre su e giù su una connessione Internet potenzialmente molto più lenta.

Per risolvere i tuoi problemi CLS, DEVI emulare una connessione lenta e comportarti come un vero utente umano!

Come emulare un utente reale per correggere CLS

Il modo migliore per farlo è utilizzare il debugger di Chrome integrato.

Ecco come eseguire il debug dei tuoi problemi CLS passo dopo passo.

Passaggio 1: richiama il debugger di Chrome

Passaggio 2: rallenta la velocità della rete

Nella scheda "Rete", ridurre la velocità della pagina fino a "3G lento". Ciò rallenterà notevolmente il caricamento della velocità della pagina in modo da poter rilevare facilmente i cambiamenti di layout.

Passaggio 3: rendering delle regioni di spostamento del layout

Fare clic sulla scheda "Prestazioni" e quindi assicurarsi che la casella "Regioni di spostamento layout" sia selezionata in "Rendering".

Passaggio 4: aggiorna la pagina

Una volta configurato il Chrome Debugger, aggiorna la pagina e scorri su e giù sulla pagina come un vero utente.

Assicurati di cercare le aree evidenziate in blu che indicano uno spostamento del layout.

Passaggio 5: analizzare la sequenza temporale delle prestazioni

Se noti cambiamenti di layout sul tuo sito durante il caricamento, dai un'occhiata più da vicino ingrandendo la sequenza temporale di caricamento della pagina .

Nell'esempio seguente, il layout si sta spostando perché sto caricando un carattere diverso che sposta leggermente la pagina verso il basso perché il nuovo carattere è più grande.

Eseguendo questi test più volte su diverse aree della pagina, puoi individuare e risolvere facilmente i tuoi problemi di spostamento del layout cumulativo .

La parte più difficile è diagnosticare dove si trovano i tuoi problemi CLS perché il test di Google Page Speed ​​tiene conto solo della parte above the fold della tua pagina.

Puoi ottenere oltre 90 punteggi fondamentali per il Web per un negozio di e-commerce

Se segui tutte le istruzioni sopra, puoi raggiungere velocità di caricamento della pagina inferiori a 1 secondo e ottenere una valutazione di 90+ ​​sui tuoi Core Web Vitals sia per dispositivi mobili che desktop.

In generale, dovresti sempre mantenere il tuo sito web il più semplice possibile ed evitare a tutti i costi di utilizzare i plugin!

Chiediti se hai assolutamente bisogno di una determinata funzionalità PRIMA di implementarla . Quindi, cerca soluzioni che non richiedano l'aggiunta di codice javascript aggiuntivo al tuo sito.

Poiché sono super anal, in realtà esamino il codice sorgente per ogni plug-in che installo oltre alle chiamate di rete che avvengono.

Una volta, ho usato alla cieca un plug-in che inviava letteralmente le informazioni del mio sito Web a diverse reti pubblicitarie e vendeva le informazioni sui miei clienti a mia insaputa!

La maggior parte dei problemi di velocità della pagina non sono causati dal tuo tema ma dai plugin che installi . Stai attento e buona vendita!