Zlepšenie výkonnosti online obchodu

Váš online obchod sa skladá z rôznych prvkov, ako sú kód témy, aplikácie, obrázky, videá, karusely, informačné kanály sociálnych médií a analytika. Tieto prvky dokážu vylepšiť používateľskú skúsenosť návštevníkov a rozšíriť schopnosti vášho webového sídla.

Každá funkcia, ktorú do svojho online obchodu pridáte, však môže ovplyvniť jeho výkonnosť. Niektoré funkcie môžu spomaliť vaše webové sídlo alebo spôsobiť neočakávané správanie, ktoré môže ovplyvniť používateľskú skúsenosť.

Výkonnosť webu sa zameriava na optimalizáciu používateľskej skúsenosti. V súčasnosti sa webová výkonnosť zameriava na tri hlavné oblasti, ktoré sa odrážajú aj v metrikách Core Web Vitals:

• Rýchlosť načítania, ktorú meria Najväčšie vykreslenie obsahu (LCP)
• Stabilita rozloženia, ktorú meria Kumulatívny posun rozloženia (CLS)
• Odozva na interakciu používateľa, ktorú meria Interakcia do ďalšieho vykreslenia (INP)

Optimalizácia výkonnosti webu znamená, že vaši zákazníci s väčšou pravdepodobnosťou zostanú na vašom webe a konvertujú.

Optimalizácie pre váš online obchod

Váš online obchod má integrovanú optimalizáciu webu. Optimalizácia webu je integrovaná aj do všetkých nových funkcií. Ak chcete využívať nasledujúce funkcie, nemusíte robiť nič špeciálne:

• Váš online obchod je hostovaný na rýchlych globálnych serveroch a neobmedzuje šírku pásma vášho obchodu. Stav svojho obchodu Shopify si môžete pozrieť na stránke Shopify Status.
• Váš online obchod využíva sieť na doručovanie obsahu (CDN) od spoločnosti Cloudflare, ktorá zaisťuje rýchle načítanie online obchodu kdekoľvek na svete. Stav CDN môžete skontrolovať na stavovej stránke spoločnosti Cloudflare.
• Na udržanie krátkej doby načítania sa obrázky automaticky optimalizujú pomocou obrázkovej CDN. V kombinácii s kódom vašej témy dokáže obrázková CDN poskytnúť najlepší formát obrázka, ktorého veľkosť je upravená a komprimovaná tak, aby sa zachovali malé veľkosti súborov.

Faktory ovplyvňujúce výkonnosť webu

V prípade obchodov Shopify sú najväčšími faktormi, ktoré ovplyvňujú výkonnosť webu, tieto:

• Téma vášho online obchodu
• Aplikácie, ktoré ste si nainštalovali
• Akýkoľvek dodatočný kód tretej strany, ktorý ste do obchodu manuálne pridali, vrátane správcov štítkov a štítkov v nich

To znamená, že ak chcete zlepšiť výkonnosť svojho webu, mali by ste sa zamerať na nasledujúce skutočnosti:

• Používajte aktuálnu a optimalizovanú tému. Celá rodina tém Horizon a témy Online Store 2.0 od Shopify sú bezplatné a optimalizované na vysokú výkonnosť webu. Okrem toho je na výkonnosť webu optimalizovaných aj mnoho ďalších tém od tretích strán. Môžete si pozrieť najnovšie údaje o výkonnosti tém.
• Ak vaša téma ponúka prechody medzi stránkami alebo iné animácie, porovnajte výkonnosť svojho webu pred ich aktiváciou a po nej. Animácie môžu spomaliť stránky.
• Vyhnite sa pridávaniu príliš veľkého počtu sekcií do šablón stránok vo svojej téme. Vysoký počet sekcií na stránkach môže znížiť výkonnosť webu.
• Ak máte kolekcie s veľkým množstvom produktov, zvážte aktiváciu stránkovania, čím obmedzíte počet produktov, ktoré sa načítajú naraz.
• Vyhodnoťte svoje nainštalované aplikácie a kód tretej strany, aby ste sa uistili, že prinášajú dostatočnú hodnotu, ktorá vyváži prípadné straty výkonnosti.
• Urobte audit správcu štítkov a odstráňte všetky nepoužívané štítky alebo štítky s nízkou hodnotou. Ďalšie informácie o osvedčených postupoch pre štítky a správcov štítkov.

Nástroje na testovanie

Na preskúmanie výkonnosti online obchodu môžete použiť nasledujúce nástroje:

