Critical CSS generator.

Wat is Critical CSS

Critical CSS is een verzameling CSS-declaraties die worden gebruikt om de zichtbare viewport te renderen. De zichtbare viewport wordt vaak 'above the fold content' genoemd. Dit is het deel van een webpagina dat je in je browser ziet zonder te scrollen. Omdat de zichtbare viewport het eerste is wat een bezoeker ziet, moet je het renderen ervan prioriteit geven. Critical CSS helpt je daarbij!

Waarom zou ik Critical CSS gebruiken

Kort gezegd: omdat het veel sneller is! Critical path (above-the-fold) CSS is een van de belangrijkste en meest impactvolle technieken om CSS delivery te optimaliseren. Door de manier waarop alle moderne browsers werken, gelden alle styles uit externe bestanden als render blocking. Dit betekent dat een browser pas begint met renderen (specifiek: het genereren van de render tree) als alle externe CSS-bestanden in de head van de pagina zijn gedownload. Moet een browser 1 of meer CSS-bestanden downloaden, dan blokkeert een pagina al snel 100 ms of langer. Google PageSpeed Insights adviseert om render-blocking resources te elimineren, zodat je pagina sneller laadt.
Dat voorkom je met critical CSS. Critical CSS is een verzameling CSS die alleen nodig is voor het zichtbare deel van de pagina. Deze critical CSS staat vaak inline, in de head van de pagina. Hierdoor hoeft een browser niet eerst 1 of meer CSS-bestanden te downloaden voordat het renderen kan beginnen. Terwijl de pagina al wordt getoond, downloadt je browser op de achtergrond de uiteindelijke CSS-bestanden.

Hoe gebruik ik de Critical CSS generator?

Allereerst genereer je de Critical Path CSS voor je webpagina. Vul gewoon de URL van je pagina in en klik op 'Generate Critical CSS'. Na een paar seconden zie je de geëxtraheerde CSS
Kopieer die CSS en plaats deze in een <style>-tag in de <head> van je pagina, direct onder de <title>
De volgende stap is het uitstellen van je originele CSS. Er zijn 3 methoden om je CSS uit te stellen.

1. Preload de CSS en swap de rel on load
2. Laad de CSS met media=print en swap het media-element on load
3. Plaats de originele CSS-links in de footer van je pagina

Non-critical CSS cachen

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

Moet ik mijn stylesheets samenvoegen?

Is het na het implementeren van Critical CSS sneller om je stylesheets samen te voegen? Daar is geen simpel antwoord op. Soms is het sneller om je stylesheets samen te voegen, soms juist niet. Dit heeft te maken met het critical rendering path. Zijn er meer dan 5 high-priority resources, dan heeft het meestal zin om een paar stylesheets samen te voegen.

Hoe werkt de Critical CSS generator?

De critical CSS generator draait op een custom NodeJs-platform. We bezoeken je webpagina met een echte, op Chrome gebaseerde webbrowser. We evalueren je website op verschillende viewports en bepalen welke delen van je stylesheets worden gebruikt voor het renderen van de zichtbare viewport (het zichtbare deel van je pagina). Vervolgens schonen en minifiën we de CSS die nodig is voor het renderen.

Is there a wordpress plugin for you Critical CSS generator?

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

Feedback / bètastatus

Momenteel heeft de critical CSS generator een bèta-status. Dat betekent dat ik continu aan het experimenteren ben. Werkt de critical CSS generator niet bij jou? Geen zorgen ... probeer het over 5 minuten nog eens!

Feedback of mis je een feature? Laat het me weten