Kritieke CSS generator (beta).

Generate Critical Path CSS and speed up your website

Kritieke CSS in 3 simpele stappen

  1. Geef de URL van de pagina op waarvoor je kritieke CSS wilt maken
  2. Plak de resultaten in een <style> tag op jouw 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 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.

Feedback / beta status

Momenteel is de kritieke CSS generator in beta status. Dat betekent dat ik nog volop aan het experimenteren ben. Werkt het even niet? Probeer het dan over 5 minuten nog eens.

Mis je een feature? Laat het me weten