• Prehľady webovej výkonnosti: Prehľady webovej výkonnosti od Shopify využívajú metriky Core Web Vitals na meranie toho, akú skúsenosť s vaším online obchodom majú skutoční používatelia.
• PageSpeed Insights: Pomocou nástroja PageSpeed Insights od Googlu môžete spúšťať vlastné prehľady a zobraziť si podrobnejšie metriky pre stránky vo svojom obchode.

Porozumenie odporúčaniam pre výkonnosť od tretích strán

Nástroje tretích strán na kontrolu výkonnosti môžu navrhnúť zmeny na zlepšenie rýchlosti vášho obchodu. Mnohé z týchto odporúčaní sú už však v službe Shopify implementované alebo sa na obchody Shopify nevzťahujú.

Optimalizácie, ktoré už Shopify obsahuje

Váš obchod Shopify automaticky obsahuje nasledujúce optimalizácie výkonnosti:

Sieť na doručovanie obsahu (CDN): Shopify poskytuje špičkovú CDN bez dodatočných poplatkov, čím zabezpečuje rýchlu globálnu výkonnosť. Všetky prostriedky sa doručujú pomocou protokolu HTTP/2, čo v porovnaní so staršími protokolmi znižuje réžiu.

Ukladanie do vyrovnávacej pamäte prehliadača: Shopify nastavuje ukladanie zdrojov s možnosťou ukladania do vyrovnávacej pamäte na jeden rok, čo je maximálne možné trvanie. Znamená to, že opakovaní návštevníci vášho obchodu zažijú kratšie doby načítania.

Kompresia gzip: Shopify využíva kompresiu gzip na CSS, JavaScript, dokumenty a stránky, čím znižuje šírku pásma a zlepšuje doby načítania. Pri načítavaní viacerých súborov je povolené aj trvalé pripojenie (keep-alive).

Optimalizácia obrázkov: Shopify pomocou pokročilých algoritmov automaticky komprimuje obrázky vo formáte JPG, pričom vyvažuje kompresiu a vizuálnu príťažlivosť. Obrázky sa často doručujú vo formáte WebP, čím sa dosahuje lepšia kompresia a rýchlejšie načítanie.

Minifikácia súborov: Služba Shopify po vyžiadaní z výkladnej skrine automaticky minifikuje súbory CSS a JavaScript, čím zmenší ich veľkosť bez vplyvu na funkčnosť.

Kedy sa odporúčania od tretích strán nevzťahujú

Nástroje tretích strán na kontrolu môžu navrhnúť zmeny, ktoré pre obchody Shopify nie sú relevantné:

• Konfigurácie na úrovni servera: Odporúčania týkajúce sa nastavenia servera, hlavičiek HTTP alebo politík ukladania do vyrovnávacej pamäte sú už infraštruktúrou Shopify optimalizované.
• Implementácia CDN: Návrhy na pridanie CDN nie sú potrebné, pretože služba Shopify už v predvolenom nastavení obsahuje vysokovýkonnú CDN.
• Nastavenia kompresie: Odporúčania o povolení kompresie sú už naprieč platformou Shopify implementované.

Konanie na základe relevantných odporúčaní

Zamerajte sa na odporúčania, ktoré sa týkajú konkrétneho obsahu a funkcií vášho obchodu:

• Optimalizácia obrázkov: Uistite sa, že nahrané obrázky majú primeranú veľkosť a používajú odporúčané formáty.
• Hodnotenie aplikácií: Zvážte, či nainštalované aplikácie poskytujú dostatočnú hodnotu, ktorá by vyvážila akýkoľvek vplyv na výkonnosť.
• Optimalizácia témy: Vyberajte si témy optimalizované pre výkonnosť a obmedzte počet sekcií v šablónach stránok.

Riešenie problémov s pomaly sa načítavajúcimi stránkami

Ak sa váš obchod načítava pomaly, na identifikáciu a vyriešenie problému postupujte podľa týchto krokov:

1. krok: Overenie problému

1. Vyskúšajte si rýchlosť načítania svojho obchodu na rôznych zariadeniach a cez rôzne internetové pripojenia.
2. Požiadajte iných o otestovanie vášho obchodu, aby ste sa uistili, že nejde o lokálny problém s vaším internetovým pripojením.
3. Na získanie špecifických metrík výkonnosti použite testovacie nástroje ako PageSpeed Insights.

Krok 2: Identifikácia príčiny

