CSS Asynchron per Javascript laden

26. Feb. 2017

In meinem Theme CleanIT verwende ich Javascript um die Ladezeit von CSS zu optimieren, wie dies funktioniert erkläre ich hier.

Was tut das Script?

Das Script soll beim erstmaligen Aufruf der Seite die CSS-Datei herunterladen und im LocalStorage des Nutzers speichern. Bei jedem weiteren Aufruf soll die CSS-Datei dann nicht mehr vom Server, sondern aus dem LocalStorage geladen werden und inline in die Website eingebunden werden. Sollte dabei irgendetwas schief gehen, oder der Browser des Nutzers LocalStorage nicht unterstützen soll die CSS-Datei ganz normal per <link href="design.css" rel="stylesheet"> eingebunden werden.

Vorteile

1. Ein Vorteil dieser Methode ist, dass das Caching auf diese Weise definitiv funktioniert und durch einen Versionscheck im Javascript, ob die CSS-Datei noch aktuell ist, können eure Nutzer direkt euer neues Webdesign erhalten, ohne das ihr warten müsst, dass der Cache abgelaufen ist.
2. Zudem erzeugt diese Methode, solange die CSS-Datei noch aktuell ist 0 traffic und sorgt somit für optimale Ladezeiten. (Abgesehen von dem zusätzlichen Javascript natürlich)

Nachteile

Wirkliche Nachteile habe ich bisher nicht entdecken können.

1. Einzig Analyseseiten wie Pagespeed, Pingdom Tools, GTMetrix usw. erkennen diese Methode leider nicht, sodass stets das Fallback greift.
2. Eigentlich wurde für solche Art Caching ServiceWorker entwickelt. Diese ermöglichen im Grunde die gleiche Funktion wie dieses Skript, sind jedoch etwas aufwändiger zu integrieren und auf meiner Seite entstanden beispielsweise mit ServiceWorkern Konflikte mit dem Benachrichtigungsdienst. Diese Probleme gibt es mit diesem Script hier jedoch nicht. Ob es nun ein Nachteil ist, dass ich diesen Standard nicht nutze, muss jeder selbst entscheiden.

Das Script mit Erklärungen

<script type="text/javascript"> 
var cv = 02;
var cu = "/wp/wp-content/themes/CleanIT/style.css"+"?v="+cv;
/*========== AJAX-REQUEST ==========*/
function EXT(u,c){var n=new XMLHttpRequest;n.open("GET",u,!0),n.onreadystatechange=function(){4==n.readyState&&"200"==n.status?c(n.responseText):4==n.readyState&&c(!1)},n.send(null)}
function fCSS(){
   if (typeof(Storage) !== "undefined") {
      if(localStorage.getItem("CSSVersion")==cv&&(localStorage.getItem("MainCSS")!=null)){
         // console.log("CSS STYLE FROM CACHE");
         document.querySelector('head').innerHTML += "<style>"+localStorage.getItem("MainCSS")+"</style>"; 
      }else{
         EXT(cu,function(r){
            if(r!=false){
               // console.log("NEW CSS STYLE");
               localStorage.setItem("MainCSS",r);
               document.querySelector('head').innerHTML += "<style>"+r+"</style>"; 
               localStorage.setItem("CSSVersion",cv);
            }else{ct();}
         })
      }
   }else {ct();}
}
function ct(){
   console.log("CSS LINK");
   var ss = document.createElement("link");
   ss.type = "text/css";
   ss.rel = "stylesheet";
   ss.href = cu;
   document.getElementsByTagName("head")[0].appendChild(ss);
}
fCSS();
 </script><noscript><link href="/wp/wp-content/themes/CleanIT/style.css" rel="stylesheet"></noscript>

• In den Variablen cv (CSS-Version) und cu (CSS-URL) speichert ihr die aktuellen Daten eurere CSS-Datei. Durch erhöhen der cv mit einer neuen CSS-Datei erzwingt ihr eine Aktualisierung der Datei bei den Nutzern. Es bietet sich hier an, diese Variable per PHP auf den timestamp der CSS-Datei zu setzen.
• Die Funktion EXT(url, callback function) ist für das Asynchrone laden der CSS-Datei zuständig, falls diese noch nicht im LocalStorage exisitiert oder veraltet ist.
• fCSS() ist der Ort, wo die eigentliche Magie passiert.
  Es wird überprüft, ob der Browser des Nutzers LocalStorage unterstützt und wenn nicht geht es in die Fallbackfunktion ct().
  Ist LocalStorage vorhanden, wird überprüft, ob bereits eine Version der CSS-Datei gespeichert ist und ob diese noch aktuell ist. Dazu wird der Wert, der in der Variable cv steht, mit der unter CSSVersion gespeicherten LocalStorage Eintrag verglichen. Wenn ihr eine neue CSS-Version habt, müsst ihr also lediglich den Wert der Variable cv im HTML-Code ändern und schon bekommen alle Nutzer die neuste Version geladen. 
  Ist der Speicher vorhanden und aktuell wird dieser ausgelesen und in einem style-Tag verpackt in den head eurer Seite geschrieben. Wenn nicht, dann wird mit der Funktion EXT() der Speicher aktualisiert.
• Die Fallbackfunktion ct() macht im Grunde nichts anderes, als den Link zur CSS-Datei per Link eurer Seite hinzuzufügen, damit auch wenn etwas schief geht der Nutzer eine wundervolle Seite sehen kann. Gleiches gilt für die noscript Zeile am Ende.

Potential

Dieses Script könnt ihr natürlich beliebig erweitern und auf eurer eigenen Website verwenden. Solltet ihr mehrere CSS-Dateien verwenden könntet ihr beispielsweise das Script so erweitern, dass sämtliche Dateien gecached werden usw…. Lasst euren Ideen freien Lauf und macht das Web schneller und schneller!

Demo