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 maken
  2. Plak de resultaten in een <style> tag op je pagina, net 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 die worden gebruikt om de zichtbare viewport te renderen. De zichtbare viewport wordt vaak 'above the fold content' genoemd. Het is dat deel van een webpagina dat je in je browser kunt zien zonder te hoeven scrollen. Aangezien de zichtbare viewport het eerste is wat een bezoeker ziet, moet je prioriteit geven aan het renderen van de zichtbare viewport. Critical CSS kan je daarbij helpen!

Waarom zou ik Critical CSS gebruiken

In een notendop: omdat het veel sneller is! Critical path (above-the-fold) css is een van de belangrijkste & meest impactvolle technieken die beschikbaar zijn om CSS-levering te optimaliseren. Vanwege de manier waarop alle moderne browsers werken, worden alle stijlen uit externe bestanden beschouwd als render blocking. Dit betekent dat een browser niet begint met renderen (om precies te zijn de render tree genereren) totdat hij alle externe css-bestanden in de head van de pagina heeft gedownload. Wanneer een browser 1 of meer CSS-bestanden moet downloaden, kan een pagina gemakkelijk 100ms of langer blokkeren. Google PageSpeed Insights suggereert render-blocking bronnen te elimineren om je pagina sneller te laten laden.
Een manier om dat te voorkomen is door critical CSS te gebruiken. Critical CSS is een verzameling CSS die nodig is om alleen het zichtbare deel van de pagina te tonen. Deze critical CSS wordt vaak inline getoond, in de head van de pagina. Als resultaat hoeft een browser niet 1 of meer CSS-bestanden te downloaden voordat hij kan beginnen met renderen. Ondertussen, terwijl de pagina wordt weergegeven, downloadt je browser de uiteindelijke CSS-bestanden op de achtergrond.

Hoe gebruik ik de Critical CSS generator?

Allereerst moet je de Critcal Path CSS voor je webpagina genereren. Geef simpelweg de url van je pagina op en druk vervolgens op 'Genereer Critical CSS'. Na een paar seconden zie je de geëxtraheerde CSS
Kopieer die CSS en plaats deze in de <head> van de pagina in <style> tag op je pagina, net onder de <title>
De volgende stap is om je originele CSS uit te stellen. Er zijn 3 methoden om je CSS uit te stellen.

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

Caching van niet-kritieke CSS

Critical CSS is razendsnel voor nieuwe bezoekers die je CSS-bestanden nog niet in hun browsercache hebben opgeslagen. Voor terugkerende bezoekers is er meestal weinig behoefte aan Critical CSS aangezien de CSS-bestanden kunnen worden geladen vanuit de browsercache.

Moet ik mijn stylesheets combineren?

Is het sneller, na het implementeren van Critical CSS, om je stylesheets te combineren? Er is geen eenvoudig antwoord op die vraag. Soms is het sneller om je stylesheets te combineren en soms niet. Dit heeft te maken met het critical rendering path. Als er meer dan 5 hoge prioriteit bronnen zijn, is het meestal logisch om een paar stylesheets te combineren.

Hoe werkt de Critical CSS generator?

De critical CSS generator werkt op een aangepast NodeJs-platform. We bezoeken je webpagina in feite met een echte 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 we de CSS op en verkleinen deze die nodig is voor het renderen.

Is er een wordpress plugin voor je Critical CSS generator?

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

Feedback / bèta status

Momenteel is de critical CSS generator in bèta status. Dat betekent dat ik nog steeds de hele tijd aan het experimenteren ben. Werkt de critical CSS generator niet voor jou? Maak je geen zorgen ... probeer het over 5 minuten nog eens!

Feedback of mis je een functie? Laat het me weten