Cum să optimizați Core Web Vitals pe Shopify

Există o mulțime de informații online despre cum să măsurați Core Web Vitals și dacă site-ul dvs. are scoruri bune sau slabe. Dar există foarte puține sfaturi utile despre ceea ce trebuie să faceți pentru a face îmbunătățiri, în special pe Shopify.

În acest articol, vom analiza exact cum vă puteți îmbunătăți scorul Core Web Vitals în magazinul dvs. Shopify. Am încercat să punem în aplicare cât mai multe dintre aceste recomandări fără un dezvoltator, dar unele necesită implementare tehnică expertă.

Vom detalia pe rând fiecare măsură vitală web de bază, vom explica ce factori le afectează performanța, apoi vă vom arăta cum să îmbunătățiți fiecare măsură CWV în orice magazin Shopify.

Faceți clic pe titlurile de mai jos pentru a trece direct la acea secțiune:

• Cum sunt calculate valorile vitale web de bază pe Shopify
• Cum să îmbunătățiți LCP pe Shopify
• Cum să îmbunătățiți CLS pe ​​Shopify
• Cum să îmbunătățiți FID pe Shopify
• Shopify Core Web Vitals Apps

Care sunt elementele vitale ale web de bază

Să recapitulăm pe scurt ce sunt Core Web Vitals.

Core Web Vitals sunt un set de valori pe care Google le folosește pentru a măsura performanța și experiența paginilor web pentru utilizatori. Pentru fiecare valoare, adresele URL sunt marcate fie ca „Verde - Bine”, „Chihlimbar - Necesita îmbunătățire”, fie „Roșu - Slab”.

Scorurile Core Web Vitals au un impact direct asupra clasamentului motoarelor de căutare.

LCP - Cea mai mare vopsea plină de conținut

Cât timp durează cel mai mare element de pe pagina dvs. pentru a se afișa pe ecran?

CLS - Schimbare cumulativă a aspectului

Cât de mult se modifică aspectul paginii pe măsură ce pagina se încarcă?

FID - Întârziere pentru prima intrare

Cât timp durează pagina să devină receptivă la interacțiuni?

Cum sunt calculate valorile vitale web de bază pe Shopify

Este important să înțelegeți cum calculează Google scorurile Core Web Vitals, deoarece acest lucru afectează modul de a face îmbunătățiri semnificative. Datele pentru Core Web Vitals provin din datele CrUX care măsoară performanța vizitatorilor reali ai site-ului web care folosesc browserul web Chrome. Aceasta se numește „date de câmp”.

Pentru fiecare valoare CWV, există un scor mediu minim pe care trebuie să îl atingeți pentru a nu fi marcat ca „Slab”. Aceasta se bazează pe scorurile medii înregistrate pe grupuri de pagini. Este important să înțelegeți că site-ul dvs. Shopify nu este evaluat pe baza unei valori vitale web de bază; URL-urile de pe site-ul dvs. sunt.

Când magazinul dvs. Shopify nu reușește la o valoare Core Web Vitals, Search Console vă va afișa un eșantion de adrese URL care au fost afectate de problemă. Acest lucru vă ajută să restrângeți unde este problema și să aplicați îmbunătățirea țintei. Înainte de a începe orice activitate de optimizare Core Web Vitals pe magazinul dvs. Shopify, identificați mai întâi care domenii de îmbunătățire vor avea cel mai mare impact. Nu-ți pierde timpul cu o muncă care nu va produce un rezultat pozitiv.

Shopify Core Web Vital Sfaturi de optimizare a metricelor

Core web vitals se referă la furnizarea de conținut și resurse cele mai importante cât mai repede posibil.

Optimizarea vitezei paginii nu este un lucru unic. Organizația dvs. trebuie să adopte o cultură în care impactul vitezei paginii este luat în considerare în toate luarea deciziilor. Pentru fiecare îmbunătățire pe care vă gândiți să o aduceți magazinului dvs., luați în considerare care va fi compromisul în ceea ce privește viteza paginii.

Cum să îmbunătățiți LCP pe Shopify

LCP se referă la cel mai mare element de pe pagina dvs. și la cât timp durează browserul pentru a încărca și a reda acel element pe ecran. Aceasta va fi în mod normal o imagine, dar ar putea fi și un element de text.

