JS und CSS asynchron laden?
1 
molily
JS und CSS asynchron laden?
Ich habe meine Seite bei Google prüfen lassen, dort schlägt Google mir folgendes vor
"JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen"
Keine der Seiteninhalte "above the fold" (ohne Scrollen sichtbar) konnten ohne Wartezeiten für das Laden der folgenden Ressourcen gerendert werden. Versuchen Sie, blockierende Ressourcen zu verschieben oder asynchron zu laden, oder laden Sie kritische Bereiche dieser Ressourcen direkt inline im HTML.
Meine Frage dazu nun, wie kann ich JS und CSS asynchron laden lassen? Mein JS Code habe ich im Fußbereich stehen und CSS natürlich ganz oben. Scheinbar ist dieses nicht richtig?
Außerdem bekomme ich noch folgende Meldung
"Durch die Komprimierung der Ressourcen mit "gzip" oder "deflate" kann die Anzahl der über das Netzwerk gesendeten Bytes reduziert werden."
Was ist damit geminet?
Und zu guter letzt bekomme ich noch folgende Info Browser-Caching nutzen
"Das Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen weist den Browser an, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden."
wie kann ich diesen nutzen bzw. wie kann ich diesen aktivieren?
-
Hallo,
"JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen"
Dass Stylesheets das Rendering blockieren, ist durchaus sinnvoll.
Zumindest teilweise. Stylesheets können andere Ressourcen wie Webfonts und Grafiken nachladen. Diese asynchron oder bei Bedarf nachzuladen, ist schon eher sinnvoll.
JavaScripte sollten das Rendering nicht blockieren. Das tun sie auch nicht, wenn sie am Dokumentende eingebunden werden.
Keine der Seiteninhalte "above the fold" (ohne Scrollen sichtbar) konnten ohne Wartezeiten für das Laden der folgenden Ressourcen gerendert werden. Versuchen Sie, blockierende Ressourcen zu verschieben oder asynchron zu laden, oder laden Sie kritische Bereiche dieser Ressourcen direkt inline im HTML.
Welche sind die »folgenden Ressourcen«? Zeig uns am besten Mal die betreffende Seite.
Mein JS Code habe ich im Fußbereich stehen und CSS natürlich ganz oben. Scheinbar ist dieses nicht richtig?
Doch, das ist völlig in Ordnung.
Die Performance und die User Experience werden nicht notwendig besser, wenn du diese asynchron lädst. Dann hast du eher das Problem des sogenannten »flash of unstyled content« (d.h. der User sieht das Dokument kurz ohne CSS-Formatierungen).
Automatisierte Tools können nur generelle Hinweise geben, die du selbst untersuchen musst. In der Art: »Prüfen sie, ob …, und nehmen Sie gegebenenfalls Änderungen vor«. Du musst nicht sklavisch den Anweisungen folgen, das kann sogar ein negativen Effekt auf die Performance haben.
"Durch die Komprimierung der Ressourcen mit "gzip" oder "deflate" kann die Anzahl der über das Netzwerk gesendeten Bytes reduziert werden."
Was ist damit geminet?
Der Webserver kann HTML, CSS, JavaScript und andere textbasierte Formate sehr gut komprimieren, bevor sie zum Browser gesendet werden. Der Browser entpackt sie dann wieder. Damit wird die Ladezeit meist signifikant verbessert. Diese Komprimierung findet auf HTTP-Ebene statt.
Die Komprimierung kannst du in der Webserver-Konfiguration aktivieren. Welchen Webserver verwendest du? Apache oder nginx sind üblich. Für Apache ist das Modul mod_deflate relevant (siehe auch diesen Artikel).
"Das Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen weist den Browser an, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden."
wie kann ich diesen nutzen bzw. wie kann ich diesen aktivieren?
Das kannst du ebenfalls in der Webserver-Konfiguration tun. Bei Apache über mod_expires.
Grüße
Mathias