Skontrolujte nadmerný počet aplikácií: Príliš veľa aplikácií načítavajúcich podklady vo vašej výkladnej skrini môže spomaliť výkonnosť. Skontrolujte svoje nainštalované aplikácie a odstráňte tie, ktoré nie sú pre predaj nevyhnutné.

Skontrolujte veľké obrázky: Stránky s množstvom obrázkov vo vysokej kvalite sa môžu načítavať pomaly. Optimalizujte svoje obrázky alebo znížte počet tých zobrazených. Ďalšie informácie o odporúčaných veľkostiach obrázkov.

Identifikujte pomalé skripty: Ak vaša stránka zostane pred načítaním celého obsahu prázdna, na identifikáciu pomaly sa načítavajúcich skriptov použite vývojárske nástroje prehliadača. Pre vyriešenie problému kontaktujte vývojára aplikácie alebo témy.

Krok 3: Prijatie opatrení

Odstráňte nepotrebné aplikácie: Odinštalovaním aplikácie sa automaticky neodstráni jej kód z vašej témy. Možno budete musieť kontaktovať vývojára aplikácie, ktorý vám poskytne pokyny na jej úplné odstránenie.

Optimalizujte obrázky: Používajte vhodné formáty súborov (JPG pre fotografie, PNG pre grafiku s priehľadnosťou) a zmeňte veľkosť obrázkov tak, aby zodpovedala ich veľkosti zobrazenia.

Vyhodnoťte výkonnosť témy: Ak vaša aktuálna téma spôsobuje výrazné spomalenia, zvážte prechod na tému optimalizovanú na výkonnosť.

Získanie podpory v súvislosti s výkonnosťou online obchodu

Ak používate bezplatnú tému od Shopify, so základnými vylepšeniami výkonnosti vám môže pomôcť Podpora Shopify.

Ak používate tému tretej strany a potrebujete pomoc, musíte kontaktovať vývojára svojej témy, najať si experta na webovú výkonnosť Shopify alebo si najať partnera Shopify na výkonnosť a rýchlosť webového sídla. Ďalšie informácie o najatí partnera Shopify.

Ak váš problém s výkonnosťou pochádza z aplikácie, môžete kontaktovať vývojára svojej aplikácie.

Ak máte vývojársky tím alebo partnerskú agentúru, o ďalšiu pomoc sa môžete obrátiť aj na nich.

Technické informácie a zdroje na riešenie problémov

Ak ste vývojár a chcete zlepšiť výkonnosť výkladnej skrine, témy alebo aplikácie Shopify, pre každú metriku Core Web Vital si môžete pozrieť nasledujúce zdroje. Ďalšie informácie o osvedčených postupoch týkajúcich sa výkonnosti pre témy Shopify.

Rýchlosť načítania

Najväčšie vykreslenie obsahu (LCP) meria rýchlosť načítania na základe toho, ako rýchlo sa stane viditeľným najväčší prvok na obrazovke. Čas do prvého bajtu (TTFB) a prvé vykreslenie obsahu (FCP) sú podporné metriky, ktoré vám pomôžu lepšie pochopiť, kde spočíva hlavná príčina problému. Získajte ďalšie informácie o ladení bežných príčin pomalého načítania vo výkladných skriniach Shopify Liquid.

Vizuálna stabilita

Kumulatívny posun rozloženia (CLS) meria vizuálnu stabilitu na základe toho, do akej miery sa obsah počas načítavania neočakávane posúva. Ak chcete získať podrobnejšie informácie o ladení CLS, prečítajte si článok Ako optimalizovať kumulatívny posun rozloženia (CLS) na webových sídlach Shopify.

Interaktivita

Interakcia do ďalšieho vykreslenia (INP) meria interaktivitu na základe toho, ako dlho trvá, kým sa stránka stane responzívnou voči väčšine akcií používateľa. Ide napríklad o kliknutie na odkaz alebo tlačidlo.

Ak máte nízke hodnoty INP, je veľmi pravdepodobné, že máte v obchode priveľa kódu JavaScript, a to buď z kódu témy, kódu aplikácie alebo kódu tretej strany či správcu značiek. Pokúste sa vyčistiť prvky, ktoré to spôsobujú najviac. Prečítajte si ďalšie informácie o 3 spôsoboch, ako nájsť prvky JavaScript, ktoré najviac predlžujú načítanie stránky. Ak máte stále problémy s INP, prečítajte si ďalšie informácie zo zdrojov na lokalite web.dev.