Pentru a îmbunătăți LCP într-un magazin Shopify, vă ajută să înțelegeți factorii care afectează LCP. Există patru etape care au loc pentru a încărca elementul LCP.

LCP se referă la cât de mult îi ia browserului web să picteze/reda cel mai mare element pe pagină. Încărcarea și pictura nu sunt aceleași lucruri. Chiar dacă elementul dvs. LCP este optimizat la o dimensiune mică a fișierului, LCP poate dura încă mult timp din cauza:

• Întârzierea încărcării resurselor. Este nevoie de prea mult timp pentru ca browserul să înceapă descărcarea elementului
• Întârziere redare element. După ce elementul LCP a fost descărcat de browser, este nevoie de prea mult timp pentru a reda elementul pe pagină.

Ideea de aici este că LCP este mai mult decât dimensiunea fișierului a celui mai mare element al tău. Este timpul necesar pentru a finaliza procesul în 4 etape de mai sus. Pentru a vă îmbunătăți scorurile LCP, concentrați-vă pe întregul proces de încărcare și redare a elementului LCP.

Cum să găsiți elementul LCP pe orice pagină Shopify

Pentru a îmbunătăți LCP, trebuie să știți ce element dintr-o pagină este LCP. Acest lucru este ușor pe Shopify. Pur și simplu accesați PageSpeed ​​Insights și analizați adresa URL pentru care trebuie să găsiți LCP-ul. Când raportul s-a terminat, derulați în partea de jos și căutați în secțiunea „Diagnosticare”. Va exista un rând numit „Cel mai mare element de vopsea de conținut”. Extindeți acest lucru pentru a vedea detalii despre ce element este LCP pe această pagină.

Nu lazyload elementul LCP

Încărcarea leneră este o metodă folosită pentru a încărca un element numai atunci când acesta devine vizibil în fereastra de vizualizare. Acest lucru ajută la încărcarea mai rapidă a conținutului de deasupra paginii. Nu ar trebui să vă încărcați leneș elementul LCP, deoarece va întârzia cât de repede începe browserul să descarce elementul.

În magazinele Shopify, elementul LCP de pe pagina unui produs va fi în mod normal imaginea principală a produsului. Sau pe o postare de blog, elementul LCP va fi probabil o imagine de antet de blog. Unele teme Shopify vor adăuga automat încărcare leneșă fiecărei imagini, chiar și celor care apar deasupra pliului. Examinați fiecare dintre șabloanele dvs. Shopify și aflați care este elementul LCP. Dacă apare deasupra pliului, asigurați-vă că atributul de mai jos nu este inclus în eticheta HTML:

loading="leneș"

Preîncărcați elementul LCP

Puteți folosi rel="preload” pentru a spune browserelor web să descarce o anumită resursă cât mai curând posibil. Aplicând rel="preload” pe elementul LCP, browserul va acorda prioritate încărcării respectivei resurse în pagină.

Puteți face acest lucru singur prin editarea codului temei. Pentru dezvoltatorii de teme Shopify, există un filtru care poate fi adăugat la șabloanele lichide Shopify care va scoate o etichetă de preîncărcare.

Utilizați imagini Nextgen

Noile formate de imagine, cum ar fi WebP, sunt mai mici în dimensiunea fișierului decât formatele tradiționale, cum ar fi JPG și PNG. Dacă elementul LCP este o imagine, utilizarea unui format de imagine Nextgen va accelera timpul de descărcare. Acolo unde este posibil, utilizați imagini WebP, dar nu uitați să includeți o rezervă pentru browserele vechi care nu acceptă imagini nextgen.

Noile teme Shopify vă vor converti automat imaginile în WebP și le vor difuza în browserele adecvate.

Asigurați-vă că elementul LCP este inclus în răspunsul HTML inițial

Reduceți „întârzierea încărcării resurselor” asigurându-vă că elementul LCP este livrat în răspunsul HTML inițial. Dacă elementul LCP este încărcat în pagină de o resursă externă (cum ar fi un script JS), browserul va dura mai mult să înceapă descărcarea elementului LCP.

