Jak optimalizovat rychlost načítání obchodu na Shopify?

Rychlost načítání hraje v Googlu od roku 2021 stále větší roli. Jedna sekunda zpoždění může snížit konverzi až o 7 procent. Většina obchodů na Shopify se načítá mezi 3,2 a 4,5 sekundy, přičemž by to mělo být méně než 2,5 sekundy. Samotná rychlost nestačí, kvalitní obsah má stále svůj význam, ale bez rychlé stránky i ten nejlepší obsah ztrácí šanci na vysoké umístění ve výsledcích vyhledávání. Shromáždili jsme zde vše, co reálně ovlivňuje rychlost obchodu Shopify: jak ji změřit, co ji nejčastěji způsobuje poruchu a jak ji krok za krokem opravit.

Co jsou Core Web Vitals

Jedná se o tři metriky Google, které ukazují, jak se stránka chová pro skutečného uživatele. LCP je doba, po které se zobrazí hlavní prvek stránky, nejčastěji fotografie produktu nebo nadpis. Dobrý výsledek je pod 2,5 sekundy. INP měří, jak rychle stránka reaguje na kliknutí. Dobrý výsledek je méně než 200 milisekund. CLS ukazuje, jak moc se prvky posouvají během načítání. Dobrý výsledek je méně než 0,1. Ještě je tu TTFB, tedy doba odezvy serveru, než prohlížeč vůbec začne něco zobrazovat.

Jak zjistit rychlost svého e-shopu

Nejrychleji to ověříte v nástroji Google PageSpeed Insights. Zadáte adresu a po několika vteřinách získáte výsledek v rozmezí 0 až 100 spolu se seznamem problémů. Jedná se o údaje z jednoho testu, proto je berte jako laboratorní, nikoli reálné. V panelu Shopify, v sekci Online Store a Themes, najdete Web Performance Dashboard, tedy výsledek vypočítaný na základě návštěvnosti vašeho obchodu. Nejspolehlivější údaje najdete v Google Search Console, v sekci Core Web Vitals. Jedná se o údaje od skutečných uživatelů za posledních 28 dní. Pokud tedy dnes něco vylepšíte, v Search Console uvidíte výsledek až za několik týdnů. PageSpeed změnu ukáže okamžitě, Search Console potřebuje čas. To je normální.

Co ve skutečnosti zpomaluje obchody na Shopify

Motiv

Šablony z internetových obchodů často obsahují spoustu funkcí, které nikdo nepoužívá. A každá z nich představuje kus kódu, který se stejně načítá. Je lepší začít s něčím lehkým, jako je Dawn nebo Refresh, a přidávat jen to, co opravdu potřebujete.

Aplikace

Každá aplikace přidává svůj vlastní kód JavaScript a CSS. Některé z nich jej dokonce zanechají i po odinstalování, pokud odinstalace neproběhla správně. Čím více aplikací, tím více dotazů na externí servery. A každý takový dotaz představuje potenciální zpoždění.

Fotografie

To je asi nejčastější problém a zároveň ten, který se dá nejjednodušeji vyřešit. Fotografie produktu nahraná přímo z fotoaparátu v rozlišení 4000 × 4000 pixelů může mít velikost několik megabajtů. Vynásobte to několika desítkami produktů na stránce kolekce a máte hotový problém.

Marketingové trackery

Meta pixel, TikTok pixel, Google Ads tag – to vše také něco váží. Každý z nich spouští v prohlížeči zákazníka další kód. Jedním z řešení je přesunout část sledování na server, tedy tzv. server side tracking. V takovém případě běží v prohlížeči návštěvníka méně skriptů.

Obvykle za to nemůže jen jeden viník, ale několik věcí najednou. Reklamní pixel na pozadí, widget chatu, který se načítá na každé podstránce, karusel s recenzemi, který načítá externí skript, a nekomprimovaná úvodní fotografie, která sama o sobě může zabrat většinu času do LCP. Každý z těchto prvků samostatně vypadá neškodně. Společně však přidávají i několik sekund.

Konkrétní opravy krok za krokem

Začněte s obrázkem, který je hlavním prvkem LCP, tedy obvykle s hero obrázkem na úvodní stránce nebo s obrázkem produktu. Nastavte mu prioritu načítání pomocí atributu `fetchpriority` na hodnotu `high` a vložte jej do sekce `preload` v kódu stránky. Prohlížeč jej pak načte jako první, místo aby čekal ve frontě. Změňte formát obrázků na WebP nebo AVIF namísto starých formátů JPG a PNG. Shopify obrázky dobře škáluje, ale je třeba to správně nastavit v šabloně. Obrázky pod první obrazovkou by se měly načítat až tehdy, když k nim uživatel přejde. Proveďte důkladnou revizi aplikací a odstraňte ty, které nijak nepřispívají k tržbám. Na závěr písma. Pokud obchod používá vlastní písmo z externího serveru, je lepší ho hostovat lokálně nebo omezit počet variant tloušťky.

Počítač versus telefon – odkud se bere takový rozdíl?

