t3n News Entwicklung

CSS-Stylesheets asynchron nachladen – so gehts!

CSS-Stylesheets asynchron nachladen – so gehts!

Häufig benötigt ihr einen Teil des nicht gleich zu Beginn des ersten Seitenaufrufs. Wir stellen euch ein kleines Snippet vor, das ein asynchrones Nachladen von CSS-Dateien ermöglicht.

CSS-Stylesheets asynchron nachladen – so gehts!

Asynchrones Nachladen von CSS mit loadCSS. (Screenshot: GitHub)

loadCSS: Die Funktion lässt dich CSS-Stylesheets asynchron nachladen

CSS nur bei Bedarf zu laden, kann mehrere nützliche Anwendungsfälle haben. Ein Beispiel wäre, dass ihr nur die CSS-Regeln beim Seitenaufruf ladet, die bei der Darstellung des sofort sichtbaren Bereichs benötigt werden. Und genau das ist mit loadCSS möglich: CSS dann nachzuladen, wenn ihr es braucht.

Um das zu bewerkstelligen, ist nur ein kleiner JavaScript-Schnipsel im Head erforderlich (hier nutzen wir der besseren Übersichtlichkeit halber nicht die minifizierte Version):

/*!
loadCSS: load a CSS file asynchronously.
[c]2014 @scottjehl, Filament Group, Inc.
Licensed MIT
*/
function loadCSS( href, before, media ){
"use strict";
// Arguments explained:
// `href` is the URL for your CSS file.
// `before` optionally defines the element we'll use as a reference for injecting our <link>
// By default, `before` uses the first <script> element in the page.
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
ss.rel = "stylesheet";
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render
ss.media = "only x";
// inject link
ref.parentNode.insertBefore( ss, ref );
// set media back to `all` so that the styleshet applies once it loads
setTimeout( function(){
ss.media = media || "all";
} );
}

Jetzt müsst ihr nur noch an passender Stelle die loadCSS()-Funktion aufrufen und als Parameter den Pfad zur CSS-Datei übergeben. Das kann dann so aussehen: loadCSS( "style.css" );. Das wars schon. Jetzt könnt ihr beispielsweise Stylesheets von Plugins, etwa einer Lightbox, asynchron nachladen, indem ihr den Aufruf der loadCSS()-Funktion vor das schließende body-Tag stellt. Dadurch verhindert ihr, dass die CSS-Datei direkt beim Seitenaufruf eine der wenigen zeitgleich offenen Server-Verbindungen blockiert oder euer Haupt-Stylesheet unnötig größer wird, wenn ihr die CSS-Dateien einfach in einer großen Datei zusammenführen würdet.

