Optimalizace práce s šablonami Shopify

Pojďme se podívat na optimalizaci šablony na příkladu webu casaeleganza.com — optimalizujeme hlavní stránku.

Proč je optimalizace důležitá

Při zobrazování výsledků vyhledávání Google bere v úvahu hodnocení a optimalizaci obchodu. Obchody s vyšším hodnocením mají větší šanci objevit se na prvních pozicích ve výsledcích vyhledávání.

Nástroje, které pomohou pochopit směry optimalizace:

• Google PageSpeed Tool
• PingDom
• WebPageTest

Na začátku optimalizace Google PageSpeed Tool ukázal hodnocení 72 pro desktopovou verzi (minimální úroveň — 80). Počet načítaných souborů — 162. Velikost stránky — 3,2 MB.

Zvláštnosti provádění optimalizace, které je třeba vzít v úvahu:

1. Shopify funguje na protokolu HTTP 1.1 — proto existuje omezení na počet současně načítaných souborů, což snižuje rychlost zobrazení obchodu.
2. Ne všechny doporučení Google PageSpeed je možné splnit kvůli omezením platformy Shopify.
3. Před zahájením optimalizace zkontrolujte seznam nainstalovaných aplikací a odstraňte všechny nepotřebné aplikace.

Návrhy na optimalizaci:

1. Používejte cache prohlížeče.

 Tento parametr nelze ovládat — omezení Shopify.

2. Odstraňte JavaScript a CSS, které blokují zobrazení horní části stránky

2.1. Optimalizace JS Aby skripty neblokovaly načítání obsahu, je třeba zkontrolovat volání všech skriptů a přidat příkaz „defer“. Příkaz async je třeba používat s pochopením zvláštností práce skriptů.

2.2. Optimalizace CSS

2.2.1. Je třeba co nejvíce seskupit různé soubory CSS do jednoho společného souboru (omezení HTTP 1.1). Po optimalizaci zůstaly 2 soubory: jeden pro předběžné načítání a druhý pro následné načítání stránky.

2.2.2. Pro následné načítání CSS se v tagu link používá příkaz preload a skript, který implementuje preload pro nekompatibilní prohlížeče.

2.2.3. Ideální variantou je příprava CSS pro každý typ stránky (hlavní, kolekce, produkt, stránka, blog). Díky tomu se zkrátí doba zobrazení stránky.

2.2.4. Pro zobrazení hlavní stránky byl použit Critical CSS — kdy jsou všechny potřebné CSS příkazy pro zobrazení hlavní stránky vyčleněny do samostatného souboru a zbývající CSS příkazy se načítají přes load CSS. Pro vytvoření zkráceného CSS souboru se používá služba Critical Path CSS Generator. Pro zvýšení hodnocení je obsah souboru CriticalCSS vložen do HTML stránky.

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

V mém případě zabíral slider velkou viditelnou část. Kvůli mechanismu odloženého načítání však na obrazovce zůstávalo prázdné místo. Pro vyřešení tohoto problému jsem zapnul zobrazení prvního obrázku slideru.

4. Optimalizujte obrázky

Google PageSpeed uvedl, že velikost některých obrázků lze snížit o 30 %. Věnujte pozornost typům souborů (obvykle jpeg), jejich velikostem (do 2000 pixelů) a rozlišení (do 100 pixelů na palec). K této doporučení je třeba přistupovat opatrně, protože ne vždy optimalizované obrázky vypadají kvalitně.

5. Zkraťte JavaScript

5.1. Je třeba 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ý kód skriptů minimalizovaný, a pokud je to nutné, minimalizujte ho pomocí služby Minifier. Pokud skripty obsahují zdrojový kód v Liquid, je třeba se minimalizace vzdát (nebo provést částečnou minimalizaci).

6. Zkraťte CSS

Při přidávání zkontrolujte, zda je zdrojový text CSS souborů minimalizovaný, a pokud je to nutné, minimalizujte ho pomocí služby Minifier. Pokud CSS obsahuje zdrojový kód v Liquid, je třeba se minimalizace vzdát (nebo provést částečnou minimalizaci).

7. Zapněte kompresi

 

Tento parametr nelze ovládat - omezení Shopify.

 

8. Zkraťte HTML

8.1. Minimalizujte CSS styly a text JS pomocí služby Minifier. 8.2. Odstraňte nadbytečné mezery v textu HTML. Problém je spojen s prací příkazů jazyka Liquid. Příkazy, které nevytvářejí text, tvoří prázdný řádek v textu HTML. Aby se tomu zabránilo, je třeba přidat pomlčku na začátek a konec příkazu. Například {% comment %} bude vypadat takto {%- comment -%}.