Cum să obțineți un scor de peste 90 de puncte Web Vitals pentru un magazin de comerț electronic (studiu de caz)

În această postare, veți afla cum să obțineți un scor de peste 90 de ori pe Google Core Web Vitals (desktop și mobil) pentru un magazin de comerț electronic, chiar dacă utilizați o mulțime de pluginuri.

Când Google și-a lansat prima dată evaluarea elementelor vitale web , mulți proprietari de magazine de comerț electronic au început să intre în panică.

Spre deosebire de un site de conținut de bază sau un blog, un magazin de comerț electronic are o imagine grea și necesită mult mai multe elemente funcționale pentru a închide o vânzare. Și fiecare caracteristică adăugată încetinește site-ul dvs.

De exemplu, chat-ul live poate dura 6-10 secunde pentru a se încărca singur. Încărcarea urmăririi de bază a e-mailurilor cu Klaviyo poate dura 1-2 secunde. Chiar și adăugarea pixelului Facebook poate dura o sută de milisecunde pentru încărcare.

Nu contează dacă codul dvs. folosește încărcare amânată sau asincronă. Fiecare element suplimentar de pe site-ul dvs. va avea un impact negativ asupra elementelor vitale ale web-ului dvs.

În prezent, conform Searchmetrics, 96% dintre site-urile testate în SUA nu reușesc Google Web Vitals Assessment de bază pentru desktop, mobil sau ambele.

Și rata de eșec este chiar mai mare pentru magazinele de comerț electronic din cauza funcționalității necesare pentru efectuarea tranzacțiilor online.

În această postare, vă voi arăta pașii exacți pe care i-am făcut pentru a obține o evaluare de peste 90 de puncte Google Core Vitals pentru site-ul meu cu 7 cifre al magazinului de comerț electronic.

Obțineți mini-cursul meu gratuit despre cum să începeți un magazin de comerț electronic de succes

Dacă sunteți interesat să începeți o afacere de comerț electronic, am creat un pachet cuprinzător de resurse care vă vor ajuta să vă lansați propriul magazin online de la zero. Asigurați-vă că îl apucați înainte de a pleca!

Click aici pentru a descarca

Ce sunt Google Core Vitals?

Google Core Web Vitals este un set de factori pe care Google îi încorporează în clasamentele de căutare pentru a măsura calitatea experienței utilizatorului.

Google Core Vitals este format din 3 componente.

• Cea mai mare vopsea conținută (Google necesită 2,5 secunde sau mai puțin) - Aceasta este o măsurare a timpului necesar pentru a vedea cea mai mare bucată de conținut afișată pe ecran. Practic, este cât de repede se încarcă site-ul dvs.
• Prima întârziere de intrare (Google necesită 100 de milisecunde sau mai puțin) - Aceasta este o măsurare a capacității de reacție și a utilizabilității paginii dvs. Mai exact, Google măsoară întârzierea dintre un vizitator care face clic pe o funcție interactivă și cât de repede răspunde pagina la acel clic.
• Schimbarea aspectului cumulativ (Google necesită un scor de .1 sau mai puțin) - Aceasta este o măsurare a cât de stabilă este pagina dvs. pe măsură ce se încarcă. Conținutul dvs. se deplasează în sus și în jos pe măsură ce pagina este redată? Aceasta este singura valoare Google Core Web Vital care nu are nicio legătură cu viteza paginii. De asemenea, este cel mai greu de depanat dacă nu știi ce faci.

Secțiunile rămase din această postare vor detalia EXACT modul în care am remediat aceste 3 valori pentru magazinul meu de comerț electronic pentru a obține un scor de peste 90 de puncte Google Core Vitals atât pe desktop, cât și pe mobil.

Magazinul de comerț electronic utilizat pentru acest studiu de caz

Cei mai mulți proprietari de magazine de comerț electronic sunt pe Shopify, WooCommerce, BigCommerce sau Shift4Shop și toate aceste strategii se aplică indiferent de platforma pe care vă aflați.

Magazinul meu cu 7 figuri este situat la BumblebeeLinens.com. Simțiți-vă liber să rulați testul de viteză al paginii Google în magazinul meu în timp ce citiți această postare pentru a vedea rezultatele mele în primă instanță.

