Wie kann das Laden großer CSS-Dateien für eine optimierte Website-Leistung verzögert werden?

Verbessern Sie die CSS-Bereitstellung durch Verzögern des Ladens großer CSS-Dateien

In der Dokumentation von Google für Entwickler wird empfohlen, die CSS-Bereitstellung zu optimieren, um die Website-Leistung zu verbessern. Eine der empfohlenen Strategien ist das Inlining von kritischem CSS im Kopf, während die ursprüngliche, größere CSS-Datei nach dem Laden der Seite geladen wird.

Laden großer CSS-Dateien nach dem Laden der Seite

Das bereitgestellte Beispiel bewältigt das effektiv Inlining einer kleinen CSS-Datei, lässt jedoch Fragen zum Umgang mit größeren CSS-Dateien offen.

Um das Laden einer großen CSS-Datei bis nach dem Laden der Seite zu verschieben, können Sie Codeausschnitte wie die folgenden verwenden:

<code class="javascript">function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};</code>

Rufen Sie diese Funktion einfach in Ihrer $(document).ready()- oder window.onload-Funktion auf, um ein verzögertes Laden für große CSS-Dateien zu erreichen.

Eine andere Alternative besteht darin, JavaScript in Ihrem Browser zu deaktivieren und zu beobachten das resultierende Verhalten. Auf diese Weise können Sie überprüfen, ob das CSS asynchron geladen wird, was die Gesamtleistung der Website verbessert.

Denken Sie daran, dass eine schnelle Google-Suche oft wertvolle Einblicke in Programmierherausforderungen liefern kann. Beispielsweise liefert die Abfrage „Post Load CSS“ hilfreiche Ergebnisse wie das in der Antwort erwähnte.

Das obige ist der detaillierte Inhalt vonWie kann das Laden großer CSS-Dateien für eine optimierte Website-Leistung verzögert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!