XF1+2 CLS Problem durch Banner und wie am besten lösen?

[otto]

Hallo,

ich nutze für diverse Dinge das Xenforo Informationssystem um oberhalb aller Seiten Hinweis-Banner einzublenden. Also eine Grafik. Jetzt kann ich der natürlich nur relative Größenangaben in % oder eben max-Werte mitgeben und keine fixe Größe - das alte Lied Desktop vs. Mobile.

Jetzt kann ich daher gehen und über Schalter die verschiedenen Bildschirmgrößen berücksichtigen und entsprechend 4 Versionen der Banner dann mit fixen Bildgrößenangaben einbinden.
Jedoch würde damit vermutlich zwar das CLS Problem umschifft, aber die Ladezeit wohl eher negativ beeinflusst.

Rein auf Text möchte ich nicht setzen in dem Fall, zumal dann auch wieder die Formatierung abhängig der Bildschirmgröße wäre.

Wie handhabt ihr das? Nutzt ihr das Informationssystem und wenn ja wie?

 

[Hoffi]

Ich würde es zumindest mal mit einem Picture Tag versuchen.

HTML picture tag

 

[otto]

Gute Idee - den hatte ich bis eben noch nicht auf dem Schirm. Versuch macht kluch... ich berichte.

 

[Hoffi]

Eine Alternative wäre noch ein IMG Tag mit SrcSet

srcset und sizes für HTML img | mediaevent.de

 

[otto]

Hab es nun so gemacht:

<center>
<a href="https://foto.zetor-forum.de/category/fotowettbewerbe/">
    <picture>
    <source media="(min-width:1120px)" srcset="https://www.zetor-forum.de/img/2021_Fotowettbewerbe.jpg">
    <source media="(min-width:920px)" srcset="https://www.zetor-forum.de/img/2021_Fotowettbewerbe_900.jpg">
    <source media="(min-width:670px)" srcset="https://www.zetor-forum.de/img/2021_Fotowettbewerbe_650.jpg">
    <source media="(min-width:500px)" srcset="https://www.zetor-forum.de/img/2021_Fotowettbewerbe_480.jpg">
            <img style="font-family:monospace; width:auto;" title="Zetor Forum Fotowettbewerbe 2021/22" alt="Zetor-Forum Fotowettbewerbe 2021/22"  src="https://www.zetor-forum.de/img/2021_Fotowettbewerbe_250.jpg">
    </picture>
</a>
</center>

und siehe da - CLS laut Google OK nun:


Danke für den Tipp.

Edit: theoretisch ne prima Sache, aber nicht ohne noscript Tag und damit nicht für den Info-Slider geeignet. Google Search Console meckert dann rum.

 

[otto]

GSC meckert nun aber über das Picture Tag.

Das übergeordnete Tag des Tags "picture" muss "noscript" sein.

Also darf man den Picture Tag nur innerhalb eines "noscript" Tags verwenden? Was freilich innerhalb eines Sliders nicht geht.

Also doch Tipp 2 mal versuchen.

@Hoffi
Hast du noch nen Tipp? Ansonsten versuch ichs mit deinem vorherigen 2. Tipp mal.

 

[Hoffi]

Also darf man den Picture Tag nur innerhalb eines "noscript" Tags verwenden? Was freilich innerhalb eines Sliders nicht geht.

Das höre ich zum ersten mal. An vielen stellen wird empfohlen img durch picture zu ersetzen.

Beispiel: How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images

 

[otto]

Google sagt:



Google mag also im Bezug auf AMP offenbar gar keinen Picture Tag, egal wie man ihn einbaut. Also doch dein Lösungsvorschlag Nr. 2

AMP HTML Specification

 

[Hoffi]

Ah, AMP. Das ignoriere ich bewusst, sorry.

 

[otto]

Ja, die CLS Probleme traten bei normalen UND AMP Seiten auf. Das Picture Problem nur bei AMP. Was ein Mist...