În primul rând, magazinul meu folosește multe dintre cele mai recente clopote și fluiere de comerț electronic, deoarece predez un curs de comerț electronic la Profitable Online Store.

De fapt, îmi tratez magazinul ca pe un laborator pentru a testa noi funcții pe măsură ce acestea ies și raportează despre ele pe acest blog.

Iată pluginurile și serviciile pe care le rulez în magazinul meu pentru acest studiu de caz.

• Klaviyo - Platforma mea de marketing prin e-mail
• Postscript - Platforma mea de marketing SMS
• Vizury - Furnizorul meu de notificări push
• ManyChat - Furnizorul meu de marketing Facebook Messenger care îmi implementează chatul live
• Gorgias - Software-ul meu de servicii pentru clienți care gestionează toate corespondențele clienților.
• Spin To Win Popup - Magnetul meu principal pentru magazinul meu
• Facebook Pixel - Urmărește toate vânzările mele de pe Facebook
• Google Analytics - Urmărește vânzările site-ului meu
• Notificare Slide Up - Oferă dovezi sociale prin afișarea vânzărilor pe măsură ce intră

Doar pentru distracție, acesta este cât de repede se încarcă site-ul meu FĂRĂ optimizări .

Acesta este cât de repede rulează cu optimizările pe care urmează să vă învăț cum să le implementați.

Cum să remediați problemele de vopsea mare (LCP) și prima întârziere de intrare (FID)

Scorurile scăzute LCP și FID sunt cauzate de viteze de pagină lente . Dacă puteți face site-ul dvs. mai rapid, atunci atât scorurile dvs. LCP, cât și cele FID se vor rezolva singure.

Pentru 99% din magazinele de comerț electronic, problemele LCP și FID sunt cauzate de ...

• Încărcarea JavaScript și CSS care blochează redarea - Fără optimizare, fișierele javascript și css sunt încărcate secvențial, care pot bloca redarea vizuală a paginii dvs. Cel mai bun mod de a vă accelera javascriptul este să vă încărcați leneș codul sau să amânați randarea, astfel încât să nu blocheze nimic.
• Încărcarea fotografiilor mari și / sau a videoclipurilor - Cu cât imaginile dvs. au o rezoluție mai mare și mai mare, cu atât vor dura mai mult încărcarea. Nu trebuie să încărcați niciodată o imagine mai mare decât cea afișată pe site-ul dvs. web. De asemenea, nu trebuie să încărcați niciodată nicio imagine care nu este vizibilă pe ecran.
• Un server lent - Un server lent nu ar trebui să fie o problemă cu platformele găzduite complet, cum ar fi Shopify, BigCommerce sau Shift4Shop, dar dacă sunteți pe WooCommerce, atunci dacă mergeți cu o gazdă mai rapidă, cum ar fi WPEngine, ar putea accelera dramatic site-ul dvs.

La un nivel ridicat, dacă abordați cele 3 probleme menționate mai sus, atunci veți avea un site web rapid.

Cum să obțineți viteze de încărcare de 1 pagină

Mai jos este o listă completă a optimizărilor mele de viteză, împreună cu un rating de 1-5, unde 5 indică cel mai mare impact asupra îmbunătățirii vitezei.

În general, ar trebui să te concentrezi pe 5 și să implementezi 1 și 2 numai dacă ai timp sau dacă ești super anal :)

Dacă doriți să știți cum am atins o viteză de încărcare de 1 secundă de pagină , puteți sări direct la armele mari cu un rating de 5 :)!

Activați cache-ul browserului (Evaluarea 1 din 5)

Memorarea în cache a browserului îi spune browserului client să memoreze în cache imaginile și alte elemente ale site-ului dvs. web pe computerul local al utilizatorului pentru a face navigarea site-ului dvs. web mult mai rapid DUPĂ încărcarea inițială a paginii.

Memorarea în cache a browserului ar trebui să fie întotdeauna activată, dar rețineți că memoria cache a browserului NU va afecta Google Core Web Vitals . Lui Google îi pasă doar de modul în care site-ul dvs. web este încărcat dintr-o stare complet rece.

Minimizați fișierele CSS / JS (Evaluare 1 din 5)

