Moin,
ich bin gerade dabei unseren PageSpeed der Startseite zu optimieren. Dabei habe ich schon ein paar Sachen erledigt:
- Bilder im WebP-Format mit JPG-Fallback (vielen Dank für deine Widgets Mario !)
- Bilder in zwei Auflösungen für Desktop und Mobil bereitgestellt
- Bilder mit lazy-loading bzw. fetchprio high für LCP
- Cache-Zeiten angepasst via htaccess
- @font-face font-display: swap
- HTTP/2 kommt die Tage auf den Webserver
Hier sind die Berichte von Pagespeed Insights und DebugBear.
Folgende Dinge würde ich gerne noch beheben:
1.) Cumulative Layout Shift
Bei DebugBear sieht man, dass der Inhaltsbereich (damit meine ich alles unter dem Header) beim Laden um 9px nach unten sackt. Das wird der Hauptgrund für den verhältnismäßig hohen CLS sein. Dies zu beheben würde die Pagespeed-Punktzahl von Google glaube ich deutlich verbessern. Ich habe schon so allerlei ausprobiert: padding-bottom, margin-bottom, Container-/Reihen-Abstand unten erhöht, Header-Bild-Height 9px größer angegeben... nichts hat geholfen.
Habt ihr eine Idee wodurch dieser Shift hervorgerufen wird?
2.) nicht sichtbare Bilder aufschieben
Google beschwert sich, dass ein Bild nicht nicht mit lazy-loading versehen ist. Das Ding ist, es handelt sich um den Header, spirch LCP-Content. Wenn ich da auf lazy gehe, meckert Google, dass lazy-content im LCP ist... Ich vermute es hängt mit dem Header-Widget von Mario zusammen, bei dem man eine Dektop-Bild-Variante (...-slim.webp/jpg) und eine mobile Variante (...-mobile.webp/jpg) angibt. Anscheinend läd Google beim Testen der Mobilen Seite auch das Desktop Bild. DebugBear macht das nicht.
Wie wird es in der Realität sein? Vermutlich kann ich das einfach ignorieren oder?
Außerdem wären die folgenden Punkte noch nice-to-have aber wohl nicht so wichtig:
3.) Bilder in modernen Formaten bereitstellen
Benutze das Silder-Widget auf der Startseite. Du hast nicht zufällig Lust, Mario , ein Silder-Widget zu basteln, mit WebP-JPG-Dektop-Mobil-Bilder-Funktion? 
4.) Darauf achten, dass der Text während der Webfront-Ladevorgänge sichtbar bleibt
Kp, warum hier gemeckert wird. Habe die Schriften auf dem Server liegen und arbeite mit @font-face (inkl. font-display: swap;) im CSS. Habt ihr eine Idee?
5.) Für das Youtube-Video kann lazy-loading ausgeführt werden
Kann ich wohl getrost ignorieren, weil der Delay mit 0ms angegeben wird? Benutze das Multimedia-Widget Youtube. Wie könnte ich lazy-loading dafür einbinden?
6.) Verwendet keine passiven Listener zur Verbesserung der Scrollleistung
Klingt für mich erstmal ziemlich aufwendig, das zu ändern. Was meint ihr?
Ich freue mich über jede Anregung!
Viele Grüße
Pierre
