• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Stylesheet asynchron laden

microjobsONde

Neues Mitglied
Hallo,

ich bin Anfänger und würde gerne erfahren wie man eine CSS Datei asynchron laden kann. Ich denke es gibt einen Befehl bzw. JS um dies umzusetzen.

Über einen Tipp würde ich mich freuen.
 
Werbung:
Hehe das ist richtig... ich habe auch gefühlte zwei Wochen mich mit den einzelnen Ergebnissen auseinandergesetzt aber am Ende hat nix richtig geklappt. Ich habe auch Codeschnippsel gefunden jedoch mache ich trotzdem etwas falsch, aber was genau weiß ich nicht...
 
Werbung:
Unter anderem habe ich versucht diesen Code als JS im Head einzubinden:

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";
}


Damit hat es leider nicht geklappt.

Warum? Keine Ahnung :-(
 
Es wäre interessant zu sehen wo du das eingebaut hast. Dann könnte man dir auch sagen was falsch läuft.
 
Werbung:
Habe das alles ja wieder raus genommen.... der JS war im Head oben eingebunden... ich vermute das ich die noch zu ändernden Parameter bzw. URL nicht richtig ergänzt habe oder verstanden habe. Folgender Stylheet soll asynchron laden: http://microjobs-on.de/onewebstatic/stylesheet.css

Ich bin jetzt wieder ganz bei Null :D Also anscheinend muss ich ja einmal das script auf meinen webserver laden, und einmal im Head aufrufen? Oder? Und was muss am originalen Code geändert werden?

PS: Danke für die Geduld :D
 
Darf man mal Fragen warum du deine CSS unbedingt Asynchron laden möchtest?
Hast du schon deinen kritischen CSS von dem den du (nachladen) willst getrennt?

Du kannst das Script natürlich per Request vom Server anfordern, aber da du Zeit sparen willst ist ein zusätzlicher Request wohl nicht ideal.
 
Werbung:
Weil Google pagespeed es bemängelt und wei bei bestimmten Seiten dies zu einer verzögerten bzw. verspäteten Darstellung führt :-(

Kritsch ist nicht getrennt. Kenn mich aber wie gesagt nicht wirklich gut aus mit dem ganzen.

Wäre ja schön wenn mir jemand den passenden Code fertig für meine Seite zeigen würde :) So das ich diesen einfach im Head einfügen muss.
 
Ja richtig... bei mir sagt google das drei CSS Recourcen das rendern blockieren und das ich diese entweder nach hinten schieben soll oder asynchron laden soll. googlepagespeed.GIF
 
Werbung:
Wo führst Du den Scan durch? Ich mache es gerade in der Google Chrome Erweiterung - und dort steht nichts davon, dass hier etwas blockiert. Da stehen eher andere nützliche Tipps wie z.B. der fehlende Charset oder fehlende Angaben zu Bildmaßen.
 
Mit welchem Browser? Ich hab jetzt schon mehrfach mit Chrome und Firefox die Seite geladen und mir fiel dabei nichts auf.
 
Werbung:
Mit Firefox... habe gerade auch mal mit der erweiterung bei Chrome probiert und du hast recht...aber ändert nichts an der Tatsache das eigentlich das rendern der CSS Recourcen weiterhin blockiert wird. Auch in Webmastertools bei Google (Abruf wie durch Google) wird immer nur der Status "teilweise" erreicht und anschließend nochmal gezeigt das wegen der blockierenden CSS das abrufen und rendern nur teilweise ausgeführt wurde. Kann ich denn nicht einfach den Code von oben nehmen? weiß nur nicht was genau und wo ich etwas noch anpassen muss.
 
Die Einbindung von Fonts über Google ist nicht besonders schnell.

Ich würde versuchen, die Anzahl der HTTP-Requests zu verringern, in dem ich alle Stylesheets zu einer gemeinsamen Datei kompiliere.
 
Danke für eure Antworten.

Ich weiß sind ne Menge Requests.
Es sind jedoch nur zwei Stylesheets und einer davon ist von mir manuell geschrieben und der andere ist automatisch von meinem Provider den ich leider nicht ändern kann und auch nicht zusammenführen kann.
 
Werbung:
Zurück
Oben