CLS verbessern / Cookie-Manager serverseitig rendern

[Sysix]

Problem
Durch das AddOn bekommen wir einen schlechten CLS Wert auf manchen Webseiten.
Ich kann nicht 100% ausschließen, dass es nicht nur daran liegt aber durch dieses Snippet vermute ich das ziemlich stark.

Lösung
Meine Empfehlung, die Box serverseitig zu initialisieren, um nicht auf das JavaScript zu warten.
Hierbei würden Besucher, die keine Cookies im Browser erlauben (Cookie.set/get-Check l im JS schlägt fehl) den Cookie-Banner kurzeitig sehen. Denke aber das können wir verkraften, da 99% die Cookies im Browser erlauben.

Versionen:
Redaxo: 5.12.0
Consent-Manager: 2.0.1

[IngoWinter]

Imho ist das hiermit #144 erledigt.

[Sysix]

Leider nicht. Wir setzten den Wrapper die CSS-Klasse consent_manager-hidden:
https://github.com/FriendsOfREDAXO/consent_manager/blob/master/fragments/consent_manager_box.php

Und im JavaScript entfernen wir diese, wenn die Box angezeigt werden soll.
Bis das JavaScript geladen hat, wird also die Box auch nicht angezeigt.

#144 ist meiner Meinung nach für Critical-CSS angedacht :)

[IngoWinter]

Ich habe das Addon nur auf einer Seite im Einsatz und da sieht es so aus (3.0.0beta6). Deswegen gehe ich davon aus, dass es kein Consent Manager Problem ist. Mir ist auch nicht klar, was dein Lösungsvorschlag mit CLS zu tun hat.

Edit: "A layout shift occurs any time a visible element changes its position from one rendered frame to the next." Quelle

[Sysix]

Mein Setup:

• Critical-CSS im Head
• CSS / JS defered loading (loadCSS, defer)

Wieso mein Lösungsvorschlag mit CLS zu tun hat:

• Besucher besucht zum 1ten Mal die Webseite
• Critical CSS wird geladen (inline)
• Es wird angefangen die Haupt CSS Datei und Consent-Manager JS Datei zu laden
• Mein Above-The-Fold Content wird gerendert + gestylt (dank critical-css)
• Erst jetzt ist das Javascript fertig und kann die Überprüfung starten
• Javascript zeigt die Cookie-Box an und ändert den Above-The-Fold Content

Bei den beiden letzten Schritten ist meine Webseite bereits für den Besucher fertig (vom Styling).
Erst wenn das Javascript geladen und ausgeführt worden ist, wird die Box angezeigt und das fürt zu einen CLS-Problem.

[IngoWinter]

Das Anzeigen der Box dürfte zu keinem CLS Problem führen: "A layout shift occurs any time a visible element changes its position from one rendered frame to the next." Quelle
Oder verändert die Box die Position anderer Elemente?

[Sysix]

Hab mir nochmal meine komplette Konfiguration angeschaut.
Meine Critical-CSS hat aktuell nicht alle styles für /consent_manager/.
Vielleicht behebt #144 wirklich das Problem bereits.

Würde mich wieder melden, wenn die neue stable Version releast ist :)