Apskatīsim veidnes optimizāciju, izmantojot vietnes casaeleganza.com piemēru - galvenās lapas optimizēšana.
Kāpēc ir nepieciešama optimizācija:
Rādot meklēšanas rezultātus, Google ņem vērā ranžēšanu un veikala optimizācijas metriku. Veikaliem ar augstākiem rādītājiem ir lielāka iespēja parādīties meklēšanas rezultātu augstākajās pozīcijās.
Rīki, kas palīdzēs izprast optimizācijas norādījumus:
Optimizācijas laikā Google PageSpeed Tool ziņoja par 72 vērtējumu darbvirsmas versijai (minimālais līmenis ir 80). Lejupielādēto failu skaits ir 162. Lapas izmērs ir 3,2 MB.
Optimizācijas iezīmes, kas jāņem vērā:
- Shopify darbojas ar HTTP 1.1 protokolu — tātad ir ierobežots vienlaikus augšupielādējamo failu skaits — tas samazina veikala parādīšanas ātrumu.
- Shopify platformas ierobežojumu dēļ nevar izpildīt visus Google PageSpeed ieteikumus
- Pirms optimizācijas sākšanas pārbaudiet instalēto lietojumprogrammu sarakstu un noņemiet visas nevajadzīgās programmas
Optimizācijas ieteikumi:
1. Izmantojiet pārlūkprogrammas kešatmiņu
Šo parametru nevar kontrolēt — Shopify ierobežojums.
2. Noņemiet renderēšanu bloķējošos JavaScript un CSS lapas augšdaļā
2.1. JS optimizācija
Lai skripti nebloķētu satura ielādi, jums jāpārbauda visu skriptu izsaukums un jāpievieno komanda “atlikt”. Komanda async ir jāizmanto, lai saprastu, kā darbojas skripti.
2.2. CSS optimizācija
2.2.1. Ir nepieciešams pēc iespējas vairāk grupēt dažādus css failus vienā kopējā failā (HTTP 1.1 ierobežojums). Pēc optimizācijas palika 2 faili: viens priekšielādēšanai un otrs lapas pēcielādēšanai.
2.2.2. Lai pēcielādētu CSS, izmantojiet saites tagā esošo pirmsielādes komandu un skriptu, kas ievieš iepriekšēju ielādi nesaderīgām pārlūkprogrammām.
2.2.3. Ideāls variants CSS sagatavošanai katram lapas veidam (mājas lapa, kolekcija, produkts, lapa, emuārs). Tas samazinās lapas parādīšanas ātrumu.
2.2.4. Parādot galveno lapu, tika izmantota opcija Critical CSS - kad visas galvenās lapas attēlošanai nepieciešamās CSS komandas tiek atdalītas atsevišķā failā, bet pārējās CSS komandas tiek ielādētas caur ielādes CSS. Lai izveidotu saīsinātu CSS failu, izmantojiet pakalpojumu Critical Pass CSS Generator. Lai uzlabotu vērtējumu, CriticalCSS faila saturs ir iegults lapas html.
3. Optimizējiet redzamā satura ielādi
Manā gadījumā slīdnis aizņēma lielāko daļu redzamās daļas. Bet slinkā ielādes mehānisma dēļ ekrānā bija tukša vieta. Lai atrisinātu šo problēmu, es iespējoju slīdņa pirmā attēla parādīšanu.
4. Optimizējiet savus attēlus
Google PageSpeed atzīmēja, ka dažus attēlus var samazināt līdz pat 30%. Pievērsiet uzmanību failu tipiem (parasti jpeg), to izmēriem (līdz 2000 pikseļiem) un izšķirtspējai (līdz 100 pikseļiem collā). Šis ieteikums ir jāpieiet piesardzīgi, jo... Optimizētie attēli ne vienmēr izskatās kvalitatīvi.
5. Samaziniet JavaScript
5.1. Ir nepieciešams pēc iespējas vairāk grupēt dažādus js failus vienā kopējā failā (HTTP 1.1 ierobežojums).
5.2. Pievienojot, pārbaudiet, vai skriptu avota teksts ir minimizēts un, ja nepieciešams, minimizējiet to, izmantojot pakalpojumu Minifier. Ja skriptos ir iekļauts šķidrais avota kods, tad no minimizēšanas ir jāatsakās (vai jāveic daļēja minimizēšana).
6. Samaziniet savu CSS
Pievienojot, pārbaudiet, vai css failu avota teksts ir samazināts un, ja nepieciešams, minimizējiet to, izmantojot pakalpojumu Minifier. Ja css ietver Liquid pirmkodu, tad no minimizēšanas ir jāatsakās (vai jāveic daļēja minimizēšana).
7. Ieslēdziet saspiešanu
Jūs nevarat pārvaldīt šo parametru — Shopify ierobežojums
8. Samaziniet HTML
8.1. Samaziniet css stilus un js tekstu, izmantojot pakalpojumu Minifier.
8.2. Noņemiet papildu atstarpes html tekstā. Problēma ir saistīta ar šķidro valodu komandu darbību. Komandas, kas neizvada tekstu, rada tukšu rindu html tekstā. Lai no tā izvairītos, komandas sākumā un beigās jāpievieno defise.
Piemēram, {% komentārs %} izskatītos šādi: {%- komentārs -%}.
P.S. Lai optimizētu vietnes mobilās versijas ielādes ātrumu, Google izveidoja AMP tehnoloģiju, kas paātrina Shopify veikala ielādes laiku.