Google's lighthouse meckert script an

Hallo,

Lighthouse über Chrome meckert zwei Dinge im template an - es geht um folgende Zeile in mod_visitors_fe_invisible.html5

PHP-Code:

---

document.write('<img class="invisible" src="<?= $this->route('visitors_frontend_screencount') ?>?vcid=<?= $visitor['VisitorsKatID']; ?>&scrw='+sWidth+'&scrh='+sHeight+'&scriw='+iWidth+'&scrih='+iHeight+'">');

---

... kein 'alt' für Screenreader
Als Abhilfe habe ich einen dummy-alt eingefügt

PHP-Code:

---

document.write('<img class="invisible" alt="invisible" src="<?= $this->route('visitors_frontend_screencount') ?>?vcid=<?= $visitor['VisitorsKatID']; ?>&scrw='+sWidth+'&scrh='+sHeight+'&scriw='+iWidth+'&scrih='+iHeight+'">');

---

... und 'document.write'

Zitat:

---

For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds

---

Gibt es hier Verbesserungspotential?

Vermeide document.write und nutze die Dom Manipulation API, https://wiki.selfhtml.org/wiki/JavaS...M-Manipulation

Wenn das nur ein Zählpixel ist, dann sollte die Alt-Angabe auch leer bleiben. Lighthouse ist nur ein Tool. Die Ergebnisse davon sollte man schon interpretieren ;-)
Jetzt hast du es im Grunde für Screenreader Nutzer verschlimmert, weil die jetzt invisible vorgelesen bekommen. Vorher wars genau richtig so ;-)

Viele Grüße

Naja - genau richtig war es nicht,
denn beim <img>-Tag ist doch wohl das alt-Attribut mandatory, es müsste also alt="" lauten.

Zitat:

---

Zitat von do_while

Naja - genau richtig war es nicht,
denn beim <img>-Tag ist doch wohl das alt-Attribut mandatory, es müsste also alt="" lauten.

---

Da hast du natürlich recht. Ich hatte übersehen, dass da gar kein alt-Attribut angegeben war.

Viele Grüße

alt Tag kommt mit der nächsten Version
https://github.com/BugBuster1701/con...ndle/issues/74

schaffst du auch die Alternative zu 'document.write'?

muss ich mal anschauen wie das geht, Javascript ist nicht mein Ding.

gehts nur darum das document.write zu ersetzen oder muss das unbedingt über "document.addEventListener('DOMContentLoaded'. ..." laufen um das Laden der Seite nicht zu bremsen?

Zitat:

---

Zitat von BugBuster

gehts nur darum das document.write zu ersetzen oder muss das unbedingt über "document.addEventListener('DOMContentLoaded'. ..." laufen um das Laden der Seite nicht zu bremsen?

---

Primär geht's aktuell darum das Laden der Seite zu beschleunigen - ich vermute, dass ich hiermit nicht der einzige bin, der deine Erweiterung einsetzt und Lighthouse drüber laufen lässt.
Was meckert Lighthouse genau:

Zitat:

---

Uses document.write()
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn more.

---

Zitat:

---

Using document.write() can delay the display of page content by tens of seconds and is particularly problematic for users on slow connections. Chrome therefore blocks the execution of document.write() in many cases, meaning you can't rely on it.

---

ok, hab da was gebastelt, bin grad am testen, sieht im Quelltext schon mal ok aus.

Nachtrag: leider ein Logikfehler, ein img Tag nachträglich einfügen über DOMContentLoaded bringt ja nichts, das wird ja nicht mehr angefordert.

Bin am testen, läuft nun asynchron über XMLHttpRequest. Damit erledigt sich auch der alt Tag beim Image, denn das ist nun kein Bild mehr was da als Antwort kommt.
https://github.com/BugBuster1701/con...ndle/issues/75

So, sollte nun besser sein.
https://community.contao.org/de/show...956#post519956

Vielen DANK @BugBuster!
soeben ein Update gemacht und Lighthouse nochmals drüber laufen lassen » Best Practices zeigt nun 100% :D
https://community.contao.org/de/atta...9&d=1582359531