Speed Auditor: Finden Sie heraus, was Ihr WordPress bremst

Einige WordPress-Site-Administratoren sind besessen von PageSpeed Insights oder GTmetrix. Mein Rat und der vieler anderer, die viel mehr darüber wissen, ist, dass Sie diesen Metriken nicht mehr Bedeutung beimessen sollten, als sie haben.

Wenn die wahrgenommene Ladegeschwindigkeit gut ist, ist es nicht notwendig, alles "in grün" zu setzen. In vielen Fällen ist es sogar kontraproduktiv, weil man in eine Überoptimierung verfallen kann, oder schlimmer noch, man kann am Ende verschiedene Dinge ruinieren, wenn man versucht, eine Sache zu verbessern.

Doch egal, ob Sie ein WPO-Liebhaber oder ein Optimierungsenthusiast sind oder einfach nur versuchen wollen, die Reaktionsfähigkeit Ihrer Website zu verbessern, diese Tools sind fast unverzichtbar. Das Problem ist, dass sie "Standbilder" anbieten, die von externen Servern stammen. Aber was passiert, wenn Sie als Administrator auf Ihrer Website surfen? Was ist mit den Anzeigen, die zu spät geladen werden, oder dem Menü, das gerade dann springt, wenn Sie darauf klicken wollen?

Herkunft

Speed Auditor wurde als Antwort auf ein persönliches Bedürfnis nach mehreren einfachen, aber leistungsstarken lokalen Diagnosetools entwickelt. Es handelt sich nicht um ein Optimierungs-Plugin (es ändert nichts an Ihrem Code), sondern um ein Echtzeit-Audit-Plugin.

Wenn Sie auf der Suche nach einem guten, vielleicht sogar dem besten, kostenpflichtigen Plugin für WPO sind, mit dem Sie Änderungen und Feineinstellungen vornehmen können, schauen Sie sich Perfmatters an. Wenn Sie hingegen etwas Kostenloses und Einfaches suchen, ohne sich den Kopf mit Einstellungen und Anpassungen zu zerbrechen, aber mit vielen Möglichkeiten, können Sie WPO Rocket Tweaks von Fernando Tellado ausprobieren, das im WordPress-Repository verfügbar ist.

Wenn Sie nicht wissen, was ein DOM-Knoten oder eine Latenzmetrik ist, machen Sie sich keine Sorgen. Speed Auditor wurde entwickelt, um Ihnen zu helfen, Ihre Website auf einen Blick zu verstehen:

• Der intelligente Indikator: In Ihrer Verwaltungsleiste erscheint ein Symbol mit wechselnder Farbe. Wenn es grün ist, ist Ihre LCP (die Zeit, die Sie brauchen, um die wichtigsten Dinge zu sehen) optimal. Wenn es orange oder rot ist, müssen Sie sich um etwas kümmern.

• Prüfen Sie, während Sie surfen: Sie müssen nichts Kompliziertes konfigurieren. Sie aktivieren das Plugin, und während Sie Ihre Beiträge überprüfen, arbeitet es im Hintergrund und analysiert, ob Ihre Bilder zu schwer sind oder Ihr Server nur langsam reagiert.
• Mehr menschliche Berichte: Laden Sie mit einem Klick eine .txt-Datei herunter, die Sie an Ihren Entwickler senden oder speichern können, um die Ergebnisse nach der Anwendung von Änderungen zu vergleichen.

Unter der Motorhaube

Version 1.1.8 versucht, eine gewisse Diagnosetiefe zu bieten, um Zeit bei der Eingabe in die Browserkonsole zu sparen.

• Präzise LCP-Erkennung: Das Plugin erkennt genau, welches Element (Bild oder Textblock) das Largest Contentful Paint ausgelöst hat.
• DOM-Tiefenanalyse: Entscheidend für die Vermeidung einer "übermäßigen DOM-Größe". Speed Auditor schlüsselt die Anzahl der Knoten nach Zonen (Kopfzeile, Inhalt, Fußzeile) auf und warnt Sie, wenn die Verschachtelung 15-20 Ebenen überschreitet.
• Medien-Latenz-Monitor: Misst die tatsächliche Übertragungszeit (Resource Timing API) von Bildern. Wenn ein Bild 500 ms zum Herunterladen benötigt, markiert das Plugin es als kritisch.
• Keine Auswirkungen auf den Server: Die gesamte Verarbeitung erfolgt auf der Client-Seite (Browser). Es gibt keine umfangreichen Datenbankabfragen oder PHP-Prozesse, die die Website verlangsamen.

Der große Sprung. Demnächst verfügbar: Speed Auditor 1.1.9 (mit "Radar CLS")

Bislang war die kumulative Layoutverschiebung (CLS) eine abstrakte Zahl in einem Bericht. Man wusste, dass sich etwas bewegt, aber man wusste nicht immer, was. In Kürze, in Version 1.1.9, wird sich das ändern.