Minimizarea CSS / JS elimină tot spațiul alb din fișierele CSS și javascript pentru a salva câțiva octeți aici și acolo.

În general, reducerea fișierelor CSS / JS nu va îmbunătăți dramatic viteza paginii.

Efectuați această optimizare dacă încercați să obțineți până la ultima milisecundă de viteză de pe site-ul dvs.

Combinați fișiere HTML, CSS și JS (Evaluare 2 din 5)

Combinarea fișierelor HTML, CSS și JS în mai puține fișiere poate avea un efect asupra vitezei paginii dvs., deoarece serverul dvs. trebuie să aducă mai puține fișiere.

Dar cu cea mai recentă tehnologie de server web, mai multe fișiere pot fi preluate în același timp în paralel, ceea ce atenuează dramatic această optimizare . Nu aș petrece prea mult timp în asta.

Curățați-vă redirecționările (Rating 2 din 5)

Site-ul dvs. web se schimbă constant și uneori este posibil să aveți redirecționări de la anumite imagini și / sau pagini la altele.

De exemplu, când am migrat toate paginile mele de la http: // la https: // acum mulți ani, am emis 301 redirecționări de la anumite pagini și imagini către omologii lor siguri ca soluție rapidă.

Fiecare redirecționare de pe pagina dvs. va încetini site-ul dvs., deci asigurați-vă că utilizați un instrument precum GTMetrix pentru a detecta orice redirecționări de pe elementele paginii dvs. și pentru a le elimina.

Utilizați un gazdă web mai rapidă (Rating 3 din 5)

Dacă vă aflați pe o platformă open source, cum ar fi WooCommerce sau Magento, primul dvs. instinct ar putea fi să aruncați bani pe un server nou pentru a remedia problemele de viteză a paginii.

Dar de cele mai multe ori, un server mai rapid nu vă va rezolva problemele de viteză . Cu toate acestea, dacă utilizați în prezent găzduire partajată ieftină , un VPS sau un server dedicat ar putea face o diferență semnificativă.

Utilizați un CDN (evaluare 2-3 din 5)

Rețelele de livrare a conținutului sau CDN-urile stochează mai multe copii ale site-ului și imaginilor dvs. pe mai multe servere din întreaga lume, astfel încât conținutul dvs. să fie livrat de cel mai apropiat server geografic.

Dacă aveți clienți în întreaga lume și site-ul dvs. este foarte greu de utilizat , atunci utilizarea unui CDN ar putea avea un impact semnificativ asupra vitezei paginii.

Dar pentru site-urile mai mici, precum ale mele, care deservesc în principal Statele Unite, utilizarea unui CDN are doar un impact marginal asupra vitezei paginii .

Preîncărcați imagini și scripturi mai mari (evaluare 3 din 5)

Valori precum „cea mai mare vopsea conținută” măsoară viteza celui mai mare element de pe pagina dvs. Prin urmare, este logic să „preîncărcați” cele mai mari elemente de pe pagina dvs., oferind indicii în codul dvs. HTML.

Sfaturile de preîncărcare sunt instrucțiuni din codul HTML care indică un browser ce resurse sunt cele mai importante pentru pagină.

De exemplu, dacă aveți o imagine mare , este logic să începeți să încărcați mai întâi această imagine pentru a vă îmbunătăți LCP-ul.

Deși preîncărcarea elementelor importante de pe site-ul dvs. vă poate ajuta să obțineți un scor LCP, acesta nu va avea impact asupra vitezei generale a paginii.

Micsorati-va imaginile (Rating 4 din 5)

Majoritatea noilor proprietari de magazine de comerț electronic utilizează dimensiuni ale imaginilor mult mai mari decât este necesar . Dacă tema magazinului dvs. online utilizează 1000 × 1000 de imagini, atunci nu ar trebui să încărcați niciodată o imagine mai mare de 1000 x 1000.

Dacă site-ul dvs. web utilizează aceeași imagine pe mai multe pagini în dimensiuni diferite , ar trebui să creați o imagine separată (și mai mică) pentru fiecare versiune.

De exemplu, o imagine a produsului din magazinul meu este afișată în mărime completă, 50%, 33% și 25% în funcție de pagină.