Dacă acest lucru vă afectează magazinul Shopify, va depinde de tema magazinului pe care o utilizați. O modalitate rapidă de a testa acest lucru este să aflați care este elementul LCP, apoi să vizualizați pagina cu JS dezactivat. Dacă elementul LCP nu este afișat în HTML de pagină, înseamnă că nu este livrat în răspunsul HTML inițial.

Eliminați resursele care blochează randarea

Sfatul „Eliminați resursele de blocare a redării” există de mult timp. Dar ce înseamnă de fapt? Unele resurse, cum ar fi scripturile și foile de stil, blochează redarea unei pagini web. Când un browser descoperă o resursă, va opri descărcarea paginii și va descărca și executa resursa respectivă. Acest lucru întârzie redarea paginii pentru utilizatori.

Un raport far vă va arăta resursele care blochează randarea pentru orice pagină. Așa că trebuie să aflați care dintre scripturile și foile de stil blochează randarea și apoi să optimizați modul în care sunt livrate.

Eliminați blocarea randării JS

Mai întâi trebuie să înțelegeți două atribute numite defer și async. Aceste atribute HTML pot fi atașate la scripturi externe și pot spune browserului când să descarce/execută resursa.

Prin urmare, aplicând asincron sau amânare la scripturile dvs. JS, puteți minimiza impactul acestora asupra redării paginii. Shopify nu va asincroniza sau amâna automat scripturile, așa că va trebui să accesați șabloanele lichide de temă și să adăugați singur atributul. Dar fiți foarte atenți când faceți acest proces, deoarece trebuie să vă gândiți ce impact ar putea avea amânarea unui script asupra funcționalității magazinului dvs.

Veți descoperi, de asemenea, că aplicațiile și pluginurile pe care le instalați în magazinul dvs. Shopify vor scoate scripturi JS de blocare a randării. Le puteți identifica printr-un raport Lighthouse. Luați în considerare cu atenție fiecare aplicație pe care o instalați în magazinul dvs. și gândiți-vă la impactul potențial asupra vitezei paginii. Unii comercianți nici nu își vor da seama că aplicațiile neutilizate sunt încă instalate într-un magazin și afectează viteza paginii. Când dezinstalați o aplicație, asigurați-vă că aceasta nu lasă în urmă niciun cod vechi în tema dvs.

Eliminați foile de stil CSS care blochează randarea

Pentru a elimina CSS care blochează randarea, ar trebui să introduceți stilurile critice necesare pentru a reda conținutul de deasupra paginii. Nu este eficient să descărcați imediat întreaga foaie de stil pentru fiecare vizitator, deoarece majoritatea CSS-ului nu va fi folosit.

Soluția este să aliniați CSS-ul critic necesar pentru a reda secțiunea de deasupra paginii dvs., incluzând-o într-o etichetă de stil din capul dvs. . Apoi adăugați codul de mai jos la din theme.liquid.js pentru a încărca foaia de stil principală asincron.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Înainte de a lansa acest lucru în magazinul dvs. live, experimentați o temă de testare pentru a verifica dacă pagina dvs. apare în continuare corectă vizual.

Cum să îmbunătățiți CLS pe ​​Shopify

CLS se referă la cât de mult se schimbă aspectul paginii pe măsură ce se încarcă o pagină. Cauza sunt în mod normal imaginile care mută conținutul pe măsură ce sunt încărcate și randate.

Adăugați atribute de lățime și înălțime imaginilor dvs

Cea mai simplă soluție CLS este să vă asigurați că etichetele dvs. img prezintă atribute explicite de lățime și înălțime. Aceste atribute sunt aplicate HTML-ului imaginii și spun browser-ului lățimea și înălțimea imaginii. Cu aceste informații, browserul poate calcula raportul de aspect și dimensiunile imaginii și poate rezerva spațiul necesar pentru imaginea respectivă. Acest lucru oprește deplasarea aspectului atunci când imaginea este adăugată în pagină.

Pentru a face acest lucru pe o imagine din propriul magazin Shopify, conectați-vă și accesați secțiunea de teme. Și accesați „Editați codul” pentru tema dvs. Apoi găsiți fragmentul de cod în șablonul lichid care scoate imaginea și adăugați următorul fragment la eticheta img.

 height="{{img.height}}" width="{{img.width}}