Die "Highlighter"-Taste für Radar oder Visual CLS soll eingeführt werden.

Stellen Sie sich vor, Sie aktivieren einen "Radar"-Modus, der rote Kästchen über jedes Element zeichnet, das sich bewegt, während Sie scrollen. Dies, was einige Erweiterungen bereits tun, mit mehr oder weniger Erfolg, ist immer eine sehr nützliche visuelle Hilfe, um zu versuchen, diese "Überläufe" zu fangen, die manchmal dem Auge entgehen.

• Ist es ein AdSense-Banner, das Ihren Inhalt pusht? Sie werden es mit einem roten Kasten sehen. Sie können dieses Problem hier genauer untersuchen.
• Ist es ein Bild ohne definierte Abmessungen? Der Radar wird es erfassen.
• Totale Beständigkeit: Sie können Ihre gesamte Website mit eingeschaltetem Radar durchsuchen; das Plugin merkt sich, dass Sie jeden Winkel visuell überprüfen möchten.

Dieses Update wird auch ein kurzes technisches Glossar enthalten, das um Tipps und Anleitungen erweitert wird, die in Ihr WordPress-Dashboard integriert werden, so dass Begriffe wie ins, iframe oder figure keine Rätsel mehr sind.

Die Idee ist, sowohl die Reaktion der Analyse als auch die erstellten Berichte zu verbessern, wenn ich sie in verschiedenen Szenarien teste und wenn ich Verbesserungsvorschläge oder Fehlerwarnungen erhalte.

Version 1.1.8 ist jetzt verfügbar, um Ihre Metriken aufzuräumen, und bald wird 1.1.9 es noch einfacher machen, die visuelle Stabilität von WordPress zu verbessern. Wenn Sie es jetzt installieren, werden Sie das Update in Kürze erhalten.

Wie funktioniert das?

Der Code folgt diesen drei Schritten:

1. Der PerformanceObserver

Der Browser (Chrome, Edge, Opera) verfügt über eine native API namens Performance API. Das Plugin registriert einen "Watcher" namens PerformanceObserver, der speziell für den Layout-Shift-Eingabetyp konfiguriert ist.

Jedes Mal, wenn sich etwas auf dem Bildschirm bewegt, nachdem es ursprünglich gezeichnet wurde, erzeugt der Browser ein Ereignis. Das Plugin fängt dieses Ereignis ab und extrahiert zwei wichtige Daten:

• Der Wert des Offsets: (Diese Zahl ist 0,0145).
• Das schuldige Element: Der Browser teilt dem Plugin genau mit, welcher HTML-Knoten verschoben wurde.

2. Der Filter "Letzte Interaktion

An dieser Stelle versucht das Plugin, clever zu sein. Nicht alle Bewegungen sind "schlecht". Wenn Sie auf ein Dropdown-Menü klicken und der Inhalt nach unten scrollt, ist das eine erwartete Bewegung des Benutzers.

Das Plugin prüft eine Eigenschaft namens hadRecentInput. Wenn Sie in den letzten 500 ms eine Taste berührt oder geklickt haben, markiert der Browser diese Bewegung als "erwartet" und das Plugin ignoriert sie, um Fehlalarme zu vermeiden. Es erkennt nur Bewegungen, die unerwartet auftreten (z. B. das plötzliche Erscheinen einer Anzeige).

3. Visuelles Rendering (Die roten Kästen)

Sobald das Plugin das verschobene Element hat, kommt der visuelle Teil ins Spiel:

1. Koordinatenberechnung: Verwendet eine Funktion namens getBoundingClientRect(), um herauszufinden, wo sich das Element in diesem Moment auf dem Bildschirm befindet (Pixel oben, Pixel links).
2. Rahmen-Injektion: Erstellen Sie ein div mit absoluter Position, einem 2px roten Rand und einem sehr hohen z-index, um alles zu überlagern.
3. Das Etikett: Fügen Sie links oben im roten Kasten ein kleines Kästchen mit dem Namen des Etiketts (ins, img, div) und dem Wert des kumulierten CLS hinzu.

Warum ist dies besser als ein externer Bericht?

Tools wie PageSpeed erkennen CLS manchmal nicht, weil sie nicht bis zum Ende scrollen oder nicht warten, bis bestimmte Anzeigen geladen sind.

Das Plugin misst mit Hilfe der Persistenz den CLS , der sich während der gesamten Browsing-Sitzung des Nutzers angesammelt hat. Bewegt sich ein Element zu Beginn ein wenig und beim Scrollen ein wenig, addiert das Plugin dies und hebt es hervor, so dass Sie die ungefähre reale Zahl erhalten, die Google am Ende in seinem Bericht"Chrome User Experience" (CrUX) sehen wird.