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

  • Moin, moin!
    Ich baste gerade an 100/100 PSI und stoße leider ein bisschen an meine Grenzen.;(;(;(

    Der CLS-Fehler in den Lab-Daten sind zwar gut, allerdings im Desktop Viewport immer noch bei 0,015 im Schnitt.
    Als erste Empfehlung wird mir ein col-12 Div mit einem Wert von 0,011 anzeigt. Mir ist schleierhaft wie ich den Wert reduzieren kann. Hat jemand einen Tipp?

    Außerdem bin ich mir bei den Feld-Daten nicht ganz sicher wie sie funktionieren. Ist es richtig, dass die Felddaten auf einen Zeitraum von 30 Tagen basieren und sich daher nicht unmittelbar anpassen? :?::?::?:

  • 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.

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • Bei Lazy-Load habe ich eine Lösung . Setze einen Container mit der Größe des Bildes um das Bild, dann verhinderst du den Shift. Das hat bei mir geklappt um den Wert drastisch zu reduzieren.

    Bzgl. der Felddaten bin ich jetzt beruhigt. :saint::saint::saint:

    Bin übrigens bei 96/95 angekommen. Wenn jemand Tipps benötigt...

  • 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.

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • 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!

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • 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

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • Wirklich viel geholfen hat das aufnehmen der betreffenden Selektoren ins critical css. Außerdem die Nutzung der Browserabstände von h1, h2, h3 sowie p tags. Gerade zu Anfang hatte ich auch Text in einem Div ohne <p>. Mit <p> hat sich der Wert dann auf 0 reduziert. Leere Div-Conainter im Template können ebenfalls zu CLS führen. Für den Mobile Score ist es außerdem ratsam Bilder aus dem ersten Ansichtsbereich zu entfernen und weiter nach unten in den Text zu setzen.

    Wie oben bereits engedeutet, habe ich allerdings noch Probleme mit einzelnen Div Containern, vorzugsweise einem Einleitungstext der mit col-12 ausgestattet ist. Der weißt bei mir den größten Wert auf.

  • Danke für die Info :thumbup: 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/

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • 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/

    Ich auch.

    Allerdings erweitere ich das Critical CSS dann manuell immer weiter, bis alles passt. Wie angedeutet werde ich dann nächste Woche das Critical Css aus dem Non-Critical Css entfernen um den Code weiter zu reduzieren. Bei Drupal gibt es leider kein Plugin, dass das übernimmt.

  • 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.

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • 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.

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"

  • 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"

    Don't judge a book by its cover @ Jadyn Rylee
    "Sogar ein Mann mit reinstem Gemüt, der Gebete sagt jede Nacht, kann zum Wolf werden, wenn die Wolfsblume blüht unter des Mondes goldener Pracht"