Shpejtësia në Shopify: tema, aplikacione, imazhe

Çdo dyqan Shopify punon në të njëjtët serverë dhe CDN, ndaj një dyqan i ngadaltë është i ngadaltë për shkak të asaj që ngarkon: temës, skripteve të aplikacioneve, imazheve dhe videove. Optimizimi i shpejtësisë në Shopify do të thotë t'i hiqni dhe t'i zvogëloni këto, jo të ndryshoni hostimin. Në shumicën e dyqaneve fitimet më të mëdha vijnë nga heqja e kodit të aplikacioneve të papërdorura, kompresimi i imazhit hero dhe ngarkimi më vonë i widget-eve.

Ky udhëzues tregon si ta matni shpejtësinë siç duhet, pastaj kalon rregullimet me radhën ku zakonisht japin rezultat. Është pjesë e udhëzuesit SEO për Shopify.

Matni faqet e duhura

Testoni një faqe produkti dhe një faqe koleksioni, jo vetëm faqen kryesore. Janë faqet që renditen dhe ku mbërrijnë blerësit.

Google PageSpeed Insights jep pikëzime laboratori për një ngarkim të vetëm dhe, nëse dyqani ka mjaft vizitorë, Core Web Vitals reale nga përdoruesit e Chrome për 28 ditët e fundit. Numrat e përdoruesve realë janë ata që përdor Google.
Raporti Core Web Vitals në Search Console i grupon URL-të sipas statusit, ndaj shihni nëse të gjitha faqet e produkteve kanë të njëjtin problem.
Raporti i performancës web i Shopify te Analytics tregon të njëjtat metrika të përdoruesve realë në kohë, gjë e dobishme për të parë nëse një ndryshim ndihmoi.

Përqendrohuni te tri Core Web Vitals: Largest Contentful Paint (sa shpejt shfaqet imazhi ose teksti kryesor), Interaction to Next Paint (sa shpejt reagon faqja ndaj një prekjeje) dhe Cumulative Layout Shift (sa lëvizin elementet). Pikëzimet e laboratorit luhaten nga një test në tjetrin; mos ndiqni një 100 të përsosur.

1. Hiqni kodin e aplikacioneve që nuk i përdorni

Aplikacionet janë shkaku më i zakonshëm i një dyqani Shopify të ngadaltë. Secili që prek dyqanin mund të shtojë JavaScript dhe CSS në çdo faqe.

Listoni aplikacionet që keni. Çinstaloni ato që nuk i përdorni më.
Çinstalimi nuk heq gjithmonë kodin që një aplikacion shtoi në temë. Kërkoni në skedarët e temës (Online Store > Themes > Edit code) emrin e aplikacionit dhe hiqni snippet-et dhe tag-et e skripteve të mbetura.
Preferoni aplikacionet që përdorin theme app extensions (blloqe aplikacioni që i shtoni në redaktorin e temës). Hiqen pastër kur çinstaloni dhe ngarkohen vetëm aty ku i vendosni.
Për aplikacionet që mbani, kontrolloni nëse ngarkohen në çdo faqe. Një tabelë masash duhet vetëm në faqet e produkteve.

2. Rregulloni imazhin më të madh

Në shumicën e faqeve të produkteve dhe koleksioneve, elementi më i madh është një foto produkti ose një baner hero. Bëjeni të shpejtë:

Ngarkoni skedarë të arsyeshëm. Ripërmasojini fotot në rreth 2 000 deri në 2 500 piksel gjerësi para ngarkimit dhe kompresojini. CDN-ja e Shopify shërben automatikisht versione të ripërmasuara dhe formate moderne si WebP, por një origjinal i madh prapë kushton kohë.
Mos e ngarkoni me vonesë (lazy-load) imazhin e parë. Imazhet në krye të faqes duhet të ngarkohen menjëherë. Lazy loading është për imazhet më poshtë.
Përdorni imazhe responsive. Temat aktuale përdorin filtrat image_url dhe image_tag të Shopify për të shërbyer madhësinë e duhur për çdo ekran. Temat më të vjetra mund t'i shërbejnë një madhësi të madhe çdo pajisjeje.
Shmangni videon me nisje automatike në hero. Nëse ju duhet video, shfaqni fillimisht një imazh poster dhe ngarkojeni videon më pas.

