Allgemein

JavaScript- und CSS-Ressourcen in Inhalten “above the fold” beseitigen

Im letzten Beitrag unserer Pagespeed-Optimierungsserie geht es darum JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) zu beseitigen.

Das heisst alle CSS- und Javascript-Ressourcen, die eine Verzögerung beim Laden der Webseite verursachen, müssen entweder verschoben , asynchron geladen oder aber inline im HTML eingefügt werden.

Vor der Darstellung einer Webseite für den Internetuser muss der Browser die Seite zunächst analysieren. Wenn bei dieser Analyse externe Javascripte und CSS-Dateien geladen werden müssen, verzögert das die Bereitstellung der Webseite, denn der Browser muss jedesmal (wenn er auf ein blockierendes Script stößt) “anhalten” und die Scripte zunächst herunterladen statt die Seite so schnell wie möglich für den Betrachter zur Verfügung zu stellen.

Screenshot Optimierungsmassnahmen "Ressourcen entfernen, die das Rendering blockieren" - developers.google.comScreenshot Optimierungsmassnahmen “Ressourcen entfernen, die das Rendering blockieren” – developers.google.com

Für unsere Testseite werden 2 blockierende Scripte aufgeführt, zum einen wird vorgeschlagen die asynchrone Version eines Javascripts zu verwenden, ausserdem die Optimierung eines CSS-Elements empfohlen.

JavaScript-Code später bzw. asynchron nachladen

Durch die Verwendung von asynchronen Versionen eines Scripts wird die Darstellung der Webseite nicht mehr blockiert, denn das Script muss nicht erst komplett heruntergeladen werden wenn der Browser beim Analysieren der Webseite darauf stößt, sondern wird im Hintergrund nachgeladen. Hierbei handelt es sich vor Allem um Scripte von Drittanbietern wie Google-Adsense, -Analytics, Facebook, Twitter, AddThis etc. Viele der Scripte werden heutzutage schon standardmäßig asynchron bereitgestellt, sollte das nicht der Fall sein, einfach mal direkt beim Anbieter des Scripts nachfragen. Eine asynchrone Version des Scripts unterscheidet sich zur herkömmlich synchronen Variante hauptsächlich durch das HTML-Attribut “async” im Code:

<script async src="javascript.js">

Auf unserer Testseite wurde ein Script von Google Adsense synchron geladen, diese habe ich einfach mit der im Mitgliederbereich bereitgestellten asynchronen Version ausgetauscht. Den asynchronen Scriptcode findet Ihr folgendermassen in Eurem Adsense-Account:

Screenshot Adsense Code Asynchron abrufen - adsense.google.deScreenshot Adsense Code Asynchron abrufen – adsense.google.de

CSS-Bereitstellung optimieren

Das 2. blockierende Script bezieht sich auf die im vorletzten Beitrag zusammengefassten CSS-Ressourcen der Webseite. Hier haben wir die Möglichkeit im bereits vorgestellten Plugin “Autoptimize” die CSS-Ressourcen inline im HTML laden zu lassen, um das Blockieren zu vermeiden.

Inline CSS Einstellungen - Plugin AutoptimizeInline CSS Einstellungen – Plugin Autoptimize

Hierzu in den Plugin Einstellungen oben “Show advanced settings” (1) anklicken und unter den CSS Einstellungen den Hacken bei “Inline All CSS?” (2) setzen. Damit wird der komplette CSS-Code inline im HTML geladen. Die Darstellung der Webseite wird somit nicht mehr blockiert, hat allerdings den Nachteil, dass der HTML-Code logischerweise größer wird. Wer lediglich ausgewählten CSS-Code inline laden lassen möchte kann hier auch die Option “Inline and Defer CSS?” anklicken und den gewünschten CSS-Code dort eintragen.

Alle Artikel der Serie

2 Comments

  • JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold”
    Ich denke dieses Problem haben sehr viele WordPress Nutzer.
    Das Plugin “Autoptimize” habe ich auch schon ausprobiert, nach dem ich jedoch den Haken bei optimice CSS Code gestzt habe, hatte sich die Seite vollständig verabschiedet. Gut das es Backups gibt sonst wären 1000de von Stunden den Bach hinunter gegangen.
    Bei PageSpeed Insights von Google stehe ich momentan bei 75 Desktop-Punkte und bei 76 Mobilfunk-Punkte. Meine Seite findet Ihr unter schreinerartikel.de Es geht eigentlich noch, bin im gelben Bereich, wer mir jedoch einen Tipp geben kann wie ich in den grünen Bereich kommen kann, der soll bitte auf diesem Blog einen Kommentar hinterlassen. Übrigens ich selber hasse langsame Websites,
    daher versuche ich immer den maximalen Speed herauszuholen, was einem oft in den Wahnsinn treiben kann.

  • ich habe mir deine Seite mal “auf die Schnelle” angesehen und habe festgestellt, dass du einige Bilder nicht richtig komprimiert hast.

    Google selbst stellt dir die komprimierten Bilder ganz bequem als Download zur Verfügung. Du kannst diese ganz einfach bei PageSpeed Insights selbst herunterladen.

Leave a Comment