Critical CSS in Shopify
Critical CSS in Shopify - in het kort
Critical CSS is een verzameling CSS regels die nodig is voor de eerste rendering. Deze CSS regels worden in de head van de pagina geplaatst. Dit zorgt ervoor dat een browser begint met renderen zonder alle render-blocking CSS bestanden te hoeven downloaden.
Shopify is een veelgebruikte alles-in-één webshop oplossing waar iedereen gemakkelijk zijn eigen webshop kan bouwen. Helaas is Shopify niet gebouwd met een perfecte pagespeed score in gedachten en ondersteunt het geen geautomatiseerde Critical CSS. Critical CSS in Shopify kan alleen handmatig worden toegevoegd.
In dit artikel laat ik je zien hoe je snel Critical CSS aan je Shopify webshop kunt toevoegen.
Wat is Critical CSS?
Door de manier waarop alle moderne browsers werken, wordt het renderen van de pagina geblokkeerd door externe CSS bestanden. Wanneer een browser 1 of meer CSS bestanden moet downloaden, kan het renderen van een pagina gemakkelijk 100ms of zelfs langer geblokkeerd worden.
Een manier om dat te vermijden is door Critical CSS te gebruiken. Critical CSS is een verzameling CSS die nodig is om alleen het zichtbare deel van de pagina te renderen. Deze Critical CSS wordt vaak inline geplaatst, in de head van de pagina. Dit zorgt ervoor dat een browser geen 1 of meer CSS bestanden hoeft te downloaden voordat hij kan beginnen met renderen. Ondertussen, terwijl de pagina wordt weergegeven, downloadt je browser de definitieve CSS bestanden op de achtergrond.
Ga snel aan de slag: Critical CSS in Shopify!
Shopify is een populaire alles-in-één webshop oplossing. Het werkt heel eenvoudig, maar pagespeed is niet het sterkste punt van Shopify. Zo is er standaard geen goede en geautomatiseerde ondersteuning voor Critical CSS. Daarom zullen we Critical CSS ondersteuning handmatig moeten toevoegen. Gelukkig is dat niet veel werk. Volg de stapsgewijze handleiding hieronder om Critical CSS in Shopify te gebruiken.
1. Maak een nieuw thema
Bij het bewerken van het kerngedrag van een template in Shopify, is het het beste om een nieuw thema te maken. Navigeer naar je huidige thema via 'Online Store'> 'Themes' en kopieer je huidige thema naar een nieuw thema door te klikken op 'Actions'> 'Duplicate'
2 Genereer Critical CSS
Er zijn talloze manieren om Critical CSS op verschillende manieren te genereren. Ik gebruik zelf de NodeJs Critical module in combinatie met enkele handmatige aanpassingen. Dat is een beetje puzzelen, maar vaak de beste oplossing.
Als dat een beetje te technisch voor je is, zou je een van de vele online Critical CSS Generators kunnen proberen. Voer de url van je website hier in en de tool genereert automatisch je Critical CSS voor je. Kopieer deze Critical CSS en ga door naar de volgende stap.
3. Upload Critical CSS
In je nieuwe thema, navigeer naar de snippets map en maak een nieuw bestand aan genaamd critcal.css.liquid. Plak de inhoud van de gegenereerde Critical CSS uit stap 2 in je nieuwe bestand.
4. Bewerk de template bestanden
Open je template in de Layout map. We moeten hier 2 aanpassingen doen. Eerst voegen we de Critical CSS toe in de head van de pagina:
<head>
{% include 'critical.css'%}
Bewerk vervolgens de bestaande CSS referenties om de originele CSS bestanden op de achtergrond te downloaden. Hiervoor gebruiken we de preload tag. De preload tag geeft aan je browsers aan dat een bestand later op de pagina gebruikt zal worden. De browser zal dit bestand dan parallel downloaden. Zodra deze bestanden gedownload zijn, activeer de CSS bestanden via JavaScript:
<link
rel = "preload"
href = "{{'theme.scss.css' | asset_url}}"
type = "text / css" as = "style"
onload = "this.onload = null; this.rel = 'stylesheet';" />
4. Test nieuw thema
Je bent nu klaar om de Critical CSS in Shopify te testen. Klik op de thema pagina op 'Actions' > 'Preview' van het gekopieerde thema. Test het nieuwe thema grondig, met speciale aandacht voor de waarde van de Layout Shift (CLS) in Lighthouse. Onvolledige of onjuiste Critical CSS kan een aanzienlijke Layout Shift veroorzaken.
5. Publiceer een nieuw thema
Navigeer naar Themes in het linkermenu onder 'Online Store' en selecteer onder 'Actions' 'Publish' voor je nieuwe thema.
Critical CSS is live!
Gefeliciteerd, je shopify winkel gebruikt nu Critical CSS. Dit maakt je winkel veel sneller! Heb je hulp nodig bij het versnellen van je winkel? Ik help je graag!
Beperkingen van Shopify
Normaal gesproken wil je Critical CSS alleen leveren aan bezoekers die de definitieve CSS bestanden niet in hun browser cache hebben. Het serveren van de originele CSS bestanden via de browser cache is meestal sneller dan het gebruik van Critical CSS.
Dit wordt gedaan door een cookie te sturen bij het eerste verzoek en wat server side rendering. Helaas staat Shopify het niet toe om cookies te lezen en te sturen in de Shopify liquid editor. Dat is jammer, maar wat kun je doen?
Toch is het zinvol om Critical CSS aan je Shopify winkel toe te voegen. De snelheidswinst maakt het zeker de moeite waard!
Secure your Q3 Metrics.
Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.
- Strategic Planning
- Code Implementation
- Verification & Testing
