Übermäßige DOM-Größe

Silktide misst, wie viele Elemente Ihre Seite ausmachen und wie tief sie verschachtelt sind. Aus zu vielen Elementen aufgebaute Seiten laden langsamer, reagieren träger und belegen mehr Arbeitsspeicher auf den Geräten Ihrer Besucher.

Jede Überschrift, jeder Absatz, jedes Bild und jeder Container auf einer Seite ist ein Element im internen Seitenmodell des Browsers, dem . Browser bewältigen ein paar hundert Elemente problemlos; Seiten mit Tausenden verlangsamen jede Stilberechnung, jeden Layout-Durchlauf und jede Skript-Aktualisierung spürbar.

Warum das wichtig ist

Besucher erleben eine übergroße Seite als Trägheit: Die Seite erscheint später, das Scrollen ruckelt, und Interaktionen wie das Öffnen eines Menüs hängen spürbar hinterher. Am stärksten ist der Effekt auf leistungsschwachen Geräten - günstigen Smartphones und älteren Rechnern - sodass gerade Nutzer mit der langsamsten Hardware die schlechteste Version Ihrer Website sehen.

Übergroße Seiten sind selten absichtlich so gestaltet. Sie entstehen schleichend: Page-Builder, die alles in mehrere Containerebenen hüllen, versteckte Varianten derselben Inhalte für unterschiedliche Bildschirmgrößen sowie lange Listen, die vollständig gerendert werden, obwohl Besucher nur den ersten Bildschirm sehen.

So beheben Sie das

Finden Sie heraus, was die Seite aufbläht. Häufige Ursachen sind Page-Builder-Themes, die tief verschachtelte Wrapper erzeugen, Mega-Menüs, die die gesamte Seitenstruktur in jede Seite einbetten, sowie lange Tabellen oder Produktlisten, die vollständig gerendert werden.
Rendern Sie lange Listen schrittweise: Zeigen Sie zunächst die ersten Einträge und laden Sie beim Scrollen oder Blättern nach, statt Tausende Zeilen auf einmal in die Seite zu setzen.
Vermeiden Sie doppelte Inhalte für unterschiedliche Geräte. Stylen Sie eine einzige Fassung mit , anstatt getrennte, versteckte Desktop- und Mobil-Versionen derselben Inhalte auszuliefern.
Teilen Sie sehr lange Seiten in mehrere kleinere auf, wenn es der Inhalt zulässt.

So testet Silktide das

Die Seite wird in einem echten Browser geladen, wobei der für Ihre Geschwindigkeitstests konfigurierte Gerätetyp, die Verbindungsgeschwindigkeit und der Teststandort verwendet werden.
Die Elemente der vollständig geladenen Seite werden gezählt, einschließlich allem, was durch hinzugefügt wird.
Es werden drei Kennzahlen gemessen und das jeweils verantwortliche Element ermittelt: die Gesamtzahl der Elemente, die tiefste Verschachtelungstiefe und die größte Anzahl von Kindelementen unter einem Elternteil.
Jede Kennzahl wird bewertet. Etwa 1.000 Gesamtelemente, eine Verschachtelung von rund 24 Ebenen oder ein Elternteil mit etwa 45 Kindelementen verschlechtern die Note; circa 1.500 Elemente, 32 Ebenen oder 60 Kindelemente werden als schlecht bewertet.

Fehlerbehebung

Die Seite wirkt nicht groß

Die Elementanzahl betrifft die Struktur, nicht die sichtbaren Inhalte. Eine optisch einfache Seite kann Tausende Elemente enthalten, wenn jedes sichtbare Objekt in viele Containerebenen verpackt ist oder wenn Inhalte für andere Bildschirmgrößen vorhanden, aber verborgen sind. Die für jede Kennzahl gemeldeten Elemente zeigen, wo die Masse tatsächlich liegt.

Die hohe Elementanzahl stammt von meinem Theme oder Page-Builder

Das ist häufig und in der Regel nichts, was Redakteure beheben können. Geben Sie den Befund an die Personen weiter, die das Theme oder die Templates der Website pflegen; das Abschalten ungenutzter Page-Builder-Funktionen oder das Vereinfachen von Templates entfernt oft auf einen Schlag Hunderte Elemente.