Drept urmare, am 4 fișiere de imagine diferite (1 pentru fiecare dimensiune) pe site-ul meu și afișez doar cea mai mică imagine necesară fără pierderi de calitate.

În plus, ar trebui să comprimați toate fișierele JPG până la maximum 50 de calitate în Photoshop (sau orice program de imagine pe care îl utilizați).

Comprimă și cache-ți paginile (Rating 4 din 5)

Dacă vă aflați pe o platformă găzduită complet, cum ar fi Shopify, BigCommerce sau Shift4Shop, este posibil ca paginile dvs. să fie deja comprimate și complet stocate în cache înainte de a fi difuzate.

Dar dacă vă aflați pe o platformă open source precum WooCommerce , asigurați-vă că utilizați un plugin precum WP Rocket.

WP Rocket va reda în prealabil toate paginile dvs. web, astfel încât magazinul dvs. să difuzeze pagini statice care necesită o utilizare redusă sau deloc a procesorului.

WP Rocket vă va comprima, de asemenea, pagina web la 90% din dimensiunea sa.

Folosiți mai puține pluginuri care încarcă codul extern (evaluare 4 din 5)

Fiecare plugin pe care îl adăugați pe site-ul dvs. web îl va încetini . Prin urmare, ar trebui să fiți extrem de atent ori de câte ori decideți să instalați un nou instrument software.

Caracteristicile aparent inofensive pot uneori încetini dramatic site-ul dvs.!

De exemplu , adăugarea unui buton de partajare Facebook sau a unui buton Pinterest Pin it poate determina descărcarea unei noi bucăți de cod javascript dintr-o sursă externă.

Pentru butoane precum Twitter, Facebook sau Pinterest, folosesc întotdeauna versiuni „non javascript” care nu necesită cod încărcat extern.

Dacă doriți să adăugați un buton de partajare Facebook pe site-ul dvs., ar trebui să utilizați versiunea hyperlink, așa cum se arată mai jos.

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

Lazy Încarcă-ți imaginile și codul Javascript (Rating 5 din 5) - Cel mai important!

Când vine vorba de îmbunătățirea vitezei de încărcare a paginii, ar trebui să încărcați doar elemente ale site-ului dvs. care sunt necesare sau vizibile.

De exemplu, dacă există o imagine îngropată cu 5 derulări în jos în pagina dvs., nu ar trebui să afișați imaginea respectivă până când clientul dvs. nu o face suficient de departe pentru a o vedea.

În mod similar pentru codul javascript, nu ar trebui să încărcați nicio funcționalitate pentru site-ul dvs. web până când nu trebuie să fie încărcat.

Cum să vă încărcați leneș codul Javascript și codul CSS

Încărcarea leneșă a imaginilor este destul de simplă și majoritatea temelor au deja încorporată încărcarea leneșă a imaginii.

Dar cum puteți lenevi să încărcați codul javascript în siguranță pe site-ul dvs.?

Iată secretul cum o fac.

Pentru fiecare pagină de pe site-ul meu, încarc mai întâi elementele vizuale ale site-ului meu . Apoi, încărc codul Javascript funcțional pe site-ul meu numai după ce utilizatorul face o acțiune pe pagină .

De exemplu , dacă mergeți la Bumblebee Linens chiar acum, veți observa că site-ul meu web se încarcă foarte repede (uneori în mai puțin de o secundă).

Dar dacă faceți clic pe pagină sau mutați sau derulați mouse-ul , abia atunci se încarcă chatul live împreună cu celelalte funcții de „cumpărături” din magazinul meu.

Cu alte cuvinte, sunt leneș să încărc funcționalitatea coșului de cumpărături de pe site-ul meu numai atunci când utilizatorul face o acțiune sau face cumpărături în magazinul meu.

Prin urmare, pagina mea se încarcă foarte repede, deoarece încarc doar elementele grafice HTML / CSS ale site-ului meu.

Din perspectiva utilizatorului, experiența de cumpărături este perfectă, deoarece fiecare pagină se încarcă rapid. Între timp, Google vede și o pagină de încărcare rapidă.

Cum să implementați Javascript Lazy Loading

