DOM-Größe über Firefox-DevTools auslesen?

Hallo,

ich möchte mir nicht extra Google Chrome/DevTools/Lighthouse installieren, um die DOM-Größe einzelner Webseiten auszulesen.

Im Moment mache ich das online über Google Pagespeed Insight, wo am Ende unter "Bestandene Prüfungen" ja auch die DOM-Größe mit der Anzahl der Dom-Elemente angegeben wird. Dafür muss die Seite aber online und zudem öffentlich zugänglich sein.

Meine Frage:

Kann man auch mit den Entwicklerwerkzeugen von Firefox die DOM-Größe einer Webseite auslesen, am besten schon lokal?

Wenn ja, wo und wie?

Hintergrund:

Avoid an excessive DOM-Size

Wäre natürlich klasse, wenn man das auch mit dem Firefox auslesen könnte.

Danke schon mal im Voraus für etwaige Hinweise!

Hallo Sören,

vielen Dank für den Hinweis.

Ich habe jetzt mal den von dir genannten String in der Konsole eingegeben und erhalte als Ergebnis für die betroffene Seite "905". Bei Google Pagespeed Insight lautet die Angabe für die DOM-Größe jedoch "777 Elements".

Da scheinen also nicht exakt dieselben Elemente gezählt zu werden, schade.

Vielleicht fallen dir oder jemand anderem hier ja noch weitere Abfragemöglichkeiten ein?

Zitat von Sören Hentzschel

JavaScript lügt nicht. Was genau Google berechnet, weiß nur Google.

Da hast du sicherlich recht, aber wenn es laut Google maximal 1.500 Elemente sein sollen, dann schränke ich mich bei Verwendung dieser Script-Abfrage halt *noch mehr* ein, wenn sie statt 777 sogar 905 Elemente anzeigt.

Ich bin grade erst auf diesen DOM-Size-Faktor aufmerksam geworden und muss mich mal noch weiter umsehen, ob bzw. inwieweit er auch zum Google-Ranking beiträgt.

Vielen Dank schon mal für den Script-Hinweis, damit hat man auf jeden Fall bereits beim lokalen Entwickeln eine aussagekräftige Hausnummer.

Noch eine kleine Zusatzfrage:

Auf der verlinkten web.dev-Seite heißt es ja:

Zitat

Lighthouse flags pages with DOM trees that:

- Have more than 1,500 nodes total.

- Have a depth greater than 32 nodes.

- Have a parent node with more than 60 child nodes.

Können die Unterpunkte 2 und 3 auch mit solchen Code-Schnipseln abgefragt werden?

Zitat von Sören Hentzschel

Wenn ich dir eine Empfehlung aussprechen darf (ich befasse mich ja beruflich mit diesem Thema): Bewerte das nicht über. Google hat schon Recht, dass es gut wäre, die DOM-Größe möglichst klein zu halten. Aber die DOM-Größe hängt natürlich auch maßgeblich von den Inhalten der Seite und davon ab, wie die verwendeten Elemente programmiert sind. Du musst unter Umständen einen unverhältnismäßig hohen Aufwand betreiben, um die Grenze zu unterschreiten, erhältst de facto aber keinen Ertrag dafür. All diese Tipps, die Google Lighthouse gibt, sind gute Tipps, aber die sind alle nur als allgemeine Ideen zur Performance-Verbesserung zu betrachten. Für die Bewertung in Google Pagespeed spielen diese gar keine Rolle, da geht es ausschließlich um gemessene Zeiten - dabei ist es völlig egal, wie du diese Zeiten erreichst. Und aus dieser Maßnahme bekommst du keinen messbaren Ertrag.

Mein Umgang mit diesem Tipp ist, dass ich für die Programmierung im Hinterkopf behalte, Dinge möglichst einfach und nicht zu verschachtelt umzusetzen. Aber ich optimiere niemals nachträglich speziell dafür. Da gebe ich dann eher den Hinweis an die Content-Abteilung, nicht zu viel auf eine Seite zu packen.

Vielen Dank für diese zusätzlichen und einleuchtenden Erläuterungen!

Super, vielen Dank für deine Hilfe und schönen Feierabend!

Noch eine kurze Frage bzgl. des o.g. Codeschnipsels zum Zählen der DOM-Elemente:

Kann man das Ausführen des Codes aus Beitrag #2 vielleicht auf irgendeine Art und Weise noch vereinfachen?

Im Moment kopiere ich den Codeschnipsel und füge ihn dann auf jeder fraglichen Seite in die Konsole ein.

Geht das vielleicht noch etwas effektiver, vielleicht mit einem Bookmarklet oder auf irgendeine sonstige Weise im "Inspector"?

Kein Problem, falls es nicht möglich ist, aber falls doch, wäre es natürlich sehr praktisch.

UPDATE:

Ich hab eben auf GitHub eine Seite gefunden, auf der eine solche Vereinfachung für Firefox und Chrome erklärt wird.

Habs mal mit Firefox probiert und das Bookmarklet angelegt. Funktioniert offenbar einwandfrei und ist wesentlich praktischer, als jedesmal den Code händisch in die Konsole einzufügen. Jetzt muss ich nur noch versuchen rauszukriegen, warum Google PageSpeed Insight da immer auf zirka 50 -100 weniger DOM-Elemente kommt.