Google Pagespeed Meldung

[superolli]

Kann mir das mal bitte jemand in eine verständliche Sprache übersetzen oder Links zum Nachlesen zukommen lassen?

JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen
Ihre Seite enthält 7 blockierende Skript-Ressourcen und 6 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.

[elmex]

Google Pagespeed möchte, dass du deine CSS inline lädst und Javascripte asynchron lädst. Wirklich sinnvoll ist das leider aber nur manchmal. Daher einer der Pagespeed Faktoren, den man ruhig auch mal außer acht lassen kann!

[Can]

Google Pagespeed möchte, dass du deine CSS inline lädst und Javascripte asynchron lädst. Wirklich sinnvoll ist das leider aber nur manchmal. Daher einer der Pagespeed Faktoren, den man ruhig auch mal außer acht lassen kann!

Sinn macht es in der Regel immer ausser bei Webseiten deren Inhalt wirklich komplett mit JavaScript generiert werden.

Du verwendest vermutlich Wordpress auf einem regulären Webspace ohne NodeJS. Dann solltest du Scripte mit "defer" Parameter einbinden (zb mittels https://wordpress.org/plugins/wp-deferred-javascripts/ ) und ein kleines Inline Stylesheet erstellen in dem der Grundaufbau deiner Seite (Aufbau, Navi..) definiert wird.

Restliche Styles würde ich konkatiniert in einer Datei einbinden und einen falschen media type angeben.

Code: Alles auswählen

<link rel="stylesheet" type="text/css" href="main.css" media="lazy" id="css"

mittels folgendem vanilla JS im vorm Body deiner Seite tauschst du den media Tag dann aus:

Code: Alles auswählen

 document.getElementById('css').media = 'screen';

So erreicht man sehr einfach die 100 Punkte..

[Melegrian]

Der erste Schritt sollte eine Überprüfung sein, ob denn alle Plugins wirklich benötigt werden, möglicherweise sind es einfach nur zu viele. Im zweiten Schritt sollte Du Dir den Quelltext Deiner Seite ansehen, wenn da mehrere im Head oder Footer geladen werden, lassen die sich auch zusammenfassen.

Also zum Beispiel braucht es nur eine CSS zu geben, selten zwei, wobei dann in der zweiten nur die Styles gehören, die nicht in allen Seiten benötigt werden. Zusammenführung einfach mit Copy und Paste, nur den/die Hook/s müsstest Du dann suchen und auskommentieren. Bei JS ähnlich, nur nicht ganz so einfach zuweilen.

Die Fonts hatte ich noch vergessen, gut, die sollen sein. Doch bei der kleinen Sonne ist zum Beispiel eine CSS dabei, die nur zwei leere CSS Klassen ohne Eigenschaften enthält. Raus damit.

[superolli]

OK, danke für die Antworten. Ich will ja gar nicht unbeding auf 100% kommen, mit den 90+x% bin ich ja als Laie sehr zufrieden. Aber ich würde halt gerne verstehen, was die von mir wollen

Das ist mir letztlich zu vertrackt, ich lasse das so wie es ist, aber ich habe es verstanden! Danke dafür.

[superolli]

"Die Fonts hatte ich noch vergessen, gut, die sollen sein. Doch bei der kleinen Sonne ist zum Beispiel eine CSS dabei, die nur zwei leere CSS Klassen ohne Eigenschaften enthält. Raus damit." --> könntest Du mir das in zwei Sätzen näher erklären bitte?

Der erste Schritt sollte eine Überprüfung sein, ob denn alle Plugins wirklich benötigt werden, möglicherweise sind es einfach nur zu viele. Im zweiten Schritt sollte Du Dir den Quelltext Deiner Seite ansehen, wenn da mehrere im Head oder Footer geladen werden, lassen die sich auch zusammenfassen.

Also zum Beispiel braucht es nur eine CSS zu geben, selten zwei, wobei dann in der zweiten nur die Styles gehören, die nicht in allen Seiten benötigt werden. Zusammenführung einfach mit Copy und Paste, nur den/die Hook/s müsstest Du dann suchen und auskommentieren. Bei JS ähnlich, nur nicht ganz so einfach zuweilen.

Die Fonts hatte ich noch vergessen, gut, die sollen sein. Doch bei der kleinen Sonne ist zum Beispiel eine CSS dabei, die nur zwei leere CSS Klassen ohne Eigenschaften enthält. Raus damit.

[elmex]

Sinn macht es in der Regel immer ausser...

Was für eine überzeugende Logik

[Melegrian]

könntest Du mir das in zwei Sätzen näher erklären bitte?

Weil ich keinen Sinn erkennen kann, warum Du in den Blog von der kleinen Sonne eine CSS einbindest, die dann nur zwei leere Klassen ohne Eigenschaften enthält.

Code: Alles auswählen

.sticky {}
.bypostauthor {}

Im Normalfall würde ich doch erwarten:

Code: Alles auswählen

.bezeichner {Eigenschaft1:Wert1; Eigenschaft2:Wert2}

Selbst wenn es sich um CSS-Dateien mit erforderlichen Styles handeln sollte, so lassen diese sich doch in eine bereits vorhandene CSS-Datei mit einfügen, so dass nur eine CSS Datei eingebunden werden muss. Lediglich die Fonts in einer zweiten, sollte doch genügen. Und nicht wenn Du 20 Plugins installierst, dass dann alle 20 eine eigene CSS Datei in den Head mit einfügen, statt die in einer einzigen Datei mit hineinzukopieren. Bei JS ähnlich, wobei da mehr die Reihenfolge zu beachten ist, auch ob Head oder Footer.

[smilla]

Ich arbeite ja gerne mit Bootstrap und hier brauche ich ja JQuery und Bootstrap jeweils als JS. Wenn ich beides z.B. asynchron lade gehen manchmal einige Elemente nicht, weil das eine scheinbar zuerst geladen ist. Wenn ich die JS Dateien in den Footer packe, was ja auch viele machen, kommt es auch manchmal vor, dass Seitenelemente nicht gehen. Kennt sich hier jemand aus?

Oder sollte man einfach alles JS in eine einzige Datei, daraus eine min Version machen und diese asynchron laden?

[Melegrian]

Wenn ich beides z.B. asynchron lade gehen manchmal einige Elemente nicht, weil das eine scheinbar zuerst geladen ist.

Na die Reihenfolge muss halt schon beachtete werden. Was auf jQuery aufsetzt, kann ja erst nach jQuery geladen werden. Was nach Elementen oder IDs innerhalb vom DOM sucht, kann erst geladen werden, nach dem das Dokument im Browser aufgebaut ist.

Ohne jQuery kann onload verwendet werden, mit jQuery stehen weitere Möglichkeiten zur Verfügung. In der ersten Hälfte sind wesentliche Antworten enthalten:

https://www.mediaevent.de/javascript/li ... vents.html