Shopify gyorsítás: téma, appok és képek

Minden Shopify bolt ugyanazokon a szervereken és CDN-en fut, így egy lassú bolt azért lassú, amit betölt: a téma, az appszkriptek, a képek és a videók miatt. A Shopify sebességoptimalizálás ezek eltávolítását és kicsinyítését jelenti, nem tárhelyváltást. A legtöbb boltban a legnagyobb nyereség a nem használt appkód eltávolítása, a hero kép tömörítése és a widgetek későbbi betöltése.

Ez az útmutató megmutatja, hogyan mérd helyesen a sebességet, aztán abban a sorrendben veszi végig a javításokat, ahogy általában megtérülnek. A Shopify SEO útmutató része.

A megfelelő oldalakat mérd

Egy termékoldalt és egy kollekcióoldalt tesztelj, ne csak a kezdőlapot. Ezek az oldalak rangsorolnak, és ezekre érkeznek a vevők.

• A Google PageSpeed Insights laborpontszámot ad egyetlen betöltésre, és ha a boltodnak elég látogatója van, valós Core Web Vitals adatokat is a Chrome-felhasználóktól az elmúlt 28 napból. A Google a valós felhasználói számokat használja.
• A Search Console Core Web Vitals jelentése állapot szerint csoportosítja az URL-jeidet, így láthatod, hogy az összes termékoldalnak közös-e a problémája.
• A Shopify webes teljesítményjelentése az Analytics alatt ugyanezeket a valós felhasználói mutatókat mutatja időben, ami hasznos annak ellenőrzésére, hogy egy változtatás segített-e.

Koncentrálj a három Core Web Vitals mutatóra: Largest Contentful Paint (milyen gyorsan jelenik meg a fő kép vagy szöveg), Interaction to Next Paint (milyen gyorsan reagál az oldal egy koppintásra) és Cumulative Layout Shift (mennyire ugrálnak az elemek). A laborpontszámok tesztről tesztre ingadoznak; ne hajszold a tökéletes 100-at.

1. Távolítsd el a nem használt appkódot

A lassú Shopify boltok leggyakoribb oka az appok. Minden app, amely a kirakatot érinti, JavaScriptet és CSS-t adhat minden oldalhoz.

• Írd össze, milyen appjaid vannak. Távolítsd el azokat, amelyeket már nem használsz.
• Az eltávolítás nem mindig törli azt a kódot, amelyet egy app a témához adott. Keress rá az app nevére a témafájlokban (Online Store > Themes > Edit code), és töröld a maradék snippeteket és script tageket.
• Részesítsd előnyben a theme app extensiont használó appokat (a témaszerkesztőben hozzáadott app blokkokat). Ezek eltávolításkor tisztán törlődnek, és csak ott töltődnek be, ahová elhelyezed őket.
• A megtartott appoknál nézd meg, hogy minden oldalon betöltődnek-e. Egy mérettáblázatra csak a termékoldalakon van szükség.

2. Javítsd a legnagyobb képet

A legtöbb termék- és kollekcióoldalon a legnagyobb elem egy termékfotó vagy hero banner. Tedd gyorssá:

• Észszerű fájlokat tölts fel. Feltöltés előtt méretezd át a fotókat körülbelül 2000-2500 pixel szélesre, és tömörítsd őket. A Shopify CDN-je automatikusan átméretezett változatokat és modern formátumokat, például WebP-t szolgál ki, de egy hatalmas eredeti fájl így is időbe kerül.
• Az első képet ne töltsd be lustán. Az oldal tetején lévő képeknek azonnal be kell töltődniük. A lazy loading a lejjebb lévő képeknek való.
• Használj reszponzív képeket. Az aktuális témák a Shopify image_url és image_tag filtereivel minden képernyőnek a megfelelő méretet szolgálják ki. A régebbi témák egyetlen nagy méretet küldhetnek minden eszközre.
• Kerüld az automatikusan induló videót a hero részben. Ha videó kell, előbb egy előnézeti képet mutass, és a videót utána töltsd be.

3. Töltsd be később a widgeteket

Az értékeléseknek, csevegőbuborékoknak, felugró ablakoknak, upsell karuszeleknek és közösségimédia-hírfolyamoknak ritkán kell a termék előtt betöltődniük.

• A csevegést és a felugró ablakokat azután töltsd be, hogy az oldal interaktív lett, vagy egy késleltetés után.
• Az értékelési widgeteket tedd a hajtás alá, hogy ne blokkolják a fő tartalmat. Az értékelések szövegét SEO miatt tartsd az oldal HTML-jében.
• Távolítsd el azokat a külső követőpixeleket, amelyeket már nem nézel. Mindegyik egy újabb szkript.

4. Használj aktuális témát

Az Online Store 2.0-ra épülő témák, köztük a Shopify ingyenes, Dawn-alapú témái, app blokkokra, reszponzív képekre és könnyebb JavaScriptre épülnek. Egy több évvel ezelőtti, nehéz sliderekkel és jQueryvel teli téma lassú lehet, bármit is távolítasz el.

Váltás előtt teszteld az új téma demó termékoldalát a PageSpeed Insightsban. Egy téma, amely a saját demójában lassú, a te termékeiddel is lassú lesz.

5. Állítsd meg az elrendezés ugrálását

A betöltés közben ugráló tartalom rontja a Cumulative Layout Shift értéket, és bosszantja a vevőket.

• Adj a képeknek szélességet és magasságot (a Shopify image_tag filtere hozzáadja őket).
• Foglalj helyet a betöltés után megjelenő bannereknek és értesítősávoknak.
• Az egyéni betűtípusokat font-display: swap beállítással töltsd be, és korlátozd a betűvastagságok számát.

Ami nem sokat segít

• Gyorsító appok. A legtöbb saját szkriptet ad az oldalhoz. A kód eltávolítása jobb, mint a hozzáadása.
• Tárhely- vagy CDN-váltás. A Shopifyon nem lehet, és nincs is rá szükség.
• Néhány kilobájtnyi CSS minifikálása. Ritkán mozdítja meg a valós felhasználói mutatókat egy app eltávolításához vagy a fő kép javításához képest.

Tartsd gyorsan

A sebesség romlik, ahogy appokat és szekciókat adsz hozzá. Minden új app után ellenőrizz újra egy termékoldalt, és havonta nézd meg a Core Web Vitals jelentést. Egy webhelyaudit, például a zaDojóé, az egész boltban jelzi a lassú oldalakat és a túl nagy képeket, így nem kell oldalanként tesztelned.

Gyakori kérdések

Befolyásolja a Shopify sebessége a SEO-t? Igen, kicsit. A Core Web Vitals rangsorolási jel, de a tartalom és a relevancia többet számít. A sebesség az eladásoknál számít jobban: a vevők elhagyják a lassú termékoldalakat.

Mi a jó Shopify sebességpontszám? Törekedj „Jó” Core Web Vitals értékekre a valós felhasználói adatokban (Largest Contentful Paint 2,5 másodperc alatt, Interaction to Next Paint 200 ezredmásodperc alatt, Cumulative Layout Shift 0,1 alatt). A 100-as skálájú laborpontszám iránymutatás, nem cél.

Miért lassú a Shopify boltom mobilon? A telefonok processzora és kapcsolata lassabb, így az appok nehéz JavaScriptje ott sokkal jobban árt. Először mobilon tesztelj.