Page Speed insights Kumulative Layoutverschiebung (Cumulative layout shift) CSS Framework Boostrap & co

Oh ja, was für ein Thema. Hatten wir doch schon mal, aber egal. Ohne URL und das selber sehen ist das schwierig. Die Kumulative Layoutverschiebung kann von sehr sehr vielen Dingen ausgelöst werden, darunter auch welche, die man extra nutzt, damit die Seite an sich schneller wird, z.B. LazyLoad bei Bildern. Das ist aktuell ein wenig das Problem bei Google und dem Tool. Man setzt Techniken ein, die einen Wert besser machen, dafür machen genau diese Techniken einen anderen schlechter.

0,015 ist ja schon mal ein guter Wert. Ich komme in der Regel nicht unter 0,2.

Mit den Bildchen vom Tool kannste auch nicht viel anfangen. Ich empfehle Chrome in dem Fall. Dev-Console auf, Reiter Performance. Wichtig: Dort Screenshots einschalten, dann Aufnahme starten und Seite neu laden. Aufnahme wieder stoppen. Da bekommste dann viel viel mehr Screenshots und kannst erkennen, was sich hier nun genau verschiebt.

So Aussagen wie das col-12-Div sind meist einfach nur Unfug. Bei mir meckert Google als Position das "<div id="content">" an. Klar. Das ist der Main-Container. In meinem Fall ist es Lazyload, der dann ein passendes Bild liefert, das aber andere Seitenverhältnisse hat als der Platzhalter. Daher verschiebt es den floatenden Text darum und reicht auch noch, dass die nächste Überschrift etwas "zuckt".

Verantwortlich kann dafür sehr vieles sein. Lazyload, externe Fonts. Scripte, die was nachträglich einbauen, Werbung, CSS, das per Defer kommt etc.

Ja, die Felddaten sind über einen längeren Zeitraum, daher gibt es auch nicht bei jeder Webseite welche. Es muss schon eine gewisse Anzahl an Zugriffen da sein. Der Zeitraum ist 28 Tage und wird von Usern mit Chrome-Browsern erfasst. Daher sind da auch Unterschiede zu den selbst gemessenen Lab-Daten, denn andere User haben andere Computer. Und ja, die Daten passen sich nicht unmittelbar an, quasi nur täglich, wenn der erste Tag raus fällt und ein neuer dazu kommt. Sollte sich aber da nicht grundlegend was an der Webseite geändert haben, also bei den neu hinzukommenden Tag, dann bleiben die Daten in der Regel fast gleich, ist eben ein Durchschnitt.

Was ich selbst noch nicht so ganz verstanden habe ist, was der Unterschied zwischen Felddaten und Origin Summary ist. Letzteres, wenn ich mich nicht irre, sind echte Daten, auch aus den letzten 28 Tagen, aber zu wenige, um Felddaten zu erzeugen. Die Felddaten scheinen also aus den "Origin Summary" zu kommen.

Habe mich nun mal wieder etwas mit meinen Seiten beschäftigt und kann daher sagen, anhand der Screenshots, dass Lighthouse wohl auch ein Problem mit CSS display:flex hat und das nutzt Bootstrap sehr wahrscheinlich.

Ich habe hier z.B. per Desktop einen Wert von 0,2, wo ich absolut keine Verschiebung sehen kann. Per Mobile ist es 0,015, aber da sehe ich eine. Komisch irgendwie.

Man muss auch beachten, dass das "Page Speed insights" mit Lighthouse 6.1 arbeitet, während die Felddaten mit 5.7 ermittelt werden.

Ok, hat sich überschnitten....

Ja stimmt, mit einem Container drum rum geht das auch. Ich habe das so gelöst, ging ebenfalls: Natives Lazy Loading mit 1x1 Platzhalter und Kumulative Layoutverschiebung (CLS)

Entscheiden ist dabei, das Native LazyLoading. Das normale per Script ging immer

Du hast Infos / erfahrungen? Dann teile sie doch einfach mit. Das hier ist ein Hilfe-Forum. Jeder freut sich, wenn er Infos bekommt ohne erst gezielt nach was fragen zu müssen, wo er vielleicht gar nicht weiß, was er fragen soll. Danke!

Das steht in den Berichten. Wenn Du das Tool von Google nutzt, dann steht unten 6.1. Wenn Du Chrome nutzt und dort Lighthouse startest, dann steht da 5.7. Genau genommen ist es 5.7.1 im aktuellen Chrome.

Google Insights

Chrome

Danke für die Info Also leere Divs und <p> hatte ich noch nicht auf dem Schirm. Aber ja, letztendlich kann es alles sein. Aber wie gesagt, ohne die Seite zu kennen, Schneekugel.

Wie erstellst Du denn das "critical CSS"? Passt nun nur nicht hin, aber ja, das ist auch ein Faktor. Hast Du ein Tool dafür, das das gut kann? Ich selbst nutze da https://jonassebastianohlsson.com/criticalpathcssgenerator/

Ja, das mit dem "unused" ist auch so ein Thema, das ich oben meinte. Google widerspricht sich da. Ich für meinen Fall habe alles in einem File, CSS und alle JS, 1 Jahr Cache-Freigabe. Natürlich ist da vieles drinnen, das man dann auf der expliziten Seite nicht braucht, aber eben auf anderen. Also was tun? Wieder splitten? Dann ist "unused" weg, aber die Requests steigen und die Zugriffszeit, da eben kein Cache mehr.

Zitat von trebax

Allerdings erweitere ich das Critical CSS dann manuell immer weiter, bis alles passt.

Ok, das mache ich auch, denn die Analyse ist in der Regel die Startseite, aber Kategorien oder Detailseiten haben andere Anforderungen.

Ok, wie gesagt, ohne die Seite zu kennen, schwierig, denn keiner weiß was in dem col-12-Div drinnen ist oder darüber.

Ich schreibe aber dennoch noch mal, weil ich oben was von display;flex sagte, das Probleme macht. Das kann ich nun konkretisieren. Nicht display:flex an sich ist es, sondern die CSS-Eigenschaft "Order" bzw. "flex-order".

Ich hatte das ja auch so, dass Main-Content im Quelltext ganz oben war und Navigation ganz unten. Dennoch sollte die links sein und nicht rechts. Also per Order dem Maincontent 2 und der Navi 1 gegeben. Funktioniert, keine Frage, aber dabei kommt ein Layout Shift von 0,247 raus, auch wenn die CSS-Angaben inline sind.

Das ganze wieder gedreht, also Navi im Quelltext hoch, Maincontent runter und die Order-Anweisung entfernt und siehe da. Mobil und Desktop "Cumulative Layout Shift 0,000"