Java-script entfernen
Autor: Paul S.Liebe Helfer,
Google beanstandet die Ladezeit einer wichtigen Seite wie folgt:
68 / 100Schneller gemacht
Behebung erforderlich:JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen
Ihre Seite enthält 2 blockierende Skript-Ressourcen und 5 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite.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.Entfernen Sie JavaScript, das das Rendering blockiert:
Optimieren Sie die CSS-Darstellung für die folgenden URLs:
- http://geisteswerte.de/style/reset.css?12-0-6-25
- http://geisteswerte.de/style/style.css?12-0-6-25
- http://geisteswerte.de/style/template.css?12-0-6-25
- http://geisteswerte.de/style/menu.css?12-0-6-25
- http://geisteswerte.de/…ben-tod.css?12-0-6-25-635969277350370000
Ich traue mich nur ungern an den Quellcode der Seiten heran. Gibt es eine andere, pflegeleichte Lösung?
Vielen Dank!
Paul Schmitt
Nein, gibt es nicht, denn das sind die Standardskripte und Styles die können nicht besser optimiert werden.
Hat Google wirklich die Dinge beanstandet, oder ist es ein kostenpflichtiges SEO-Programm das diese Meldungen auswirft?
Autor
Ja, Google wirft die Meldungen bei Analytics aus. Wenn ich die Startseite geisteswerte.de auf meinem Smartphone lade, so braucht sie tatsächlich erst einmal länger, als es aufgrund der Dateigröße erwartbar wäre.
Das bedeutet natürlich, dass wohl manche die Geduld verlieren und den Seitenaufbau nicht mehr abwarten.
Das bedeutet aber nicht, dass die Skripte zu groß sind, sondern die GRafiken die z.B. in der template.css eingebunden zu groß sind. WEnn du z.B. viele Grafiken als Hintergrund oder im Header drinnen hast, dann wirkt sich das auf die Ladedauer am Handy aus.
Autor
Hm, ich weiß nicht, ob es daran liegt. Grafiken gibt es nur 2 mit jeweils 15 kB. Google empfiehlt halt das zeitversetzte Laden von Inhalt und Grafiken, was ich sinnvoll fände; denn dann könnten die Leute ja erst einmal mit dem Text anfangen.
Google schreibt hierzu:
<!--StartFragment--> JavaScript-Code entfernen, der das Rendern blockiert
Diese Regel gilt, wenn PageSpeed Insights feststellt, dass Ihr HTML-Code im ohne Scrollen sichtbaren Teil Ihrer Seite auf eine blockierende externe JavaScript-Datei verweist.
Übersicht
Vor dem Rendern einer Seite für den Nutzer muss der Browser die Seite parsen. Wenn er beim Parsen auf ein blockierendes externes Skript stößt, muss er anhalten und diesen JavaScript-Code herunterladen. Dabei wird jedes Mal ein Netzwerk-Roundtrip hinzugefügt, wodurch das erste Rendern der Seite verzögert wird.
Empfehlungen
JavaScript-Code zum Rendern des ohne Scrollen sichtbaren Bereichs sollte inline platziert werden. JavaScript-Code zum Hinzufügen zusätzlicher Funktionen zur Seite sollte erst nach der Bereitstellung des ohne Scrollen sichtbaren Inhalts ausgeführt werden. Wenn dadurch die Ladezeit verkürzt werden soll, müssen Sie auch dieCSS-Bereitstellung optimieren.Kurzen JavaScript-Code inline einfügen
Wenn die externen Skripts kurz sind, können Sie sie direkt in das HTML-Dokument aufnehmen. Wenn kleine Dateien auf diese Weise inline eingefügt werden, kann der Browser mit dem Rendern der Seite fortfahren. Wenn das HTML-Dokument zum Beispiel so aussieht:
<html>
<head>
<scripttype="text/javascript"src="small.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
und die Ressource small.js so:
/* contents of a small JavaScript file */
können Sie das Skript folgendermaßen inline einfügen:
<html>
<head>
<scripttype="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Dadurch wird die externe Anforderung von small.js vermieden, indem die Datei inline im HTML-Dokument platziert wird.
JavaScript-Code später laden
Um zu vermeiden, dass JavaScript-Code das Laden einer Seite blockiert, sollten Sie beim Laden des JavaScript-Codes das HTML-Attribut "async" verwenden. Beispiel:
<script async src="my.js">
Wenn Ihre JavaScript-Ressourcen "[removed]" verwenden, kann das asynchrone Laden problematisch sein. Skripts mit "[removed]" sollten so umgeschrieben werden, dass ein anderes Verfahren verwendet wird.
Wenn Ihre Seite voneinander abhängige Skripts lädt, muss außerdem beim asynchronen Laden des JavaScript-Codes darauf geachtet werden, dass Ihre Anwendung Skripts in der richtigen Abhängigkeitsreihenfolge lädt.
Für mich ist das leider Fachchinesisch. Es klingt aber so, als ließe sich durch geschicktes Mangement die Ladezeit doch verkürzen.
Kaum zu glauben, aber mittlerweile sind 91% der Besucher mit dem Smartphone auf der Seite unterwegs - das viel praktischere Desktop kommt nur noch auf 5%.
<!--EndFragment-->