Stává se, že obchod v tom samém testu získá 90 bodů na počítači a 40 bodů na mobilu. Není to chyba serveru. Mobilní telefony mají slabší procesory a pomalejší připojení k internetu, takže se stejné obrázky, skripty a písma načítají déle. A pro Google se počítá především výsledek na mobilu, protože už roky platí indexování „mobile first“. Proto začněte s optimalizací na mobilu, i když desktopová verze vypadá skvěle.

Fungují vůbec aplikace na zrychlení počítače?

Na Shopify je spousta aplikací, které slibují automatické zlepšení výsledků, jako například Thunder, NitroPack nebo Hyperspeed. A skutečně, v laboratorních testech dokážou přidat několik desítek bodů. Problém je v tom, že údaje skutečných uživatelů v Search Console se často nemění, protože tyto aplikace optimalizují pro testy, nikoli pro skutečné telefony a připojení. Někdy dokonce něco pokazí, například zpomalí načítání obrázku, který je právě součástí LCP. V takovém případě se skóre zhorší, místo aby se zlepšilo. Je lepší nejprve provést ruční kontrolu a opravit zjevné problémy. Teprve poté zkontrolovat, zda taková aplikace vůbec ještě něco přináší. Často se ukáže, že po důkladném ručním vyčištění aplikace již nic nemění.

Kdy se nevyplatí honit se za každou milisekundou

Ne každý obchod potřebuje čas načítání pod 2 sekundy. Pro většinu z nich je rozumným cílem 2,0 až 2,4 sekundy, protože zhruba v tomto rozmezí rychlost přestává omezovat konverzi na mobilu. Obchody, které dosahují času 1,6 až 2,0 sekundy, obvykle běží na Shopify Hydrogen nebo mají plně vlastní šablonu, nikoli standardní Dawn. Dosažení doby načítání pod 2 sekundy obvykle vyžaduje zásadní změnu infrastruktury a taková investice se při tržbách nižších než deset milionů dolarů ročně málokdy vyplatí. O headless a Hydrogenu napíšeme samostatně, protože to je téma na celý článek.

Jak to vypadá z našeho pohledu

U nových zákazníků vidíme v podstatě totéž. Kód z dávno odinstalovaných aplikací, který nikdo z motivu neodstranil. Fotografie nahrávané přímo z fotoaparátu nebo od poskytovatele, bez jakékoli komprese. Šablony s desítkami sekcí, z nichž ve skutečnosti fungují možná tak tři. Žádnou z těchto věcí není těžké opravit samostatně. Problém je v tom, že málokdo to všechno zkontroluje najednou, dokud výsledek ve vyhledávači Google nezačne skutečně škodit.

Pět minut na audit

Chceš rychle zjistit, jak si tvůj obchod vede? Vlož hlavní stránku a stránku produktu do nástroje PageSpeed Insights a poznamenej si oba výsledky. Podívej se do Search Console, do sekce Core Web Vitals, a zkontroluj, kolik adres je označeno jako vyžadující zlepšení. Spočítej aplikace ve svém obchodě a zamysli se, kolik z nich skutečně používáš. Na závěr zkontroluj velikost obrázku na hlavní stránce – klikni pravým tlačítkem myši a podívej se na informace o souboru. Pokud má několik set kilobajtů nebo více, máš prvního kandidáta na kompresi.

ČASTO KLADENÉ DOTAZY

Zpomalují aplikace Shopify chod obchodu?

Ano, téměř každá z nich přidává svůj kód. Některé zůstávají dokonce i po odinstalování. Pravidelně kontrolujte, které aplikace skutečně generují příjmy, a ostatní odstraňujte.

Má rychlost načítání vliv na SEO?

Ano. Core Web Vitals se v Googlu zohledňují od roku 2021. Rychlejší stránky mají větší šanci na lepší umístění a jsou efektivněji indexovány.

Stojí za to nainstalovat aplikaci pro zrychlení počítače?

Může to pomoci, ale ruční kontrolu nenahradí. Nejprve odstraň zbytečné aplikace, zkomprimuj fotografie a oprav zjevné chyby v motivu. Teprve poté zkontroluj, zda aplikace vůbec ještě něco mění.

Jak dlouho se čeká na výsledky ve vyhledávači Google?

V nástroji PageSpeed Insights uvidíte změnu okamžitě. V Search Console, kde se zohledňují údaje od skutečných uživatelů, si obvykle budete muset počkat asi měsíc, protože zpráva vychází z posledních 28 dnů.

Rychlejší provoz obchodu začíná jedním auditem

Rychlost je jedním z těch prvků SEO, které lze vylepšit bez změny obsahu či strategie, a výsledek je patrný jak v žebříčku, tak v konverzi. Začněte jednoduchým auditem, opravte obrázky a aplikace a teprve poté uvažujte o pokročilejších řešeních. Pokud potřebujete pomoc s auditem nebo optimalizací svého obchodu Shopify, tým 4AD Studio to rád prověří a řekne, co opravdu stojí za to vylepšit.