Uită-te la șabloanele lichide pe care le folosești pentru pagina de pornire, colecții, produse și bloguri Shopify și asigură-te că etichetele img fac referire la atributele de lățime și înălțime.

Optimizați-vă fonturile

Acele fonturi web de lux pe care le încărcați din locuri precum fonturile Google pot cauza probleme CLS din cauza unei probleme numite FOUS (flash of unstyled text). Acesta este locul în care browserul web încarcă inițial un font alternativ, iar apoi, când este încărcat fontul web principal, textul este redat din nou, provocând o schimbare de aspect.

Reduceți dependența de fonturile web ale terților În primul rând, încercați să vă reduceți dependența de fonturile web ale terților. Când importați fonturi web, importați numai familiile de fonturi de care aveți nevoie. Nu importați diferitele greutăți și stiluri de font dacă nu sunt niciodată folosite, deoarece acest lucru va mări dimensiunea fișierului fontului.

Preîncărcare fonturi Fonturile Web sunt uneori încărcate dintr-o foaie de stil. Acest lucru întârzie cât de repede poate începe browserul să descarce fontul. În schimb, preîncărcați fișierele cu fonturi în fișierul a magazinului dvs. Acest lucru va spune browserului să încarce fișierul cu fonturi cu prioritate ridicată.

Utilizați font-display: opțional Font-display este o proprietate CSS care spune browserului ce să facă atunci când un font nu a fost descărcat în 100 ms. Browserul va încărca inițial fontul de rezervă și dacă fontul personalizat nu s-a terminat de descărcat în 100 ms, browserul va păstra fontul de rezervă redat pe pagină. Acest lucru reduce riscul ca fontul personalizat să se încarce prea târziu și să provoace o schimbare a aspectului.

Cum să îmbunătățiți FID pe Shopify

Din experiența noastră, FID este cea mai puțin comună valoare Core Web Vital pe care o vedem că afectează magazinele Shopify. Gândiți-vă la FID ca la o modalitate de a măsura cât de receptivă este o pagină în timpul încărcării. Nimic nu frustrează mai mult utilizatorii decât clicul/atingerea și nu se întâmplă nimic.

FID este similar cu o altă măsurătoare numită Total Blocking Time (TBT). TBT măsoară timpul dintre momentul în care pagina începe să fie randată (First Contentful Paint sau FCP) și momentul în care pagina devine receptivă (Time to Interactive sau TTI).

TBT este cauzat de „sarcini lungi” care blochează procesarea firului principal. Firul principal este locul în care browserul procesează tot ceea ce este necesar pentru a încărca o pagină. Dacă sarcinile lungi blochează procesarea firului principal, aceasta întârzie cât de repede o pagină devine interactivă pentru utilizatori.

Care este diferența dintre FID și TBT

Principala diferență dintre FID și TBT este că FID se bazează pe date de câmp (date de la utilizatori reali care v-au vizitat magazinul Shopify). În timp ce TBT este măsurabil în laborator și este calculat prin efectuarea de teste într-un mediu artificial cu condiții de rețea definite.

Deoarece nu puteți măsura FID atunci când vă testați propriile pagini, ar trebui să măsurați TBT.

Pentru a îmbunătăți FID, trebuie să accelerați cât de repede răspunde magazinul dvs. Shopify la prima interacțiune a unui utilizator. Acest lucru se face făcând paginile dvs. Shopify să se încarce cât mai eficient posibil. Concentrați-vă pe aceste trei domenii:

Reduceți impactul codului terților

Ca și în cazul tuturor valorilor vitale web de bază, JavaScript terță parte este adesea cauza problemelor. Orice terță parte care blochează firul principal pentru mai mult de 250 ms va fi semnalată într-un raport Lighthouse. Rulați paginile prin Lighthouse pentru a identifica ce scripturi terță parte cauzează probleme. Apoi decideți care dintre ele pot fi setate să fie asincrone sau amânate.

Reduceți timpul de execuție JavaScript

Timpul necesar pentru executarea JavaScript-ului este, de asemenea, important. În primul rând, rulați paginile dvs. prin Lighthouse și identificați ce scripturi durează cel mai mult pentru a fi executate. Lighthouse va semnala toate scripturile care durează mai mult de 2 secunde.