Primul pas necesar pentru încărcarea leneșă a javascriptului este de a afla ce poate fi leneș încărcat FĂRĂ ruperea site-ului dvs.

Amintiți-vă, trebuie să încărcați tot codul „esențial” pe site-ul dvs., astfel încât experiența de cumpărături „vizuală” a clientului dvs. să nu fie afectată.

Ca urmare, trebuie să încărcați fiecare bucată de cod care afectează redarea elementelor grafice ale site-ului dvs.

Iată cum puteți afla ce este esențial.

Accesați GTMetrix și analizați diagrama cascadei . Diagrama cascadei vă va spune tot ce este încărcat pe pagina dvs. și cât durează încărcarea.

Conform graficului de mai sus, klaviyo_subscribe.js necesită încărcarea a 450 ms. În plus, klaviyo_subscribe.css durează încă 420 ms.

Klaviyo este instrumentul meu de marketing prin e-mail și știu cu adevărat că Klaviyo NU afectează deloc redarea site-ului meu.

Drept urmare, pot să lenevesc cu ușurință Klaviyo fără a afecta elementele vizuale ale paginii.

De fapt, eliminarea codului Klaviyo va rade aproape o secundă din viteza paginii mele!

Folosind GTMetrix, creați o listă cu toate codurile de încărcare lentă care nu sunt necesare pentru a reda elementele vizuale ale site-ului dvs. și apoi încărcați leneș codul atunci când apar ORICE din următoarele evenimente.

• Mișcarea mouse-ului
• Derulare pagină
• Ecran tactil

Iată un mic fragment de cod care ilustrează implementarea javascriptului meu.


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

// O serie de evenimente DOM care ar trebui interpretate ca
// activitatea utilizatorului.
var activityEvents = [
„mousedown”, „mousemove”, „keydown”, „scroll”,
„touchstart”
];

window.onload = function () {
// adăugați aceste evenimente în document.
// înregistrează funcția de activitate ca parametru ascultător.
activityEvents.forEach (funcție (eventName) {
document.addEventListener (eventName, activitate, true);
});
}

Odată ce ați implementat acest pas, ar trebui să puteți atinge viteze de încărcare de sub o secundă de pagină pe mobil și desktop!

Cum să vă remediați problemele cumulate de schimbare a aspectului

90% din problemele dvs. de schimbare a aspectului cumulativ vor fi cauzate de următoarele 2 motive.

Încărcarea elementelor fără dimensiuni

Parametrii de dimensiune ai imaginii permit un browser web să cunoască dimensiunea conținutului pe măsură ce se încarcă.

De exemplu, dacă definiți dimensiunile imaginii în codul dvs. HTML, browserul va rezerva spațiu pentru imaginea dvs. pe măsură ce se încarcă, astfel încât pagina să nu sară.

Totuși, dacă parametrii de dimensiune lipsesc, nu are loc nicio rezervare și pagina va trebui să se rearanjeze singură atunci când imaginea se încarcă în cele din urmă.

Soluția simplă la această problemă este să specificați dimensiunile fiecărui element de pe site-ul dvs., așa cum se arată mai jos.

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

Adăugarea dinamică de conținut cu Javascript

Multe pluginuri Shopify folosesc javascript pentru a afișa dinamic caracteristici pe site-ul dvs. web. Și, uneori, acest cod se încarcă târziu, ceea ce vă poate împinge pagina în sus și în jos.

De exemplu, dacă afișați anunțuri pe site-ul dvs., site-ul dvs. poate sări în sus și în jos pe măsură ce se încarcă anunțul.

Cel mai bun mod de a preveni acest lucru este să alocați în prealabil spațiu pe pagina dvs. pentru a fi afișat conținutul adăugat.

Adăugarea de spațiu alb pre-redat poate fi problematică pentru anumite pluginuri, așa că asigurați-vă că contactați creatorul pluginului dacă aceasta este o problemă cu magazinul dvs.

Cum să rezolvați probleme CLS mai complicate

După cum sa menționat anterior, 90% din problemele dvs. CLS pot fi rezolvate prin adăugarea de dimensiuni elementelor dvs. Dar restul de 10% poate fi EXTREM de dificil de rezolvat fără a utiliza un set specific de instrumente.

