Critical CSS in Shopify: render-blocking CSS elimineren
Critical CSS in Shopify in het kort
Critical CSS is een verzameling CSS-regels die nodig zijn voor de eerste rendering. Deze regels worden inline in de head van de pagina geplaatst, zodat de browser kan beginnen met renderen zonder te wachten tot externe CSS-bestanden zijn gedownload.
Shopify ondersteunt geen geautomatiseerde critical CSS. Het heeft een uitstekende infrastructuur (data uit de 2025 Web Almanac toont aan dat Shopify alle e-commerceplatforms leidt met 95% goede TTFB en 92% goede LCP op desktop), maar slechts 48% van de Shopify-winkels haalt alle Core Web Vitals op mobiel. Render-blocking CSS is een van de belangrijkste redenen. De 2025 Web Almanac ontdekte dat 85% van de mobiele pagina's nog steeds faalt voor de render-blocking resources audit.
Laatst beoordeeld door Arjen Karel in maart 2026
Wat is critical CSS?
Alle moderne browsers blokkeren de rendering totdat externe CSS-bestanden zijn gedownload en geparsed. Wanneer een pagina één of meer CSS-bestanden laadt, kan de rendering gemakkelijk 100ms of langer worden geblokkeerd.
Critical CSS lost dit op door alleen de CSS-regels te extraheren die nodig zijn om het zichtbare deel van de pagina (above the fold) te renderen en deze inline in de <head> te plaatsen. De browser kan direct beginnen met renderen, terwijl de volledige stylesheets op de achtergrond worden gedownload. Dit verbetert direct de First Contentful Paint (FCP) en Largest Contentful Paint (LCP).
De moderne aanpak: inline_asset_content
Als je thema aparte CSS-bestanden per sectie of component gebruikt (zoals het Dawn-thema van Shopify en de meeste Online Store 2.0-thema's), kun je het inline_asset_content Liquid-filter gebruiken om CSS direct vanuit je asset-bestanden inline te plaatsen:
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
Dit plaatst de inhoud van het CSS-bestand inline als een <style>-blok, waardoor het render-blocking verzoek volledig wordt geëlimineerd. Je kunt CSS ook voorwaardelijk inline plaatsen, uitsluitend voor secties above the fold:
{%- if section.index0 < 2 -%}
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
{%- else -%}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%}
Secties met een index onder de 2 (de eerste twee secties op de pagina, die bijna altijd above the fold staan) krijgen hun CSS inline. Al het andere wordt geladen als een reguliere stylesheet. Dit is de aanpak die ik aanbeveel voor moderne Shopify-thema's.
De klassieke aanpak: critical CSS genereren en inline plaatsen
Als je thema één grote stylesheet gebruikt (gebruikelijk in oudere thema's en zwaar aangepaste winkels), moet je de critical CSS zelf extraheren. Dit is een proces van zes stappen.
1. Dupliceer je thema
Wanneer je het kerngedrag van een template in Shopify bewerkt, werk dan altijd eerst in een kopie. Navigeer naar je huidige thema via 'Online Store' > 'Themes' en dupliceer het door op 'Actions' > 'Duplicate' te klikken.
2. Genereer critical CSS
Ik gebruik de Critical Node.js-module in combinatie met handmatige aanpassingen. Dat kost wat moeite, maar het levert de beste resultaten op.
Als dat te technisch voor je is, gebruik dan een online generator. Onze eigen Critical CSS Generator doet dit voor je. Voer je URL in, kopieer de gegenereerde critical CSS en ga door naar de volgende stap.
3. Upload critical CSS
Navigeer in je gedupliceerde thema naar de snippets-map en maak een nieuw bestand aan genaamd critical-css.liquid. Wikkel de gegenereerde CSS in <style>-tags en plak het in je nieuwe bestand.
4. Bewerk het lay-outbestand
Open theme.liquid in de Layout-map. Er zijn twee wijzigingen nodig.
Render ten eerste de critical CSS-snippet in de <head>:
<head>
{% render 'critical-css' %}
Let op: Shopify heeft {% include %} verouderd verklaard ten gunste van {% render %}. Als je thema nog steeds include gebruikt, werkt het wel, maar je zou moeten migreren.
Verander vervolgens de bestaande CSS-referenties zodat ze op de achtergrond laden. Het schoonste patroon (gebruikt door Shopify's eigen Dawn-thema) is de media="print"-truc:
<link
rel="stylesheet"
href="{{ 'theme.scss.css' | asset_url }}"
media="print"
onload="this.media='all'; this.onload=null;" />
Dit vertelt de browser om de stylesheet te behandelen als een print-stylesheet (non-render-blocking) tijdens de initiële lading, en deze om te zetten naar media="all" zodra deze is gedownload. Je critical CSS rendert de pagina onmiddellijk terwijl de volledige stylesheet op de achtergrond wordt geladen. Deze media="print"-aanpak heeft het oudere rel="preload"-patroon vervangen omdat het eenvoudiger is en geen <noscript>-fallback nodig heeft.
5. Test het nieuwe thema
Klik op de themapagina op 'Actions' > 'Preview' om het gekopieerde thema te testen. Let in het bijzonder op de Cumulative Layout Shift (CLS). Incomplete of incorrecte critical CSS veroorzaakt een flash of unstyled content waarbij elementen renderen zonder hun uiteindelijke stijlen, waarna ze op hun plek springen zodra de volledige CSS is geladen. Dat is layout shift.
Draai PageSpeed Insights op de preview-URL en vergelijk FCP en LCP voor en na. Je zou bij beide een duidelijke verbetering moeten zien. Voor doorlopende monitoring nadat je live bent gegaan, kun je je velddata volgen met Real User Monitoring om te verifiëren dat de verbetering standhoudt voor echte bezoekers.
6. Publiceer het nieuwe thema
Navigeer naar Themes in het linkermenu onder 'Online Store' en selecteer onder 'Actions' 'Publish' voor je nieuwe thema.
Beperkingen waar je geen controle over hebt
Shopify dwingt content_for_header af in de <head> van elke pagina. Dit injecteert analytics-scripts, app-scripts en andere platformcode die je niet kunt uitstellen (defer) of wijzigen. Elke geïnstalleerde Shopify-app kan scripts toevoegen via dit mechanisme. Dit is een onvermijdelijke render-blocking kostenpost, wat het optimaliseren van alles waar je wél controle over hebt (je CSS, je fonts, je eigen scripts) nog belangrijker maakt. Het verwijderen van ongebruikte apps is een van de meest effectieve dingen die je kunt doen.
Een andere beperking: Shopify staat het lezen of verzenden van cookies in de Liquid-editor niet toe. Idealiter zou je critical CSS alleen aanbieden aan nieuwe bezoekers en de gecachte volledige stylesheet aan terugkerende bezoekers serveren. Dat is niet mogelijk op Shopify. Toch maakt de snelheidswinst van critical CSS het de moeite waard. De mediane Shopify-winkel op mobiel heeft een LCP van 2,26 seconden volgens de Shero Commerce benchmark van 2025, precies op het randje van de grens van 2,5 seconden. Hier ook maar 200ms van afsnoepen door render-blocking CSS te elimineren, kan het verschil betekenen tussen het wel of niet halen van de Core Web Vitals.
Wat kun je nog meer doen?
Critical CSS is één stukje van de puzzel. Voor een complete Shopify optimalisatiestrategie, bekijk onze Core Web Vitals-gids voor Shopify. Andere aanpassingen met een hoge impact zijn het preloaden van je LCP-afbeelding, het lokaal hosten van je Google Fonts, en het begrijpen van resource-prioritering. Shopify ondersteunt ook Speculation Rules voor directe paginanavigaties en 103 Early Hints voor het preloaden van resources nog voordat de HTML überhaupt aankomt.
Als je nog steeds vecht tegen unused CSS waarschuwingen, pak dat dan eerst aan. Het verwijderen van CSS die je niet nodig hebt, is altijd beter dan het inline plaatsen van CSS die je wél gebruikt.
Search Console flagged your site?
When Google flags your Core Web Vitals you need a clear diagnosis fast. I deliver a prioritized fix list within 48 hours.
Request Urgent Audit