Utilizați divizarea codului În loc să livrați tot codul JavaScript într-un singur fișier, împărțiți codul în bucăți mai mici și furnizați numai codul necesar pentru pagina respectivă. Acest lucru nu este ușor și necesită asistență din partea dezvoltatorilor care vă gestionează codul. Veți găsi acest lucru mult mai ușor dacă este integrat în dezvoltarea temei dvs. Shopify la începutul proiectului.

Reduceți și comprimați codul Când reduceți codul, eliminați spațiile și comentariile inutile. Acest lucru reduce dimensiunea fișierului, dar accelerează cât de repede un browser poate executa codul. Unul dintre lucrurile grozave despre Shopify este că majoritatea temelor js sunt reduse automat.

Ca și minimizarea, comprimarea js reduce dimensiunea fișierului și accelerează cât de repede browserul web poate executa codul.

Minimizați lucrul cu fire

Firul principal face toată munca de procesare și calculează cum se construiește o pagină. Când firul principal este ocupat de sarcini intensive, TBT-ul tău va fi mai rău. Acest lucru se reduce în principal la cât de robustă este tema dvs. Shopify. Temele ieftine create de dezvoltatori săraci nu se vor încărca la fel de eficient ca cele dezvoltate de experții Shopify.

Cum poți minimiza lucrul cu firele din magazinul tău Shopify? După cum am menționat mai sus, este mult mai ușor dacă acest lucru este integrat în tema ta de la început. Vă recomandăm să cumpărați o temă Shopify premium cu recenzii excelente. Sau, dacă vă construiți propriul magazin Shopify, asigurați-vă că lucrați cu dezvoltatori experți Shopify, care se pot asigura că tema dvs. este optimizată pentru a minimiza munca în fire.

Cum se măsoară performanța Core Web Vitals

Acum înțelegeți cum să îmbunătățiți Core Web Vitals în magazinul dvs. Shopify, apoi trebuie să știți cum să vă măsurați progresul Core Web Vitals.

Search Console

Cel mai rapid mod de a vedea cum funcționează în prezent magazinul dvs. Shopify pentru Core Web Vitals este prin Search Console. Accesați raportul Core Web Vitals din meniul din stânga pentru a obține date despre performanța actuală a site-ului dvs. Acesta va include o detaliere a locurilor în care aveți probleme Core Web Vitals și vă va arăta un eșantion de adrese URL afectate.

Pagespeed Insights/Lighthouse

Pagespeed Insights este un instrument Google gratuit care vă permite să măsurați viteza paginii oricărei pagini. Rulați adresele URL Shopify prin instrument pentru a obține o detaliere a performanței dvs., împreună cu acțiunile recomandate pentru a obține un scor mai mare.

Raportul CrUX

CrUX este propriul set de date Google privind viteza/performanța pentru milioane de pagini reale. Puteți accesa datele CrUX pentru propriul magazin Shopify utilizând Tabloul de bord Google CrUX Data Studio. Tabloul de bord oferă o detaliere amănunțită a modului în care site-ul dvs. a performat prin valorile Core Web Vitals în ultimele 16 luni.

Ce înseamnă toți acești termeni CWV?

Când începeți să vă uitați la Core Web Vitals, veți întâlni o mulțime de terminologii complicate, iată ce înseamnă totul:

Core Web Vitals Shopify Apps

Există o mulțime de aplicații Shopify care pretind că pot îmbunătăți scorurile Core Web Vitals. Unele dintre aceste aplicații sunt eficiente și oferă o îmbunătățire a performanței. Deși acest lucru vă poate îmbunătăți scorurile Core Web Vitals, nu există nicio garanție că veți vedea vreun efect. Acest lucru se datorează faptului că scorurile Core Web Vitals sunt unice pentru fiecare magazin Shopify. Dacă scorurile Core Web Vitals ale magazinului dvs. sunt slabe din cauza unei anumite probleme de temă, probabil că o aplicație nu va face nicio diferență.

Dacă doriți să urmați traseul aplicației, vă recomandăm să încercați o aplicație și să observați efectul pe care îl are asupra performanței. Iată câteva aplicații sugerate pentru încercare:

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

Dacă aveți nevoie de sfaturi sau asistență pentru afacerea dvs. de comerț electronic, trimiteți-ne echipei noastre un rând și vom fi bucuroși să vă ajutăm.