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

Shopify mallide optimeerimine

Vaatleme malli optimeerimist saidi casaeleganza näitel .com – avalehe optimeerimine.

Miks optimeerida?

Otsingutulemuste kuvamisel võtab Google arvesse poe asetust ja optimeerimist. Kõrgemate hindadega poed ilmuvad tõenäolisemalt otsingutulemuste esimestel positsioonidel.

Tööriistad, mis aitavad teil optimeerimisjuhiseid mõista:

Optimeerimise alustamise ajal andis Google PageSpeed ​​​​Tool lauaarvuti versiooni skooriks 72 (minimaalne tase on 80). Üleslaaditud failide arv – 162. Lehekülje suurus – 3,2 MB.

Arvesse tuleb võtta optimeerimise iseärasusi:

  1. Shopify töötab HTTP 1.1-s – seega on korraga üleslaaditavate failide arv piiratud – see vähendab poe kuvamise kiirust.
  2. Shopify platvormi piirangute tõttu ei saa kõiki Google PageSpeedi soovitusi järgida.
  3. Enne optimeerimist kontrollige installitud rakenduste loendit ja eemaldage kõik mittevajalikud rakendused.

Soovitused optimeerimiseks:

1. Kasutage brauseri vahemälu

Seda seadet ei saa juhtida – Shopify piirang.

2. Eemaldage JavaScript ja CSS, mis blokeerivad lehe ülaosa kuvamist

2.1. JS-i optimeerimine

Selleks, et skriptid ei blokeeriks sisu laadimist, peate kontrollima kõigi skriptide väljakutsumist ja lisama käsku „lükka”. Asünkroonimise käsku tuleks kasutada skriptide tööpõhimõtete mõistmisel.

JS-i optimeerimine Shopify jaoks

2.2. CSS-i optimeerimine

2.2.1. Erinevad css-failid tuleb võimalikult suurel määral rühmitada üheks ühiseks failiks (HTTP 1.1 piirang). Peale optimeerimist jäi alles 2 faili: üks lehe eellaadimiseks ja teine ​​järellaadimiseks.

2.2.2. CSS-i järellaadimiseks kasutage lingimärgendis eellaadimiskäsku ja skripti mis rakendab ühildumatute brauserite eellaadimise.

CSS-i optimeerimine Shopify jaoks

2.2.3. Täiuslik CSS-i ettevalmistus iga lehetüübi jaoks (kodu, kollektsioon, toode, leht, ajaveeb). Tänu sellele on võimalik lehe kuvamise kiirust vähendada.

2.2.4. Avalehe kuvamisel kasutati valikut Kriitiline CSS - kui kõik põhilehe kuvamiseks vajalikud CSS-käsud eraldatakse eraldi failis ning ülejäänud CSS-käsud laaditakse laadimis-CSS-i kaudu. Critical Pass CSS-i generaatorit kasutatakse lühendatud CSS-i loomiseks fail . Reitingu suurendamiseks manustatakse CriticalCSS-faili sisu lehe html-i.

CSS-i optimeerimine Shopify jaoks

3. Optimeerige nähtava sisu laadimist

Minu puhul võttis liugur suurema osa nähtavast osast. Kuid laisa laadimismehhanismi tõttu oli ekraanil tühi koht. Selle probleemi lahendamiseks lülitasin sisse liuguri esimese pildi kuvamise.

Shopify Store Speed ​​​​Optimization

4. Optimeerige oma pilte

Google PageSpeed ​​​​märkis, et mõne pildi suurust saab vähendada kuni 30%. Pöörake tähelepanu failitüüpidele (tavaliselt jpeg), nende suurusele (kuni 2000 pikslit) ja eraldusvõimele (kuni 100 ppi). Sellesse soovitusse tuleks suhtuda ettevaatlikult, kuna mitte alati optimeeritud pildid näevad head välja.

5. Vähendage JavaScripti

JS-i minimeerimine Shopify jaoks

5.1. Erinevad js-failid tuleb võimalikult palju rühmitada üheks ühiseks failiks (HTTP 1.1 piirang).

5.2. Lisamisel kontrollige, kas skriptide lähtetekst on minimeeritud ja vajadusel minimeerige seda kasutades Minifier. Kui skriptid sisaldavad vedelat lähtekoodi, tuleks minimeerimisest loobuda (või viia läbi osaline minimeerimine).

6. Minimeeri CSS

Lisamisel kontrollige, kas css-failide lähtetekst on minimeeritud ja vajadusel minimeerige seda teenuseMinifikaator. Kui css sisaldab Liquidi lähtekoodi, tuleks minimeerimisest loobuda (või tuleks teha osaline minimeerimine).

7. Luba tihendamine

Seda seadet ei saa juhtida – Shopify piirang

8. Minimeerige HTML

8.1. Minimeerige css-stiile ja js-teksti minifiriga.

8.2. Eemaldage html-tekstist lisatühikud. Probleem on seotud vedelate keelekäskude toimimisega. Käsud, mis teksti ei väljasta, moodustavad html-tekstis tühja stringi. Selle vältimiseks tuleb käsu algusesse ja lõppu lisada sidekriips.

Näiteks {% kommentaar %} näeks välja selline {%- kommentaar -%}.

P.S. Saidi mobiiliversiooni laadimiskiiruse optimeerimiseks lõi Google AMP-tehnoloogia, mis kiirendab Shopify poe laadimisaeg.