3. Ngarkojini widget-et më vonë

Recensionet, flluskat e chat-it, pop-up-et, karuselet e upsell-it dhe feed-et sociale rrallë duhet të ngarkohen para produktit.

Ngarkojini chat-in dhe pop-up-et pasi faqja të jetë interaktive ose pas një vonese.
Vendosini widget-et e recensioneve poshtë pjesës së parë të ekranit që të mos bllokojnë përmbajtjen kryesore. Mbajeni tekstin e recensioneve në HTML-në e faqes për SEO.
Hiqni pikselët e gjurmimit të palëve të treta që nuk i shikoni më. Secili është një skript tjetër.

4. Përdorni një temë aktuale

Temat e ndërtuara për Online Store 2.0, përfshirë temat falas të Shopify të bazuara te Dawn, janë projektuar rreth blloqeve të aplikacioneve, imazheve responsive dhe JavaScript-it më të lehtë. Një temë e disa viteve më parë me slider-a të rëndë dhe jQuery mund të jetë e ngadaltë pavarësisht çfarë hiqni.

Para se të ndërroni, testoni faqen demo të produktit të temës së re në PageSpeed Insights. Një temë që është e ngadaltë në demon e saj do të jetë e ngadaltë edhe me produktet tuaja.

5. Ndaloni zhvendosjen e faqosjes

Përmbajtja që kërcen ndërsa ngarkohet faqja dëmton Cumulative Layout Shift dhe i bezdis blerësit.

Jepuni imazheve gjerësi dhe lartësi (filtri image_tag i Shopify i shton).
Rezervoni hapësirë për banerët dhe shiritat e njoftimeve që shfaqen pas ngarkimit.
Ngarkojini fontet e personalizuara me font-display: swap dhe kufizoni numrin e peshave.

Çfarë nuk ndihmon shumë

Aplikacionet përshpejtuese. Shumica shtojnë skriptin e tyre në faqe. Heqja e kodit është më mirë se shtimi i kodit.
Ndryshimi i hostimit ose CDN-së. Në Shopify nuk mundeni, dhe as nuk ju duhet.
Minifikimi i disa kilobajtëve CSS. Rrallë i lëviz metrikat e përdoruesve realë krahasuar me heqjen e një aplikacioni ose rregullimin e imazhit kryesor.

Mbajeni të shpejtë

Shpejtësia përkeqësohet ndërsa shtoni aplikacione dhe seksione. Kontrolloni sërish një faqe produkti pas çdo aplikacioni të ri dhe shikoni raportin Core Web Vitals çdo muaj. Një auditim faqeje, si ai i zaDojo, shënon faqet e ngadalta dhe imazhet tepër të mëdha në gjithë dyqanin, që të mos testoni faqet një nga një.

Pyetje që bëjnë njerëzit

A ndikon shpejtësia e Shopify në SEO? Po, pak. Core Web Vitals janë sinjal renditjeje, por përmbajtja dhe relevanca kanë më shumë rëndësi. Shpejtësia ka më shumë rëndësi për shitjet: blerësit largohen nga faqet e ngadalta të produkteve.

Cili është një pikëzim i mirë shpejtësie në Shopify? Synoni Core Web Vitals "Good" në të dhënat e përdoruesve realë (Largest Contentful Paint nën 2,5 sekonda, Interaction to Next Paint nën 200 milisekonda, Cumulative Layout Shift nën 0,1). Pikëzimi i laboratorit nga 100 është orientim, jo objektiv.

Pse dyqani im Shopify është i ngadaltë në celular? Telefonat kanë procesorë dhe lidhje më të ngadalta, ndaj JavaScript-i i rëndë nga aplikacionet dëmton shumë më tepër aty. Testoni fillimisht në celular.