XF2.2 CLS Problem bei Banner-Anzeige

otto · 13. Nov. 2021

Xenforo Version: 2.2.7
PHP Version: 8.0.x
MySQL Version: MariaDB 10.3.x

Fehlermeldung:

Code:

CLS Fehler in der Google Search Console

Hallo,
ich nutze seit vielen Jahren ein immer mal wieder minimal an php angepasstes kleines Script zum anzeigen von 3 Bannern auf 3 Bannerplätzen (auf dem eigenen Server gehostete Grafiken, alles gleiches Format). Diese 3 Bannerplätze werden aus einem Pool von bis zu 12 Bannern per Zufall mit je 3 Bannern gefüllt. Das ganze wird beim laden der Seite gemacht und alle X Sekunden erneut um die Banner zu tauschen.

Das funktioniert soweit seit Jahren problemlos, aber da seit einiger Zeit ja CLS (das beim laden verschieben von bereits geladenen Inhalten) zu vermeiden ist, muss ich da mal langsam was tun. Google schimpft halt.

Aufbau:

Es existieren 2 PHP Dateien im Domain root:
timer.php

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
<html>
     <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
        $(document).ready(function() {
           $("#responsecontainer").load("select.php");
        var refreshId = setInterval(function() {
           $("#responsecontainer").load('select.php?randval='+ Math.random());
        }, 15000);
       $.ajaxSetup({ cache: false });
       });
       </script>
    </head>

<body margin:10px 0;>
    <center><div id="responsecontainer">
    </div></center>

</body>

timer.php steuert den automatischen Refresh alle X Sekunden.

select.php

PHP:

<?php
// Zeit, welche das Bannerscript gecached wird, nach X Sekunden wird der cache refresht
$seconds_to_cache = 10;
$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";

header("Content-Type: application/json");
header("Expires: $ts");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Cache-Control: max-age=$seconds_to_cache");
header("Pragma: cache");

// Connect to database
$connection = mysqli_connect('localhost', 'name', 'pass', 'DB');

// Select random rows from the database, limited to 3 banners/links
$query = "SELECT Banner,Link,Text FROM Banner ORDER BY RAND() LIMIT 3";

// Run the above defined query in selected database
$result = mysqli_query($connection, $query);


// For all the rows that we selected
while ($row = mysqli_fetch_array($result))
{
$adlink = $row['Link'];

// Display them to the screen...
echo "<a style=\"text-decoration: none; width: 340px; height: 60px;\" target=\"_blank\" rel=\"nofollow\" href='". $adlink . "'>
<span title=\"Werbepartner: ". $row['Text'] ."
Link: ". $adlink ."\"><img src=./pool/images/". $row['Banner'] ." border=0 alt=\"". $row['Text'] ."\"></span>
</a>" ;
}
echo "</br></br>"
?>

select.php holt sich ein Banner Image aus dem Pool, und versieht sie mit passendem Link und alt-Text aus einer DB. Das ganze macht es 3x um immer 3 Banner anzuzeigen.

Es existiert eine DB, auf die ich hier jetzt nicht weiter eingehen muss, was daraus gelesen wird, ist ersichtlich, denke ich.

Im Xenforo ACP unter "Werbung" ist folgender Werbeplatz angelegt:
Container Breadcrump (oben): Oben
HTML:

HTML:

<script async type="text/javascript">
  var framefenster = document.getElementsByTagName("iFrame");
  var auto_resize_timer = window.setInterval("autoresize_frames()", 100);
  function autoresize_frames() {
    for (var i = 0; i < framefenster.length; ++i) {
        if(framefenster[i].contentWindow.document.body){
          var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
          if(document.all && !window.opera) {
            framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
          }
          framefenster[i].style.height = framefenster_size + 'px';
        }
    }
  }
</script>
<iframe src="//www.domain.de/timer.php" class="iframe" width="100%" frameborder="0" scrolling="no"></iframe>

Das HTML baut ein Iframe, in dem die Ausgabe aus der timer.php angezeigt und die Größe des Iframe anhand der Fenstergröße bestimmt wird.

Soweit so schön, funktioniert wie gesagt seit ewig und drei Tagen, die DB im Hintergrund dient uns zur vereinfachten Verwaltung der Banner, Sponsoren und deren Bannerlaufzeiten, Links und Texte.

Nun mosert aber halt Google (zu Recht) an unserer CLS herum, weil die Banner im Aufbau den restlichen bereits sichtbaren Inhalt der Seite etwas nach unten schieben. Link: Startseite

Ich habe gerade noch keinen so rechten Plan, wie ich das so löse, das die CLS Werte in akzeptierte Bereiche sinken, der Inhalt sich beim aufbauen der Banner nicht verschiebt und wir dennoch wie bisher und vertraglich vereinbart stets 3 zufällig ausgewählte Banner aus einem Pool von bis zu 12 Bannern anzeigen und diese alle X Sekunden automatisch rollieren lassen.

Das Iframe kann ich nicht so machen, das es eine fixe Größe hat, weil mal 3, 2 oder nur ein Banner in der Höhe angezeigt wird um stets 3 anzuzeigen.

Gäbe es eventuell gar ein Xenforo Addon, was uns hier das Leben erleichtern könnte und das CLS reduziert?
Ideen, Ratschläge die nen alten Mann ein wenig näher an eine Lösung bringen?

Kirby · 14. Nov. 2021

Wo ist das Problem die Größe des IFrame per CSS Media Query festzulegen?

Dann hast Du eine fixe Größe.

Ich würde das ganze aber glaube ich komplett umbauen, das derzeitige Konstrukt ist etwas kompliziert und ineffizient (Resize aller IFrame alle 100 ms ... der CPU wird nicht langweilig)

XF2.2 CLS Problem bei Banner-Anzeige

otto

Die 5k-Labertasche

Kirby

Bekanntes Mitglied

Wir schützen deine Privatsphäre