Aktuell gibt es noch das Problem, dass eine CSS-Datei mehrfach nachgeladen werden kann. Wenn beispielsweise eine CSS-Datei durch den Klick eines Links nachgeladen werden soll und dieser Link ein weiteres Mal angeklickt wird, dann steht die CSS-Datei zweimal im head-Element. Auf GitHub gibt es aber bereits einen entsprechenden Pull Request, der bei einem kurzen Test auch funktioniert hat.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
15 Antworten
  1. von michsch am 23.06.2014 (16:15 Uhr)

    Google Page Speed empfiehlt das sogar nicht nur für Plugins, welche tatsächlich nicht beim ersten Laden direkt sichtbar sind (z.B. Lightbox), sondern für alle Inhalte, die keine "above the fold"-Inhalte sind.
    Das heißt, dass man laut Google nur das CSS initial laden sollte, welches wirklich nur das grobe Seitenlayout enthält. Andere Design-Elemente, Web-Fonts oder als Data-URI eingebundene Hintergrundgrafiken sollten asynchron geladen werden. Ich habe dafür allerdings noch keinen annehmbaren Workflow gefunden, aber ich bin auf der Suche. Mit Sass, Compass und Grunt sollte sich das immerhin realisieren lassen.

    Antworten Teilen
  2. von Bluebird101 am 24.06.2014 (11:45 Uhr)

    Dass Google Page Speed das empfiehlt, scheint ja recht neu zu sein. Bis vor Kurzem wurde das, soweit ich mich erinnern kann, noch nicht vorgeschlagen.

    Alternativ könnte man das auch mit einem PHP-Skript realisieren. Je nach eingesetzter Software buffert man zunächst sämtliche Inhalte, extrahiert dann mit PHP alle benötigt CSS-Klassen und -IDs und kann anschließend einen Teil auslagern und einen Teil des Stylesheets direkt inline einbetten. Fraglich ist jedoch, wie gut bei einer solchen Methode dann die Performance ist.

    Antworten Teilen
  3. von irgendeinem Spinner am 24.06.2014 (14:29 Uhr)

    @Bluebird101

    Für Nodejs/Grunt/Gulp gibt es sowas schon fertig: https://github.com/pocketjoso/penthouse

    Antworten Teilen
  4. von Jens Richter am 24.06.2014 (15:27 Uhr)

    Sehr schön. Was passiert, wenn JavaScript deaktiviert ist?

    Antworten Teilen
    • von florence.maurice am 23.12.2014 (11:03 Uhr)

      Damit die Anzeige auch bei deaktiviertem JavaScript funktioniert, kann man das Stylesheet zusätzlich innerhalb von noscript einbinden.

      Antworten Teilen
  5. von JenZzzz am 24.06.2014 (17:57 Uhr)

    @Jens Richter: habe ich mich auch gefragt, gibts hierfür auch eine Fallback-Lösung? Dann wäre ich auch sofort dabei ...

    Antworten Teilen
  6. von Philipp Blum am 24.06.2014 (23:57 Uhr)

    Jen, die Antwort ist recht einfach: Dann hat die Person Pech gehabt. Es gibt einfach kaum eine Seite im Web, die ordentlich ohne Javascript funktioniert. Nur ca 0.1% - 2% der Nutzter haben Javascript deaktiviert. In den meisten Fällen gehören diese Leute nicht einmal zu deiner Zielgruppe. Also diese Leute kann man getrost übergehen.

    Antworten Teilen
  7. von fzgg am 25.06.2014 (12:15 Uhr)

    Genau unobstrusive und barrierefrei ist totaler Quatsch.

    Antworten Teilen
  8. von JenZzzz am 25.06.2014 (14:27 Uhr)

    @ Philipp: ich erstelle jede Seite so, dass diese auch ohne Javascript funktioniert, bzw. man zumindest die Inhalte vernünftig lesen kann. Wenn dieses Bildergewackel (ala jquery und Co.) nicht funktioniert, ist mir das egal, aber wenn die Seite völlig unformatiert angezeigt wird, weil das CSS fehlt, finde ich das nicht so schick. Und deswegen kann mich google an der Stelle auch mal am *** lecken ;)

    Antworten Teilen
  9. von MPiontek am 14.08.2015 (12:34 Uhr)

    Toll, und dann habe ich im Head das nächste Script, dass mein Rendering blockiert. Was ist das denn für eine Logik? Warum muss man es im Head laden, da verstehe ich nicht.

    Antworten Teilen
  10. von MPiontek am 14.08.2015 (12:49 Uhr)

    Inline -.- das ist aber nicht so schön. Naja, ich habe es jetzt ans Ende, kurz vor den Body gesetzt und auf async gesetzt. Ich verstehe zwar nicht warum, aber es funktioniert.

    Antworten Teilen
    • von Florian Brinkmann am 14.08.2015 (13:03 Uhr)

      Bei Performance-Optimierung geht es manchmal nicht darum, ob eine Lösung „schön“ ist :) Bei dem Critical CSS muss der kritische Teil ja auch inline eingefügt werden. Auch vielleicht nicht die schönste Methode aber schnell.

      Antworten Teilen
      • von MPiontek am 14.08.2015 (14:15 Uhr)

        Joar, ich gebe gerne schön Lösungen weiter. Wie gesagt, es ließ sich an der Stelle ja beheben. Das inline CSS werde ich zwar nicht los, aber ich muss es ja nicht auf die Spitze treiben :D

        Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder

Im besten Fall sorgen CSS für kompaktes und gekapseltes Styling für Webseiten. Im Schlimmsten Fall wird CSS zur Hölle in Sachen Übersichtlichkeit und Redundanz. CSS Purge zeigt, welche Seiten die … » weiterlesen

WAIT! Animate: Schneller zu anschaulichen CSS-Animationen
WAIT! Animate: Schneller zu anschaulichen CSS-Animationen

Wait! Animate ist ein einfaches Tool um Animationen zu erstellen und zu konfigurieren, für das du kein JavaScript Know-How benötigst. » weiterlesen

5 praktische CSS-Libs: Wenn JavaScript pause machen darf
5 praktische CSS-Libs: Wenn JavaScript pause machen darf

CSS ist ein sehr mächtiges Werkzeug geworden und verdrängt in vielen Bereichen JavaScript immer weiter. Wofür wir früher jQuery benutzen mussten, kann heute schon mit reinem CSS gelöst … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?