Ich glaube, ich habe eine Lösung gefunden. Sicher bin ich mir aber noch nicht. -> SVG . Nicht als externes Bild, das geht auch nicht, aber als Data-Uri, denn da kann man die "viewBox" angeben und die hält die Vorgaben tatsächlich ein. Kein Zucken mehr 
src="data:image/svg+xml,%3Csvg%20xmlns=%22http://http://www.w3.org/2000/svg%22%20…22%3E%3C/svg%3E"
Und der kumulative Layout Shift ist von 0,2 auf 0,015 gefallen
Ja ne, einfügen lässt sich da alles mögliche, ist aber in dem Fall nun nicht die Frage. Den Dark-Mode übernimmt ja der Browser, das hat mit dem eigentlichen Style nix mehr zu tun. Meine grüne Überschrift wird z.B. rosa 
Schwarze Schrift wird weiß.
Daher meine Frage, ob man das erzwingen kann oder es eben eine Liste gibt, welche Farbe zu was wird. Es scheint irgendwie zu "invertieren", wobei das in dem Fall auch nicht wirklich stimmt.
Ich weiß nur aus Tests:
Grüne Schrift wird zu rosa
warmes gelb zu dunkelbraun.
Schwarzer Hintergrund bleibt schwarz.
Grauer Hintergrund wird schwarz
Oder hier aus dem Forum:
Die Orangen-farbene Schrift links beim Benutzernamen bleibt so.
Die Schrift der Postst wird weiß
der Hintergrund schwarz
Die silber-grau-blaue Box links bei den Benutzern wird schwarz
Der dunkelblaue Footer wird fast schwarz.
Danke für die Nachfrage. Auch hier, ja und nein. Events sind da, aber nicht bei allen drei Optionen. Wie gesagt, drei Wege in genau der Reihenfolge
1. Natives LazyLoad per 'loading="lazy"'
2. Fallback zu Intersection Observer (mit Events)
3. Fallback zur eigenen Klasse (mit Events)
Bei den Optionen 2 und 3 tritt das Problem nicht auf. Das Bild steht quasi im "data-src", wird per JS geladen und dann ins normale src verschoben, sobald der Onload da ist. Da spielt das height:auto also keine Rolle, denn wenn die Klasse gesetzt wird, dann ist das Bild schon da.
Das gibt es bei Option 1 aber nicht. Diese Option funktioniert im Grunde völlig ohne JS, wenn man keinen Fallback braucht oder will. Da steht das Bild dann ganz normal im src.
Mit Fallback aber nicht möglich, denn dann würde der Browser ohne native Unterstützung alles sofort laden. Hier entsteht aber das Problem, denn nur wegen dem Fallback muss auch bei "Nativ" das Bild ins data-src und dann eben per mini JS, wenn "nativ" erkannt wird, direkt ins src kopiert werden. Genau da passiert es. Der Platzhalter geht dann auf Grund seiner 1x1 auf 300x300 und nicht auf z.B. 300x200.
Natürlich kann ich per "style" arbeiten, aber das endet auch in der Luft, denn es gibt keine Rückmeldung vom nativen LazyLoad. Man weiß also nicht, wann man das Style dann wieder entfernen oder durch height:auto ersetzen kann. Und height:auto muss her, wegen responsive.
Irgendwie beißt sich die Katze da in den Schwanz und dreht sich im Kreis dabei.
Dann gibt es ja so eine schöne CSS-Option: "aspect-ratio" auch in Verbindung mit "width" und "height". Damit könnte man die Attributwerte auslesen und eben dem System / Element dynamisch mitteilen, es soll gefälligst die vorgegebenen Angaben einhalten. Geht aber auch nicht, denn aspect-ratio funktioniert nur mit Blockelementen wie DIVs und so, nicht mit Bildern.
Dann schon einen ganz anderen Weg versucht, wobei der unnötigen Ballast erzeugt. Dem umliegenden <figure> einfach die Bildgröße zu geben und ein overflow:hidden. Schön gedacht, aber falsch, denn im figure ist auch ein figcaption und dessen Höhe ist unbekannt. Das Ergebnis ist, das 1x1-Pixel bleibt falsch groß, wird aber richtig angezeigt, nun passt das Element <figure> an sich aber nicht mehr, weil die figcaption nun "hidden" ist
Da hast Du im Grunde vollkommen Recht, wobei ich das eben anders sehe. Ich denke nicht von A nach B, sondern von B nach A.
Die Polizei hat die Gewalt schon immer. Nur sie wird immer weniger eingesetzt. Dann gibt es aber die Kollegen, wie Du sagst, die dann andere decken, die es übertreiben und es intern bleibt. Das darf natürlich nicht sein.
Das ist also ein mehrseitiges Problem. Die einen Polizisten könnten, tun aber nicht, wegen Angst vor Videos. Die anderen machen, übertreiben aber und werden gedeckt. Dann die "Verursacher", denen heutzutage in der Regel die Polizei egal ist. So nach dem Motto: DU hast mir nix zu sagen. Dann ist der Beamte aber wieder an Punkt 1 oder 2, kommt drauf an, welcher es ist.
Wie man aus der Nummer raus kommt, also alle Seiten, keine Ahnung.
Und nein, wir fangen hier nichts an gegenseitig zu entschuldigen. Alles ist falsch, was nicht sein darf. Nur alles hängt zusammen, ist ein Kreis. Hätte der Beamte hier in WÜ das Kind vorher zu Boden gebracht und wäre gefilmt worden, dann wäre es "Gewalt gegen Kinder" gewesen und durch alle Medien gelaufen. Da "vorher", war ja noch nix passiert, nur eskaliert. Nun geht es dem Kind gut, Ansage der Eltern, und der Beamte ist im Krankenhaus. Mit diesem Endergebnis lief es nur durch die regionale Presse.
Ich wollte früher Lehrer werden. Zu meiner Zeit war das noch eine Respektsperson. Wäre ich es geworden, ich hätte schon längst gekündigt, denn denen geht es genauso.
So könnte man das leider fast wirklich bezeichnen. Wenn ich mal so zurück denke, dann mache ich 80% eigentlich nur irgendwas, damit irgendwelche Fehlermeldungen verschwinden, die penetrant einem vor die Nase gehalten werden. Der Sinn dahinter? Noch nie verstanden oder auch nur reproduzieren können. Alles andere dauert bei Google ewig, aber ein angeblicher Fehler, den bekommt man im Stundentakt per Mail, periodisch natürlich. Also das geht nicht in Echtzeit, aber dann eben gleich für alle.
Sehr gut geschrieben Guppy. Ich sehe das Problem hier auch so. Natürlich gibt es auch andere "Deppen", die ihre Macht ausnutzen, aber eben auch viele, die die "Macht gar nicht einsetzen dürfen", weil eben, wie Du schreibst, alles sofort in den Sozialen Medien ist und da eben gerne verfälscht, nur Teile einer Handlung. Hauptsache eine Seite steht schlecht da.
Ich habe mehrere "Beamte" in meiner Verwandtschaft, vom kleinen bis großen Dienstgrad, alles von der "normalen" Polizei, dann noch Kripo und Autobahnpolizei. Edit, vergesse ich immer: Landesschutz ist auch noch dabei.
Allesamt und ich meine wirklich alle, haben Familien und Kinder. Alles hatten Angst, dass denen was passiert. Die Väter haben sich alle in den Innendienst versetzen lassen. Damit kamen sie aber nicht klar, wie auch, wenn man was anderes gewohnt ist. Sind nun alle in Frührente.
Der Grund: Eskalierende Gewalt gegen Polizisten und die eben erst mal nix machen dürfen, bis sie selbst wirklich gefährlich angegriffen werden. Da kann es schon sein, dass mein aus einem Einsatz "Ruhestörung" eben nicht mehr zurück kommt.
War doch erst hier in WÜ letztes Jahr, wo eine Gruppe 12 und 13-Jähriger randalierte und dann auf die beiden Beamten los gingen (bewaffnet). Ergebnis? Kinder bei den Eltern, ein Beamter im Krankenhaus. Drei Wochen später, die gleiche Gruppe, der gleiche Ort, das Spiel geht weiter.
Ist die Avokado in D auch so in wie hier? Ein Boom, der mal wieder von einigen "Starköchen, Kleiderständern und Influencern befeuert wird.
Ja, ist hier auch so, also bei den Köchen, die ich mitbekomme. Gerne TV-Köche mit Sternen oder Reifen, die meine Mutter gerne sieht. Avokado, Ingwer oder "Chili-Salz", müssen da überall rein. Ich ich frage mich immer wieder: Verdammt, kannst Du nicht ein klassisches Gericht einfach klassisch machen? Die Gesellschaft verdummt. Ich bin froh, wenn ich hier was zu essen bekomme, das noch so schmeckt wie zu Omas Zeiten. Das ist nicht einfach, fast unmöglich. Ich esse ja auch mal was ausländisches, keine Frage. Da erwarte ich dann aber auch, dass das deren Tradition ist und nicht eingedeutscht. Genauso hätte ich gerne einfach doofe Semmelknödel mit Pilzsoße, wie es sich gehört. Da muss nix thailändisches, türkisches oder asiatisches drinnen sein. Es wird einfach zu viel gemischt, angeblich "verfeinert". Das "verfeinern" heißt aber letztendlich, alles schmeckt gleich, egal aus welchem Land es kommt. Dann kann ich auch zu MC gehen 
Du wirst lachen. Sellerie, mag ich eigentlich gar nicht auch keinen Ingwer oder so. Aber so gemixt mit anderen Dingen, kann das echt lecker sein
Und nein, dafür braucht man keinen speziellen Mixer, das ist auch so "neumodisch". Da reicht jeder andere Mixer auch aus, oder ein Stabmixer mit "Mix-Messer", nicht "Häxsel-Messer", vollkommen aus. Der Unterschied nur, das "Mix-Messer" ist eigentlich für Cocktails, das macht klein, cremig und pumpt Luft in die Masse.
Ähm, ja, nein, doch, keine Ahnung was.
Ja, Lighthouse und Co haben umgestellt. Die Field-Daten werden neu erfasst. Genau darum geht es.
Wenn das Bild schön komprimiert ist.... Was meinst Du damit? Hoch komprimiert sind die bei mir alle, aber eben so, dass sie noch vernünftig sind. Ich könnte natürlich als Platzhalter ein JPG nehmen, das 100% Kompression hat. Das würde aber nicht helfen, denn wesentlich größer als 1x1 und ein extra Request pro Bild. Das 1x1 ist dann ja im Cache, auch wenn es 100 mal geladen werden muss.
Das Problem aktuell ist ja die Browser-Unterstützung. Nutzt man nur "natives Lazy Load", also das 'loading="lazy"', dann ist das Problem umgangen und eigentlich alles rein aus HTML, so wie vor 10 Jahren. Aber das können eben nicht alle Browser, also Polyfill mit "Intersection Observer" oder eben einer ganzen eigenen JS-Klasse (in meinem Fall eine optimierte B-Lazy). Ich hier habe also drei. Nativ, Intersection oder Klasse.
Ich kann hier also kein normales Bild als "src" angeben, denn das wird nicht von allen unterstützt. So weit ich weiß, auch wenn der Google-Bot nun Ever-Green ist, kann er es auch nicht. Der würde also von Lazy in dem Fall nichts mitbekommen, wenn das Bild direkt im "src" steht.
P.S: Meine Browser sind alle auf dem aktuellen Stand. Die Suma-Bots aber nicht
Lazyloading im Nachteil: Ja, genau.... Vor 3 Monaten hieß es noch, man soll es machen. Nun habe ich das endlich überall drinnen, dann kommt Google mit CLS, das alles über den Haufen wirft. Also Chromium, was ja zu großen Teilen Google ist, sagt ja, nutze es, Google und sein Bot oder Lighthouse sagt nun nein.
Das ist das Zeug, was meine Oma schon vor 20 Jahren oder länger machte, aus regionalen Produkten, gerne aus dem eigenen Anbau, das Endergebnis aber keinen Namen hatte oder eher was wie "Früchte-Mix, trink das". In so einem Fall brauche ich definitiv auch keine Ware aus dem Ausland. Hier gibt es genug. Hatte gestern erst was, war neugierig. Zitrone, Gurke und Holunder.... Hört sich schräg an, schmeckte aber. Und frittierte Holunderblüten sind eh was feines, doch wer kennt die?
So, mal einen neuen Tread dazu. Vielleicht sieht da ja einer was vor lauter Bäumen, ich leider nicht mehr.
An sich erst mal alles gut. Eingebunden ist das IMG im HTML wie folgt:
<img class="b-lazy" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/bilder/geranien-aus-keller-k.jpg" width="300" height="225" />
Die Klasse "b-lazy" macht hier eigentlich nichts, als das Bild erst mal auf hidden zu setzen. Die Größenangaben im HTML direkt passen. Das 1x1 Pixel wird also gestaucht, aber egal, sieht man ja nicht. Der effektive Raum, der freigelassen wird, stimmt.
So, nun das Problem im zeitlichen Ablauf.
1. Anfangs stimmt alles
2. CSS wird geladen. Passt auch noch alles, denn keine Klasse macht irgendwas mit Größen, nur Sichtbarkeit
3. Javascript wird gelesen. Erkennt dass natives Lazy-Loading verfügbar ist und ändert den Quelltext. Das Bild aus "data-src" wird in "src" eingefügt und die zusätzliche Klasse "b-loaded" gesetzt. Diese beinhaltet nur die Angaben "height: auto;" und setzt das ganze eben wieder auf "visible". Nun kommt es aber zum Fehler, denn "auto" veranlasst nun den Platzhalter, auf eine Größe von 300x300 zu gehen, das im HTML-Code angegebene 225 wird dann ignoriert. Das Bild shifted, der Platzhalter wird zu groß.
4. Das dauert dann 10-50ms, sehr unterschiedlich, bis der Browser dann das echte Bild lädt. Wenn das dann da ist, dann passt die Höhe wieder, denn das echte Bild hat eben die height="225".
So, hat nun einer eine Ahnung, wie ich das Problem aus Punkt 3 umgehen kann?
Ich könnte das "height: auto;" einfach weglassen, dann ist das Problem auch weg, aber ein neues kommt dann. Dann sind die Bilder nämlich nicht mehr responsive
Es gibt leider auch keine Möglichkeit zu erkennen, wann das Bild nativ geladen ist. Sonst könnte man die Klasse "b-loaded" ja erst später einfügen. Wie aber gesagt, es gibt beim nativen LazyLoading keine Rückmeldung. Wohin auch, das geht ja alles ganz ohne Script
Den Platzhalter-Pixel auf einen anderen Formfaktor zu bringen ist auch keine wirkliche Option, denn die eigentlichen Bilder sind alles komplett unterschiedliche Formate und ich weiß vorher nicht, was kommt oder ich brauche, bzw. wären das viel zu viele unterschiedliche. Zudem würde es ein Pixel mit 1x0,66 oder 1,33x1 ja gar nicht geben
Er behält in auch, er liebt ihn 
Der ganze Thread hat mit dem Eingangspost nichts mehr zu tun. Spätestens ab der Frage "Was haltet ihr eigentlich von dem Huawei Sanktionen, berechtigt oder nicht?" ist das quasi OT. Ok, schon ein Thema, aber nicht das Thema vom Starter.
Benz Ich liebe das. Meine Nachbarn, Millionäre, AMG, was es zu bieten hat. Der Vater eines guten Freundes, neue Serien-Modelle, E und S-Klasse. Und was ist? Gefühlt mehr Werkstatt als fahren. Mein Freund selbst, einen uralten W123. Fühlt sich an wie eine Schiffsschaukel, die Sitze wie eine durchgesessene Couch im Wohnzimmer, aber das Ding fährt
Huawei und Co. Ich finde das ganze nicht gut. Es wird behauptet, die spionieren, aber Beweise gibt es nicht. Huawei ist nunmal kein Zulieferer für etwas, die sind eigentlich DER Lieferer. Ich kenne fast nix aktuelles, wo kein Huawei drinnen ist und wenn es nur ein kleiner Chip ist, der von deren Tochterfirma gefertigt wurde.
Und Huawei nimmt Qwant? Na, das kann ich doch nur als gut bezeichnen. Mal einer, der nicht Google vorgibt. Gut, dürfen sie ja nicht. Ich bin der Meinung, wenn sich nun nicht der Rest der Welt von nicht bestätigten Vorwürfen anstecken lässt, dann hat Trump mit den Sanktionen ein gewaltiges Eigentor geschossen.
Hm, habe gerade keine Ahnung, wo der Post hin passt. Im Grunde geht es um eine Mischung aus Dark-Mode, Farben von Schriften und Buttons.
Gibt es irgend eine Möglichkeit, die Farben im Dark-Mode zu erzwingen? Oder zumindest eine Liste, was aus welcher Farbe wird?
Der Hintergrund ist der: Wir versuchen ja, den Cookie-Hinweis so zu machen, dass man da möglichst auf "erlauben" klickt. Oft ist die Farbe da ein schönes warmes gelb und die Box an sich schwarz. Nur.... Der Samsung Browser scheint von selbst auf den Dark-Mode umgestellt zu haben. Viele andere Apps und Tools folgen. Das Problem dabei ist nun, man kann den Cookie-Hinweis nun eigentlich nicht mehr erkennen. Schwarze Box auf schwarzem Hintergrund ist halt doof. Und der gut sichtbare gelbe Button wird dann dunkelbraun. Also auch fast nicht mehr erkennbar.
Wie umgeht man das Problem nun?
Braucht das Forum hier eine lokale Datenbank? Ich frage nur, weil sonst könnte man ja einfach die Datenbank zuerst umziehen und dann einfach die Config anpassen. Das ist ein Ausfall von wenigen Minuten. Und wenn dann DNS durch ist, dann folgt die Webseite. So mache ich das zumindest immer. Die Datenbank braucht ja kein DNS, der reicht eine IP. Da gibt es dann auch kein doppelt oder Daten in der falschen Datenbank oder sonst was, denn die neue übernimmt sofort, egal wie langsam DNS ist.
Cura, Du wolltest keine Abkürzungen. Wie ist nun das zu verstehen? Dafür gibt es nämlich auch kein einheitliche Richtlinie. Meist steht es für "Zustimmung", oft aber auch für "deutlicher Hinweis".
Cura, brauchst Du mir nicht sagen. Ich habe hier Kunden, die haben 5 mal die Preise bestätigt, dann den Button "kostenpflichtig bestellen", Dann die Mail zur Aktivierung bekommen, wo die Preise noch mal drinnen stehen. Machen sie. Dann die Rechnung. Nix, 1. Mahnung. 2. Mahnung. 3. Mahnung mit Hinweis auf Inkasso. Plötzlich werden sie aktiv: "Sie schrieben doch, das wäre kostenlos! Dafür bezahlen wollte ich nie! Hätte ich nicht gemacht!".
Aber mal allgemein zum Thema gute Ergebnisse liefern oder eben gut sein. Wo genau ist da die Grenze? Wer definiert das? Keiner. Das sieht jeder für sich anders. Ob ein Navi nun direkt zum Ziel leitet oder 10 km Umweg macht, egal, man ist am Ziel. Und solange man nicht weiß, dass da 10 km Umweg dabei waren, ist das Navi top, es hat "einen ans Ziel gebracht". Sumas sind da komplett genauso. Woher soll denn ein User wissen, dass eine andere Suma vielleicht besser wäre, wenn Google dennoch das Ergebnis liefert. Vielleicht bei Produkten nicht das beste oder günstigste, aber gefunden und gekauft wurde dann ja, also auch alles top.
Google ist halt der Name schlicht hin. Microsoft kennt auch jeder, aber Bing? Was ist das? Meiner Mutter stellte ich anfangs Bing ein, sie war sofort genervt. Was ist das? Was soll ich damit? Wie geht das? Was soll ich damit, ich will ins Internet?...... 100 Anrufe und Tage an Gesprächen später. Ich richte Google ein.
So sind die Leute eben leider. Google und sonst nix. Was da steht muss stimmen. Wenn sie gut sind, dann kennen sie noch Wikipedia und es heißt nicht "bei Google gefunden", sondern "Wikipedia sagt das".
Erlebe ich jeden Tag mehrfach. Habe nur 1200 bezahlende Kunden, aber über 50.000 kostenfreie. Die sind eigentlich alle gleich. Letztes Jahr im Tipidorf. Da quatscht eine mit ihrem Handy, weil sie die nächste Tankstelle sucht. Google antwortete. Hm, hätte sie nicht einfach mal einen fragen können, der dort wohnt? Die Tanke von Google ist fast 20 km weiter weg als die Nächste. Aber ok, so lange es kein anderer sagt, ist Google ja top.
Und geht das Anwenden dieser Spirenzien nicht letztendlich auf Kosten der tatsächlichen inhaltlichen Qualität einer Site?
Natürlich. Hatte ich vorhin erst mit Alex am Telefon aber vorher auch schon so für mich selbst. Das was Google will ist entgegen allen dem, was man eigentlich macht, damit eine Seite schnell, übersichtlich und verständlich ist. Alleine schon so was wie TF-IDF, also Wörter und verwandte Wörter, die andere haben, man selbst aber nicht. Das kann man bei sich reinbasteln, aber denn wird der Text halt irgendwie Mist.
Der Rest ist hoher zeitlicher Aufwand, der dem User auch nicht unbedingt was bringt. Wobei das Verhältnis hier nun ja umgedreht ist. Die Core-Vitals werden nicht von "Google bestimmt", sondern vom User, egal mit was der an Hardware unterwegs ist. Google bekommt nur die Zahlen und agiert nach denen.
Ich frage mich fast jeden Tag, wenn Meldungen aus der GSC (Google Search Console) reinkommen, ob die mich eigentlich verarschen wollen oder ob das eine Beschäftigungstherapie werden soll. Heute alleine für das Ferien-Netzwerk 74 Fehlermeldungen bekommen. Für Standards, die 10 Jahre funktionierten. Nun anscheinend nicht mehr.
Nachtrag: Der LCP ist irreführend und bei Dir auch falsch erklärt. Es geht hier nicht um das größte Element an sich, also Dateigröße, sondern das größte im Sinne von, wann es gerendert werden konnte. Laut Spezifikation kann das auch ein Text-Element in einem Block-Level sein, also ein doofes <p>Text</p>. Weiß gerade nicht welche Seite, aber bei einer schlägt er genau da bei mir an. Das P sitzt zu tief im Dom und da es Blocklevel ist, muss der Browser warten, bis alles gerendert wurde.
Hm, hatte ich dazu nicht auch einen umfangreichen Post oder habe ich vergessen, den abzuschicken? An dem Thema bin ich nun schon seit fast einer Woche dran, vor allem am CLS.
Aber jein. Die bisherigen Web-Vitals bleiben erhalten, neu hinzu kommen die Core-Web-Vitals bzw. werden teilweise in die übernommen oder eben teilweise neu.
Und der CLS macht echt Probleme. Ich weiß nicht, was Google da vor hat, aber letztendlich ist fast alles, was man an modernen Techniken nutzen kann, schlecht für den CLS. Ich sage nur passives Lazy Load, das wird gerade ausgerollt und bedarf eben keinem externen Javascript mehr. Man muss ein height:auto per CSS setzen, damit die Bilder responsive sind, schon immer. Das bedeutet aber auch, dass das Layout, "shifted", denn die Bilder kommen erst gefühlt 200ms später. Da es aber "lazy loading" ist, ist als Platzhalter in der Regel ein 1x1 Pixel hinterlegt, sonst ist das ganze nicht mehr valide. Da es aber 1x1 ist, entspricht es nicht mehr der "Aspect Ratio" vom Bild, das nachgeladen wird. Die Seite "zuckt" also.
Dazu gehören auch Web-Fonts, denn auch die kommen erst wenige Bruchteile später. Durch eine andere Font ändern sich aber Abstände / Laufweiten der Schrift und es "zuckt". Nun könnte man sagen, ok, Inhalte erst darstellen, wenn die Web-Font geladen ist, aber dann erhöht das den FID enorm.
Auf den "Cumulative Layout Shift" bin ich also echt gespannt. Deine Webseiten Alex, die versagen fast alle. Bei mir an die 70%. Und nein, die Tools als Direkttest helfen da leider nicht. Ich sage nur Cookiehinweis. Da der nicht bestätigt ist, werden Inhalte, Ads, Fonts und Co gar nicht geladen. Die Core-Web-Vitals kommen aber von echten Nutzern, die den Cookiebanner möglicherweise bestätigt haben. Die haben dann also ganz andere "Vitals" als der Test, der nicht bestätigt.
