Critical CSS wird oft als “Critical CSS Rendering Path” bezeichnet, womit der gesamte notwendige CSS-Code gemeint ist, der erforderlich ist, um die Webseite in einem Browser für den Webseitenbesucher darzustellen. Der Besucher wird oft einen weißen Bildschirm sehen, bis die CSS-Stylesheets heruntergeladen und ausgewertet wurden. Aus diesem Grund ist die Optimierung der Auslieferung von CSS wichtig für die Seitengeschwindigkeit und das User Experience. Um die Ladegeschwindigkeit einer Webseite zu verbessern, sollte nur das CSS geladen werden, das zum Laden des sichtbaren Teils einer Seite erforderlich ist. Da alle CSS gerendert werden, bedeutet dies, dass die Seite für den Besucher der Webseite viel schneller erscheint. Das ist der Grund, warum Pagespeed-Tools den Nutzern oft raten, render-blockierendes CSS below the fold zu entfernen. Dies bezieht sich auf CSS, das nicht benötigt wird, damit die Seite im Ansichtsbereich des Besuchers der Webseite richtig dargestellt wird. Der Inline-Teil (also direkt im `<head>` durch `<style>`) soll alles beinhalten, was zum Rendern des Sichtbereichs notwendig ist. Dieser Teil wird als „critical“ bezeichnet.
Weiterlesen ...