Оптимизация работы шаблонов Shopify

Optimalizace šablon Shopify

Zvažme optimalizaci šablony na příkladu webu casaeleganza .com - optimalizujeme hlavní stránku.

Proč potřebujete optimalizaci:

Při zobrazování výsledků vyhledávání bere Google v úvahu hodnocení a metriky optimalizace e-shopu. E-shopy s vyšším skóre budou pravděpodobně na prvních pozicích ve výsledcích vyhledávání.

Nástroje, které vám pomohou pochopit směr optimalizace:

V době zahájení optimalizace hlásil Google PageSpeed ​​​​Tool pro verzi pro počítače hodnocení 72 (minimální úroveň je 80). Počet nahraných souborů - 162. Velikost stránky - 3,2 Mb.

Vlastnosti optimalizace, které je třeba vzít v úvahu:

  1. Shopify běží přes HTTP 1.1 – takže počet souborů nahraných současně je omezený – to zpomaluje rychlost zobrazení e-shopu.
  2. Kvůli omezením platformy Shopify nelze splnit všechna doporučení Google PageSpeed ​​
  3. Před zahájením optimalizace zkontrolujte seznam nainstalovaných aplikací a odeberte všechny nepotřebné aplikace

Návrhy na optimalizaci:

1. Použijte mezipaměť prohlížeče

Tento parametr nelze ovládat – jedná se o omezení Shopify.

2. Odstraňte JavaScript a CSS blokující horní část stránky

2.1. Optimalizace JS

Chcete-li skriptům zabránit v blokování načítání obsahu, musíte zaškrtnout volání všech skriptů a přidat příkaz „defer“. Příkaz async by měl být používán s pochopením toho, jak skripty fungují.

 Optimalizace JS pro Shopify

2.2. Optimalizace CSS

2.2.1. Je nutné co nejvíce seskupovat různé soubory css do jednoho společného souboru (omezení HTTP 1.1). Po optimalizaci zbývají 2 soubory: jeden pro předběžné načtení a druhý pro dodatečné načtení stránky.

2.2.2. K dodatečnému načtení CSS použijte příkaz preload ve značce odkazu a skript který implementuje předběžné načtení pro nekompatibilní prohlížeče .

 Optimalizovat CSS pro Shopify

2.2.3. Ideální CSS příprava pro každý typ stránky (domovská stránka, kolekce, produkt, stránka, blog). Tím se sníží rychlost vykreslování stránky.

2.2.4. Při zobrazení hlavní stránky byla použita volba Critical CSS - kdy jsou všechny CSS příkazy potřebné pro zobrazení hlavní stránky zvýrazněny v samostatném souboru a zbývající CSS příkazy jsou načteny pomocí load CSS. Služba Critical Pass CSS Generator se používá k vytvoření zkrácený soubor CSS... Pro zvýšení hodnocení je obsah souboru CriticalCSS vložen do html stránky.

Optimalizace CSS pro Shopify

3. Optimalizujte načítání viditelného obsahu

V mém případě posuvník zabíral většinu viditelné části. Ale kvůli mechanismu líného načítání bylo na obrazovce prázdné místo. Abych tento problém vyřešil, povolil jsem zobrazení prvního posuvníku.

Optimalizace rychlosti e-shopu Shopify

4. Optimalizujte své obrázky

Google PageSpeed ​​​​ poznamenal, že velikost některých obrázků lze zmenšit o 30 %. Hledejte typy souborů (obvykle jpeg), velikosti souborů (až 2000 pixelů) a rozlišení (až 100 pixelů na palec). K tomuto doporučení je třeba přistupovat opatrně, protože Optimalizované obrázky nevypadají vždy dobře.

5. Minifikujte JavaScript

 minifikace JS pro Shopify

5.1. Je nutné co nejvíce seskupit různé soubory js do jednoho společného souboru (omezení HTTP 1.1).

5.2. Při přidávání zkontrolujte, zda je zdrojový text skriptů minifikován a případně jej zminifikujte pomocí služby Minifikátor . Pokud skripty obsahují zdrojový kód pro Liquid, pak by měla být minimalizace opuštěna (nebo částečně minimalizována).

6. Minimalizujte svůj CSS

Při přidávání zkontrolujte, zda je zdrojový text souborů css minimalizován, a v případě potřeby jej minifikujte pomocí služby Minifikátor . Pokud css obsahuje zdrojový kód pro Liquid, pak by měla být minimalizace opuštěna (nebo částečně minimalizována).

7. Zapněte kompresi

Tento parametr nelze ovládat – omezení Shopify

8. Minifikujte HTML

8.1. Minifikujte styly CSS a text js pomocí Minifikátoru . < / p>

8.2. Odstraňte přebytečné mezery v textu html. Problém souvisí s prací příkazů tekutého jazyka. Příkazy, které nevypisují text, generují v html textu prázdný řádek. Abyste tomu zabránili, přidejte na začátek a konec příkazu pomlčku.

Například {% comment%} bude vypadat jako {% - comment -%}.

P.S. Aby Google optimalizoval rychlost načítání mobilní verze webu, vytvořil technologii AMP, která zrychluje Doba načítání e-shopu Shopify .