Kritieke CSS in Shopify

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

Kritieke CSS in Shopify - in het kort

Krititieke CSS zorgt er voor dat een browser sneller kan beginnen met renderen, het laten zien van de inhoud van de pagina, doordat er geen losse CSS bestanden worden gedownload die het laden blokkeren. 

Shopify is een veelgebruikte alles-in-een webshop oplossing waar een iedereen gemakkelijk een webshop kan beginnen. Helaas is in de opzet van shopify maar weinig rekening gehouden met echte pagespeed en is er geen ondersteuning voor geautomatiseerde kritieke CSS. WE kunnen dit wel met de hand toevoegen.

In dit artikel laat ik je zien hoe je snel kritieke CSS toe kunt voegen aan jouw shopify webshop.

Shopify Kritieke CSS

Wat is kritieke CSS?

Door de manier waarop alle moderne browsers werken wordt het weergeven van de pagina geblokkeerd door externe CSS bestanden. Wanneer een browser 1 of meerdere CSS bestanden moet downloaden kan een pagina gemakkelijke 100ms of langer blokkeren. Een manier om dat te voorkomen is door gebruik te maken van kritieke CSS. Kritieke CSS is een verzameling van CSS die nodig is om alleen het zichtbare gedeelte van de pagina te tonen. Deze kritieke CSS wordt vaak inline, in de head van de pagina getoond. Hierdoor hoeft een browser niet eerst 1 of meerde CSS bestanden te downloaden voordat het kan beginnen met renderen. Ondertussen, terwijl de pagina wordt getoond, download jouw browser op de achtergrond de uiteindelijke CSS bestanden.

Snel aan de slag: kritieke CSS in shopify!

Shopify is een populaire alles-in-een webshop oplossing. Het werkt erg gemakkelijk maar pagespeed is niet het sterkste punt van shopify. Zo is er bijvoorbeeld standaard geen goede en geautomatiseerde ondersteuning voor kritieke CSS. Daarom zullen we deze met de hand toe moeten voegen. Gelukkig is dat niet zo heel veel werk. Volg het onderstaande stappenplan om kritieke CSS in shopify te gebruiken.

1. Een nieuw thema maken

Als je aan de slag gaat met kritieke CSS in shopify kun je het beste even een nieuw theme aanmaken. Ga naar jouw huidige thema via 'Online Store' > Themes en kopieer jouw huidige theme naar een nieuw theme via 'Actions' > 'Duplicate'

duplicate shopify theme voor kritieke CSS

2 Kritieke CSS genereren

Kritieke CSS kun je op verschillende manieren maken. Zelf gebruik ik de NodeJs Critical module icm met wat handwerk. Dat is even puzzelen maar vaak wel de best oplossing.
Is dat jou iets te technisch dan kun je gebruik maken van een van de vele online Critike CSS tools. Vul hier de url van jouw website in en de tool maakt voor jou automatisch de Kritieke CSS aan. Kopieer deze kritieke CSS.

kritiek CSS voor shopify genereren

3. Kritieke CSS uploaden

In jouw nieuwe thema ga je naar de map snippets en maak je een nieuw bestand aan met de naam critcal.css.liquid. Plak hier de kritieke CSS in die je in stap 2 hebt aangemaakt.

kritieke CSS in shopify uploaden

4. Het template aanpassen

Open jouw template in de folder Layout . We moeten hier 2 aanpassingen maken. Als eerste voegen we de kritieke CSS toe in de head van de pagina:

<head>
{% include 'critical.css' %}

Daarna pas ik de bestaande CSS verwijzingen aan. Hiervoor gebruik ik de preload tag. Via de preload tag geef je aan dat een bestand later op de pagina gebruikt gaat worden waardoor de browser dit bestand alvast parallel gaat downloaden.  Zodra deze bestande zijn ge-download activeer ik via JavaScript de CSS bestanden als volgt:

<link 
    rel="preload" 
    href=" {{ 'theme.scss.css' | asset_url}}" 
    type="text/css" as="style" 
    onload="this.onload=null;this.rel='stylesheet';"/>

4. Nieuw thema testen

Je bent nu klaar om de kritieke CSS in shopify te testen. Op de thema pagina klik je op 'Actions' => 'Preview' van het gekopieerde thema. Test het nieuwe thema grondig en let vooral op de waarde van de Layout Shift (CLS) in lighthouse. Onvolledige of onjuiste kritieke CSS kan voor een flinke layout shift zorgen.

kritieke CSS in shopify testen

5. Nieuw thema publiceren

Navigeer naar Themes in het linker menu onder 'Online Store' en selecteer onder 'Actions' van jouw nieuwe thema 'Publish'.

kritieke CSS in shopify publiceren

Kritieke CSS staat live!

Gefeliciteerd, jouw shopify shop gebruikt nu kritieke CSS. Daardoor laadt jouw shop een stuk sneller! Heb je hulp nodig bij het sneller maken van jouw shop? Ik help je graag!

Beperkingen van Shopify

Normaal gesproken wil je kritieke CSS alleen leveren aan bezoekers die de uiteindelijke CSS bestanden niet in de browser cache hebben staan. Wanneer ik bezoeker de CSS bestanden namelijk niet hoeft te downloaden is het vaak sneller om de CSS met rust te laten en geen kritieke CSS te gebruiken.
Dat doe je door middel van cookies en server side rendering. Helaas kun je in de liquid editor van shopify geen cookies plaatsen en uitlezen. Jammer, maar helaas. 
Toch blijft het zinnig om kritieke CSS wel aan jouw shopify shop toe te voegen. De snelheidswinst maakt het het zeker waard!

I help teams pass the Core Web Vitals:

lighthouse 100 score

A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?"

Shopify Kritieke CSSCore Web Vitals Shopify Kritieke CSS