Critical CSS Shopifyssa
Critical CSS Shopifyssa – lyhyesti
Critical CSS on kokoelma CSS-sääntöjä, joita tarvitaan ensimmäiseen renderöintiin. Nämä CSS-säännöt sijoitetaan sivun head-osioon. Tämä varmistaa, että selain aloittaa renderöinnin ilman, että sen tarvitsee ladata kaikkia renderöinnin estäviä CSS-tiedostoja
Shopify on laajalti käytetty all-in-one-verkkokaupparatkaisu, jolla kuka tahansa voi helposti rakentaa oman verkkokauppansa. Valitettavasti Shopify ei ole rakennettu täydellistä pagespeed-tulosta silmällä pitäen eikä tue automaattista Critical CSS:ää. Critical CSS voidaan Shopifyssa lisätä vain manuaalisesti.
Tässä artikkelissa näytän, kuinka voit nopeasti lisätä Critical CSS:n Shopify-verkkokauppaasi.
Mikä on Critical CSS?
Kaikkien modernien selainten toimintatavan vuoksi sivun renderöinti estyy ulkoisten CSS-tiedostojen takia. Kun selaimen täytyy ladata yksi tai useampi CSS-tiedosto, sivun renderöinti voi helposti estyä 100 ms tai jopa pidemmäksi aikaa.
Yksi tapa välttää tämä on käyttää Critical CSS:ää. Critical CSS on kokoelma CSS:ää, jota tarvitaan vain sivun näkyvän osan renderöintiin. Tämä Critical CSS sijoitetaan usein inline-muodossa sivun head-osioon. Tämä varmistaa, ettei selaimen tarvitse ladata yhtä tai useampaa CSS-tiedostoa ennen renderöinnin aloittamista. Samaan aikaan, kun sivu näytetään, selaimesi lataa lopulliset CSS-tiedostot taustalla.
Aloita nopeasti: Critical CSS Shopifyssa!
Shopify on suosittu all-in-one-verkkokaupparatkaisu. Se toimii erittäin helposti, mutta sivun nopeus ei ole Shopifyn vahvin puoli. Esimerkiksi automaattista Critical CSS -tukea ei ole oletuksena saatavilla. Siksi meidän täytyy lisätä Critical CSS -tuki manuaalisesti. Onneksi se ei ole paljon työtä. Seuraa alla olevaa vaiheittaista opasta käyttääksesi Critical CSS:ää Shopifyssa.
1. Luo uusi teema
Kun muokkaat teeman ydintoimintaa Shopifyssa, on parasta luoda uusi teema. Siirry nykyiseen teemaasi kohdasta 'Online Store'> 'Themes' ja kopioi nykyinen teemasi uudeksi teemaksi napsauttamalla 'Actions'> 'Duplicate'
2 Generoi Critical CSS
Critical CSS:n generoimiseen on lukuisia tapoja. Itse käytän NodeJs Critical -moduulia yhdistettynä joihinkin manuaalisiin säätöihin. Se on hieman pulmallista, mutta usein paras ratkaisu.
Jos se on sinulle hieman liian teknistä, voit kokeilla jotain monista online Critical CSS -generaattoreista. Syötä verkkosivustosi URL tähän ja työkalu generoi Critical CSS:n automaattisesti puolestasi. Kopioi tämä Critical CSS ja siirry seuraavaan vaiheeseen.
3. Lataa Critical CSS
Uudessa teemassasi siirry snippets-kansioon ja luo uusi tiedosto nimeltä critcal.css.liquid. Liitä vaiheessa 2 generoidun Critical CSS:n sisältö uuteen tiedostoosi.
4. Muokkaa mallitiedostoja
Avaa mallisi Layout-kansiossa. Meidän täytyy tehdä tässä 2 muutosta. Ensin lisäämme Critical CSS:n sivun head-osioon:
<head> Muokkaa sitten olemassa olevia CSS-viittauksia ladataksesi alkuperäiset CSS-tiedostot taustalla. Tätä varten käytämme preload-tagia. Preload-tagi ilmaisee selaimellesi, että tiedostoa käytetään myöhemmin sivulla. Selain lataa tämän tiedoston rinnakkain. Kun nämä tiedostot on ladattu, aktivoi CSS-tiedostot JavaScriptin kautta:
<link
4. Testaa uusi teema
Olet nyt valmis testaamaan Critical CSS:ää Shopifyssa. Napsauta teema-sivulla kopioidun teeman kohdalla 'Actions' > 'Preview'. Testaa uusi teema perusteellisesti kiinnittäen erityistä huomiota Cumulative Layout Shift (CLS) -arvoon Lighthousessa. Puutteellinen tai virheellinen Critical CSS voi aiheuttaa merkittävän layout shift -ongelman.
5. Julkaise uusi teema
Siirry vasemmassa valikossa kohtaan Themes kohdassa 'Online Store' ja valitse 'Actions'-kohdasta 'Publish' uudelle teemallesi.
Critical CSS on käytössä!
Onnittelut, Shopify-kauppasi käyttää nyt Critical CSS:ää. Tämä tekee kaupastasi paljon nopeammin latautuvan! Tarvitsetko apua kauppasi nopeuttamisessa? Autan mielelläni!
Shopifyn rajoitukset
Normaalisti haluat toimittaa Critical CSS:n vain vierailijoille, joilla ei ole lopullisia CSS-tiedostoja selaimen välimuistissa. Alkuperäisten CSS-tiedostojen tarjoaminen selaimen välimuistista on yleensä nopeampaa kuin Critical CSS:n käyttäminen.
Tämä tehdään lähettämällä eväste ensimmäisellä pyynnöllä ja palvelinpuolen renderöinnillä. Valitettavasti Shopify ei salli evästeiden lukemista ja lähettämistä Shopifyn Liquid-editorissa. Se on harmillista, mutta mitäpä sille voi?
Silti Critical CSS:n lisääminen Shopify-kauppaasi on järkevää. Nopeusparannus tekee siitä ehdottomasti vaivan arvoista!
Make decisions with Data.
You cannot optimize what you do not measure. Install the CoreDash pixel and capture 100% of user experiences.
- 100% Capture
- Data Driven
- Easy Install
