Optimizarea vitezei în Shopify

Toate magazinele Shopify rulează pe aceleași servere și pe același CDN, așa că un magazin lent e lent din cauza a ceea ce încarcă: tema, scripturile aplicațiilor, imaginile și videoclipurile. Optimizarea vitezei în Shopify înseamnă să elimini și să micșorezi aceste lucruri, nu să schimbi hostingul. În majoritatea magazinelor, cele mai mari câștiguri vin din eliminarea codului de la aplicațiile nefolosite, din comprimarea imaginii principale și din încărcarea mai târzie a widgeturilor.

Ghidul acesta arată cum măsori corect viteza, apoi trece prin reparații în ordinea în care aduc de obicei cele mai mari beneficii. Face parte din ghidul SEO pentru Shopify.

Măsoară paginile potrivite

Testează o pagină de produs și una de colecție, nu doar pagina principală. Acestea sunt paginile care se clasează și pe care ajung cumpărătorii.

Google PageSpeed Insights dă scoruri de laborator pentru o singură încărcare și, dacă magazinul are destui vizitatori, Core Web Vitals reale de la utilizatorii Chrome din ultimele 28 de zile. Cifrele de la utilizatori reali sunt cele pe care le folosește Google.
Raportul Core Web Vitals din Search Console grupează URL-urile după stare, ca să vezi dacă toate paginile de produs au aceeași problemă.
Raportul de performanță web al Shopify, din Analytics, arată aceleași metrici de la utilizatori reali în timp, util ca să verifici dacă o schimbare a ajutat.

Concentrează-te pe cele trei Core Web Vitals: Largest Contentful Paint (cât de repede apare imaginea sau textul principal), Interaction to Next Paint (cât de repede răspunde pagina la o atingere) și Cumulative Layout Shift (cât de mult sar elementele de colo-colo). Scorurile de laborator variază de la un test la altul; nu urmări un 100 perfect.

1. Elimină codul aplicațiilor pe care nu le folosești

Aplicațiile sunt cea mai frecventă cauză a unui magazin Shopify lent. Fiecare aplicație care atinge magazinul poate adăuga JavaScript și CSS pe fiecare pagină.

Fă o listă cu aplicațiile pe care le ai. Dezinstalează-le pe cele pe care nu le mai folosești.
Dezinstalarea nu elimină mereu codul adăugat de aplicație în temă. Caută numele aplicației în fișierele temei (Online Store > Themes > Edit code) și elimină fragmentele și tagurile script rămase.
Preferă aplicațiile care folosesc theme app extensions (blocuri de aplicație pe care le adaugi din editorul temei). Sunt eliminate curat la dezinstalare și se încarcă doar acolo unde le pui.
Pentru aplicațiile pe care le păstrezi, verifică dacă se încarcă pe fiecare pagină. Un tabel de mărimi e necesar doar pe paginile de produs.

2. Repară cea mai mare imagine

Pe majoritatea paginilor de produs și de colecție, cel mai mare element e o fotografie de produs sau un banner principal. Fă-l rapid:

Încarcă fișiere rezonabile. Redimensionează fotografiile la circa 2.000-2.500 de pixeli lățime înainte de încărcare și comprimă-le. CDN-ul Shopify servește automat versiuni redimensionate și formate moderne precum WebP, dar un original uriaș tot costă timp.
Nu folosi lazy loading pentru prima imagine. Imaginile din partea de sus a paginii ar trebui să se încarce imediat. Lazy loading e pentru imaginile mai de jos.
Folosește imagini responsive. Temele actuale folosesc filtrele image_url și image_tag ale Shopify ca să servească mărimea potrivită pentru fiecare ecran. Temele mai vechi pot servi o singură mărime mare pe toate dispozitivele.
Evită videoclipurile cu redare automată în zona principală. Dacă ai nevoie de video, afișează mai întâi o imagine de previzualizare și încarcă videoclipul după.

3. Încarcă widgeturile mai târziu

Recenziile, bulele de chat, pop-up-urile, caruselele de upsell și fluxurile din rețelele sociale rareori trebuie să se încarce înaintea produsului.

Încarcă chatul și pop-up-urile după ce pagina devine interactivă sau după o întârziere.
Pune widgeturile de recenzii sub prima parte vizibilă a paginii, ca să nu blocheze conținutul principal. Păstrează textul recenziilor în HTML-ul paginii, pentru SEO.
Elimină pixelii de tracking ai terților la care nu te mai uiți. Fiecare e încă un script.

4. Folosește o temă actuală

Temele construite pentru Online Store 2.0, inclusiv temele gratuite ale Shopify bazate pe Dawn, sunt gândite în jurul blocurilor de aplicație, al imaginilor responsive și al unui JavaScript mai ușor. O temă de acum câțiva ani, cu slidere grele și jQuery, poate fi lentă orice ai elimina.

Înainte să schimbi tema, testează pagina de produs demo a noii teme în PageSpeed Insights. O temă lentă în propriul demo va fi lentă și cu produsele tale.

5. Oprește deplasarea layoutului

Conținutul care sare în timp ce pagina se încarcă afectează Cumulative Layout Shift și îi enervează pe cumpărători.

Dă imaginilor lățime și înălțime (filtrul image_tag al Shopify le adaugă).
Rezervă spațiu pentru bannerele și barele de anunțuri care apar după încărcare.
Încarcă fonturile personalizate cu font-display: swap și limitează numărul de grosimi.

Ce nu ajută prea mult

Aplicațiile de accelerare. Majoritatea adaugă propriul script pe pagină. Eliminarea codului bate adăugarea de cod.
Schimbarea hostingului sau a CDN-ului. Pe Shopify nu poți și nici nu ai nevoie.
Minificarea câtorva kilobytes de CSS. Rareori mișcă metricile de la utilizatori reali, comparat cu eliminarea unei aplicații sau repararea imaginii principale.

Păstrează magazinul rapid

Viteza scade pe măsură ce adaugi aplicații și secțiuni. Verifică din nou o pagină de produs după fiecare aplicație nouă și uită-te lunar în raportul Core Web Vitals. Un audit de site, precum cel din zaDojo, semnalează paginile lente și imaginile prea mari în tot magazinul, ca să nu testezi paginile una câte una.

Întrebări frecvente

Influențează viteza Shopify SEO-ul? Da, puțin. Core Web Vitals sunt un semnal de clasare, dar conținutul și relevanța contează mai mult. Viteza contează mai mult pentru vânzări: cumpărătorii pleacă de pe paginile de produs lente.

Ce înseamnă un scor de viteză bun în Shopify? Țintește Core Web Vitals „Good” în datele de la utilizatori reali (Largest Contentful Paint sub 2,5 secunde, Interaction to Next Paint sub 200 de milisecunde, Cumulative Layout Shift sub 0,1). Scorul de laborator din 100 e un ghid, nu o țintă.

De ce e magazinul meu Shopify lent pe mobil? Telefoanele au procesoare și conexiuni mai lente, așa că JavaScriptul greu al aplicațiilor le afectează mult mai mult. Testează mai întâi pe mobil.