Google PageSpeed Insights Sammelthread

Hallo zusammen,

wollte mal den Thread hier aufmachen, denn das Tools ist an sich schon sehr leistungsfähig, aber vieles ist halt auch so beschrieben, dass man gar nicht weiß, was das Tool überhaupt von einem will.

Mal zwei Beispiele:

Seit einer Woche bekomme ich auf einer Domain immer wieder diese Warnung:

[ATTACH=JSON]{"data-align":"none","data-size":"full","title":"preload-1.jpg","data-attachmentid":120937}[/ATTACH]

Ich für meinen Fall nutze Preload, aber für meine eigenen CSS und JS, nicht für Google-Adsense. Das kommt von Google selbst. Nur wie soll ich das beheben. Es scheint so, dass auch viele andere seit einer Woche diese Meldung bekommen.

Dann bemängelt das Tool z.B. ständig folgendes:

"Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt"

Da kann ich aber machen was ich will und für "font-display" alle möglichen Werte vergeben, die Meldung bleibt.

Genauso die Punkte "Aufwand für Hauptthread minimieren" und "Tiefe kritischer Anforderungen minimieren" sind mir unverständlich.

Bei letzterem wird unter anderem das Favicon-Manifest und das CSS-File bemängelt.

Also wegen der Kette. Die schaut hier so aus, hoffe das kommt rüber:

Anfangsnavigation
|---- html
|...|--------- css 80 ms, 4,17 KB
|---- webmanifest 70 ms, 1,04 KB

Wüsste nicht, was ich da ändern sollte.

Adsense ist da ganz komisch. Das Main-Script von Adsense ist "async", aber dieses Async-Script lädt per Preload das andere Script nach und noch gefühlt 100 weitere. Das aber nur per Mobile, per Desktop kommt die Meldung nicht. Also an das Script wo da bemängelt wird komme ich gar nicht ran, dessen Namen ändert sich auch alle paar Wochen.

H2 läuft auf dem Server. Ich habe das extra extern und alles in einem, weil ich mir eigentlich sage, das muss nur einmal geladen werden. Hat ein Expires von einem Jahr. Inline muss das ja immer mitgeladen werden und klein ist das nicht unbedingt.

Ja Alex, in dem Fall ja. Nur noch ein Server hat das nicht, der braucht aber noch ein wenig. Alle andere nutzen es.

Ja, wollte ich gerade was zu schreiben. F-N ist da noch altmodischer. Ich teste an verschiedenen Seiten mit Preload etc.

Z.B. bemängelt Google bei einer:

"css/lightbox-20170825-min.css", dass ich das per Preload laden soll. Das File brauche ich aber nicht überall und es wird async geladen, das noch noch nicht mal direkt. Ich mache meinen Preload auch nicht per <link>, sondern direkt auf dem Server per Header, weil das noch mal schneller ist.

die "lightbox.js" wird async geladen (nicht bemängelt) und das JS lädt das zugehörige CSS per async nach. Das wird aber nun bemängelt.

Cookie, das ist immer so eine Sache, gerade bei DSGVO. Ich nutzte so wenige wie es geht. Aber ja, hast recht, man könnte das per Cookie regeln. Die aktuelle Datei dort speichern und vergleichen, ob das die aktuelle Version ist (kann sich ja früher was dran ändern, dann anderer Dateiname). Nur, jetzt nee doofe Frage. Was ist, wenn der Preload nicht funktionierte? Das können ja nicht alle Browser und eine Rückmeldung gibt es nicht dazu.

Moment, wie passt das dann zusammen? Preload von CSS und gleichzeitig CSS inline im Head? Der Preload wird doch immer gesendet und macht dann doch gar keinen Sinn, wenn das auch im Head direkt steht. Oder verstehe ich da was nicht? Ich dachte das macht nur Sinn in Kombination mit "Externem CSS", also wenn er den Preload nicht konnte, dann muss er extern laden.

https://beispiel.rocks/www.geranien-pflanzen.de/ nutzt z.B. Preload für CSS. Dort bemängelt Google das CSS nicht, obwohl es dort auch per extern hinterlegt ist. DIe Woff2 habe ich nicht vorladen lassen, weil ich vorher nicht weiß, was benötigt wird.

Oder meinst Du mit "Ich würde erstmal mit CSS für above the fold in eine head style node anfangen" das CSS aufdröseln in "sofort wichtig" und "reicht auch noch später"? Dazu habe ich schon viel gelesen und irgendwie nie hinbekommen, das aufzutrennen

Aber wegen dem Font bei der Geranien. Da kommt ja auch das "font-display" dazu. Ich dachte das ist genau dafür gedacht, dass es eben nicht kritisch ist und später geladen wird. So steht es zumindest bei Google. Dennoch wird es als "kritischer Pfad" angesehen.

So, mit nem Push der Font mal versucht, mit

$pushString .= ",</fonts/open_sans/regular.woff2>; rel=preload; as=font/woff2";
$pushString .= ",</fonts/open_sans/regular.woff2>; rel=preload; as=woff2";
$pushString .= ",</fonts/open_sans/regular.woff2>; rel=preload; as=font";

weil keine Ahnung was davon geht. Fakt ist, der Push erfolgt, aber dennoch wird das Font nochmals manuell runtergeladen.

Sicher? Genau da stand ich schon mal. Mit "font/woff2" zeigt mir der Chrome einen Push an, Firefox aber nicht. Einer der beiden anderen bewegt dann FF dazu, dass er mir den auch anzeigt. Aber selbst wenn ich nur "font/woff2" nehme und Chrome mir den Push anzeigt, dann lädt er es 10 Request später dennoch ganz normal vom Server.

Mom, jetzt geht es plötzlich. "Insights" meldet aber dennoch "kritischen Pfad"

Was meinst Du mit welcher Seite?