Critical CSS-generator.

Genereer critical path CSS en versnel je website

⚙

Critical CSS in 3 simpele stappen

  1. Voer de URL in van de pagina waarvoor je critical CSS wilt genereren
  2. Plak het resultaat in een <style>-tag op je pagina, vlak onder de <title>
  3. Stel het laden van de originele stylesheets uit
    <link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

Wat is critical CSS

Critical CSS is een verzameling CSS-declaraties om de zichtbare viewport te renderen. Dit deel van de pagina wordt ook wel 'above the fold content' genoemd. Het is het gedeelte dat je direct in de browser ziet zonder te scrollen. Omdat dit het eerste is wat een bezoeker ziet, moet de rendering hiervan prioriteit krijgen. Critical CSS helpt je hierbij!

Waarom critical CSS gebruiken

Kort gezegd: omdat het veel sneller is! Critical path (above-the-fold) CSS is een van de belangrijkste en meest effectieve technieken om CSS-levering te optimaliseren. Door de werking van moderne browsers zijn alle stijlen uit externe bestanden render blocking. De browser begint pas met renderen (om precies te zijn: het genereren van de render tree) nadat alle externe CSS-bestanden in de head van de pagina zijn gedownload. Als een browser een of meer CSS-bestanden moet downloaden, kan de pagina al snel 100ms of langer blokkeren. Google PageSpeed Insights adviseert om render-blocking bronnen te elimineren om de laadtijd van je pagina te verkorten.
Je voorkomt dit door critical CSS te gebruiken. Dit is de CSS die nodig is om alleen het zichtbare deel van de pagina te tonen. Deze critical CSS wordt vaak inline in de head van de pagina geplaatst. Hierdoor hoeft de browser geen externe CSS-bestanden te downloaden om te starten met renderen. De browser downloadt de volledige CSS-bestanden op de achtergrond terwijl de pagina al getoond wordt.

Hoe gebruik ik de Critical CSS-generator?

Genereer eerst de critical path CSS voor je webpagina. Vul de URL van je pagina in en klik op 'Genereer critical CSS'. Na een paar seconden verschijnt de geëxtraheerde CSS.
Kopieer deze CSS en plaats deze in een <style>-tag in de <head> van je pagina, direct onder de <title>.
Stel daarna het laden van de originele CSS uit. Er zijn 3 methoden om je CSS uit te stellen:

  1. Preload de CSS en swap de rel-waarde bij het laden
  2. Laad de CSS met media=print en swap het media-attribuut bij het laden
  3. Plaats de originele CSS-links in de footer van je pagina

Caching van non-critical CSS

Critical CSS is razendsnel voor nieuwe bezoekers die de CSS-bestanden nog niet in hun browsercache hebben. Voor terugkerende bezoekers is critical CSS meestal minder belangrijk, omdat de CSS-bestanden al uit de browsercache worden geladen.

Moet ik mijn stylesheets samenvoegen?

Is het sneller om je stylesheets samen te voegen na het implementeren van critical CSS? Er is geen eenvoudig antwoord op die vraag. Soms is het samenvoegen van stylesheets sneller, soms niet. Dit heeft te maken met het critical rendering path. Als er meer dan 5 high-priority resources zijn, is het meestal zinvol om een aantal stylesheets samen te voegen.

Hoe werkt de Critical CSS-generator?

De Critical CSS-generator draait op een op maat gemaakt Node.js-platform. We bezoeken je webpagina met een echte, op Chrome gebaseerde browser. We analyseren je website op verschillende viewports en bepalen welke delen van je stylesheets worden gebruikt voor het renderen van de zichtbare viewport (het direct zichtbare deel van je pagina). Vervolgens schonen we de benodigde CSS op en minificeren we deze.

Is er een WordPress-plugin voor de Critical CSS-generator?

Ja, die is er. Deze heet de Core Web Vitals-plugin en is specifiek ontworpen om samen te werken met onze Critical Path-extractor.

Feedback / bèta-status

De Critical CSS-generator bevindt zich momenteel in bèta-status. Dit betekent dat ik voortdurend aan het experimenteren ben. Werkt de Critical CSS-generator niet voor jou? Geen zorgen... probeer het over 5 minuten nog eens!

Feedback of mis je een feature? Laat het me weten