Pentru site-urile mele, am luat literalmente 3 săptămâni pentru a remedia problemele mele CLS, deoarece testul Google Page Speed ​​nu reflectă scorurile CLS măsurate pe teren.

De exemplu, blogul meu de la MyWifeQuitHerJob.com a avut scoruri CLS perfecte la testul laboratorului de viteză a paginii, dar nu a reușit testul CLS în teren.

Dacă nu știți despre ce vorbesc, iată o defalcare rapidă a Google Page Speed ​​Test.

Scorul cel mai înalt este datele colectate de la utilizatori reali folosind browserul Chrome. Scorul inferior este testul în condiții ideale .

Când cele două scoruri nu se potrivesc, este o problemă de remediat deoarece Google nu vă spune ce nu este în regulă . De fapt, puteți obține un scor CLS perfect în laborator, dar nu reușiți complet CLS pe ​​teren.

Iată ce NU vă spune Google despre CLS.

Testul de viteză a paginii măsoară CLS-ul dvs. deasupra pliantei în condiții ideale. În viața reală, un utilizator derulează în sus și în jos pe o conexiune la internet mult mai lentă.

Pentru a vă rezolva problemele CLS, TREBUIE să emulați o conexiune lentă și să vă comportați ca un adevărat utilizator uman!

Cum să emulați un utilizator real pentru a remedia CLS

Cel mai bun mod de a face acest lucru este folosind depanatorul Chrome încorporat.

Iată cum să depanați problemele CLS pas cu pas.

Pasul 1: deschideți Chrome Debugger

Pasul 2: Reduceți viteza rețelei

În fila „Rețea”, accelerați viteza paginii la „Slow 3G”. Acest lucru va încetini dramatic încărcarea vitezei paginii, astfel încât să puteți detecta cu ușurință schimbările de aspect.

Pasul 3: redați aspectul regiunilor de schimbare

Faceți clic pe fila „Performanță” și apoi asigurați-vă că este bifată caseta „Regiuni schimbare aspect” sub „Renderizare”.

Pasul 4: Reîmprospătați pagina

După ce ați configurat Chrome Debugger, reîmprospătați pagina și derulați în sus și în jos pe pagina dvs. ca un utilizator real.

Asigurați-vă că căutați zone evidențiate în albastru care indică o schimbare a aspectului.

Pasul 5: Analizați cronologia performanței

Dacă vedeți schimbări de aspect pe site-ul dvs. la încărcare, atunci aruncați o privire mai atentă prin mărirea cronologiei de încărcare a paginii .

În exemplul de mai jos, aspectul se schimbă, deoarece încarc un alt font care schimbă ușor pagina în jos, deoarece noul font este mai mare.

Rulând aceste teste pe diferite regiuni ale paginii dvs. de mai multe ori, puteți detecta și remedia cu ușurință problemele dvs. de schimbare a aspectului cumulativ .

Cea mai grea este diagnosticarea problemelor dvs. CLS, deoarece testul Google Page Speed ​​testează doar partea din partea superioară a paginii.

Puteți obține peste 90 de scoruri esențiale Web pentru un magazin de comerț electronic

Dacă urmați toate instrucțiunile de mai sus, puteți atinge viteze de încărcare de sub o secundă de pagină și puteți obține o evaluare de peste 90 pe Core Web Vitals atât pentru mobil, cât și pentru desktop.

În general, ar trebui să vă păstrați întotdeauna site-ul web cât mai simplu posibil și să evitați folosirea pluginurilor cu orice preț!

Întrebați-vă dacă aveți absolut nevoie de o anumită caracteristică ÎNAINTE să o implementați . Apoi, căutați soluții care nu necesită adăugarea unui cod javascript suplimentar pe site-ul dvs.

Deoarece sunt super anal, examinez de fapt codul sursă pentru fiecare plugin pe care îl instalez pe lângă apelurile de rețea care au loc.

Odată, am folosit orbește un plugin care îmi trimitea literalmente informații despre site-ul web în mai multe rețele publicitare și îmi vindea informațiile despre clienți fără știrea mea!

Majoritatea problemelor legate de viteza paginilor nu sunt cauzate de tema dvs., ci de pluginurile pe care le instalați . Aveți grijă și vindeți fericit!