Die neuen Möglichkeiten und Experimente von WebPageTest: Testen Sie praktisch alles

Veröffentlicht: 2022-06-08

Es gab noch nie einen besseren Zeitpunkt als jetzt für den SEO-Ansatz eines Webentwicklers.

Das Tempo, in dem Tools und Ressourcen, sowohl neue Tools als auch alles Vertraute, innovativ sind und uns Optionen eröffnen, verlangt ebenfalls, dass wir Schritt halten. In letzter Zeit bedeutet dies mehr Anforderungen an die Leistungsoptimierung, da Google Algorithmusaktualisierungen und Änderungen an Metrikberechnungen veröffentlicht.

Ein Tool, mit dem Sie vertraut sein sollten, ist WebPageTest. Sie haben kürzlich einige unglaublich nützliche neue, vollständig integrierte Testtools veröffentlicht.

WebPageTest leitet jetzt benutzerspezifische HTML-Modifikationen in Echtzeit über Netlify weiter, um Vergleichstests direkt in der Benutzeroberfläche auszuführen. Es ist keine Codierung erforderlich.

Genie macht Sinn

Intelligente Anwendungslogik in drei großen Problembereichen, die Blasenergebnisse für Sie bereitstellt, aber nicht nur mit Textblöcken, mit Optionen für erneute Tests, die für Sie vorbereitet sind, um Kombinationen von Variationen zum Vergleich auszuführen. Die Reihe von Tests, die in WebPageTest verfügbar sind, bedeutet jetzt, dass Sie keine Tests mehr mit Proxy-Tools von Drittanbietern einrichten müssen, die duplizieren, was Sie direkt testen können.

Das alles war vorher technisch möglich und der ursprüngliche Ansatz hat weiterhin Bedeutung.

Obwohl beeindruckend umfassend, wird es immer Tests geben, die Sie mit einem Proxy-Host Ihrer Wahl ausführen müssen. Dies erfordert jedoch den Umgang mit JavaScript und Cloudflare.

Mit WebPageTest können Sie zeigen und klicken.

Lästige Labordaten

Denken Sie immer daran, dass die bestmögliche Kombination von Zahlen aus Labortests möglicherweise nicht die gleichen Zahlen im Feld ergibt. Es kann tatsächlich zu fehlerhaften Website-Funktionen führen.

Skripte und Stile haben eine vom Entwickler definierte Ladereihenfolge, bei der jede Änderung eine Breaking Change bedeuten kann, die nicht für die Produktion geeignet ist. Ein Proxy-Host kann im Rahmen des Optimierungsprozesses Zugriff für QA bereitstellen.

Lassen Sie uns Ihnen mit dieser Warnung sagen, wie großartig es ist, ein Testbed zur Demonstration von HTML-Optimierungen zu haben. Es ist nun seit weit über einem Jahr die Grundlage unserer Workshops und Konferenzsitzungen.

Unsere Search Engine Land-Leitfadenartikel können Ihnen dabei helfen, ein Testbed einzurichten. Wir werden bei SMX Advanced eine aktualisierte Version verwenden. Seien Sie live dabei, wenn Sie es schaffen.

Gelegenheiten

Der Opportunities-Text von WebPageText ist in Berichten für alle verfügbar.

Sie benötigen keine JavaScript-Kenntnisse mehr, um Vergleiche von HTML-Varianten durchzuführen. Stattdessen benötigen Sie ein kostenpflichtiges Konto, um integrierte Proxy-Tests mit der Bezeichnung Experimente auszuführen.

Das kostenlose Konto bietet Ihnen besseren Zugriff auf Berichte und den Verlauf, führt jedoch keine Experimente durch. Sie können weiterhin kostenlos JavaScript schreiben und Ihre eigenen Tests als Proxy verwenden.

Es ist einfach nicht annähernd so praktisch und es nimmt viel zu viel Zeit in Anspruch.

Kostenlose Möglichkeiten. Kostenpflichtiges Konto für Experimente.

Experimente

Wählen Sie in einem WebPageTest-Bericht den Menüpunkt Opportunities & Experiments und Sie erhalten eine umfassende Liste der Ergebnisse.

Möglichkeiten hier werden aus realen Testbedingungen abgeleitet (möglichst mit Hardware simuliert). Unser Test zeigte eine Gelegenheit, das Experimentieren mit Renderblockierungs-Ressourcenvariationen (normalerweise JavaScript und CSS), verzögert geladenen Bildern, selbst gehosteten Skripten von Drittanbietern und vielem mehr erneut zu testen.

Für Variationen ist ein Pro-Konto erforderlich

Testen Sie asynchrone, zurückgestellte oder sogar Inline-Skripte und Stylesheets über die Benutzeroberfläche. Wir haben Cloudflare Worker JavaScript geschrieben, um diese Tests zu proxieren, und wir haben auch Inline-Stilregeln hinzugefügt, um das Laden von Inhalten zum Ende der Seite, einschließlich der Fußzeile, zu verzögern. Das anfängliche Array von WebPageTest-Integrationen kann die meisten, aber nicht alle unserer ursprünglichen Tests verarbeiten.

Es ist jetzt ein Kinderspiel, Tests zusammenzustellen.

Ändern Sie die Testeinstellungen und starten Sie Variationen, um den heiligen Gral der Green Core Web Vitals auf ganzer Linie zu verbessern. Das Angebot ist erstaunlich umfassend und deckt weit mehr ab, als nur die Leistung einer Webseite beeinflusst.

Sie finden drei Kategorien, die Möglichkeiten zum Experimentieren nach den folgenden Fragen gruppieren:

  • Ist es schnell? Quickness kategorisiert und gruppiert Experimente zur Leistungsoptimierung.
  • Ist es verwendbar? Usability gruppiert HTML-Validierungsfehler, die Screenreader durcheinander bringen können, und Dinge, die sich auf Layoutverschiebungen auswirken.
  • Ist es belastbar? Resilienz geht auf Sicherheitsbedenken ein, einschließlich gemischter Protokolle. Ändern Sie die Testeinstellungen mit einer Checkbox-Oberfläche und starten Sie die Ausführung von Variationen. Im Vergleichsbericht erhalten Sie verfeinerte Optionen.

Dashboard für eine Testsuite

WebPageTest muss einem Dashboard für eine Testsuite ähneln und dies innerhalb von Berichten tun, die mehr Details bieten als Lighthouse und eine weitaus bessere Wasserfalldiagrammdarstellung als Chrome Dev Tools.

Obwohl es stimmt, dass Sie mit Zeigen und Klicken HTML-Experimente in einer Umgebung ohne Code ausführen können, erfordern die bereitgestellten Details und die Navigation Erfahrung – und Programmiererfahrung ist am besten.

Ein neues integriertes Experiment repliziert eine andere Worker-Aufgabe von Cloudflare, indem es sämtliches JavaScript entfernt. Solche Dinge so zugänglich zu haben, ist außergewöhnlich praktischer, als ein Skript für Testvariationen zu schreiben.

Erweiterte Experimente ermöglichen es uns, HTML an Schlüsselstellen einzufügen, Taktiken zu testen, um die Ladereihenfolge zu ändern, nicht zu laden oder Ressourcen zu modifizieren, einschließlich Minify.

Es gibt buchstäblich nichts, was uns technisch davon abhält, praktisch alles auf jeder Seite zu testen.

Fallen Sie in die Erfolgsgrube

Vergleichsberichte selbst dienen dazu, Sie dazu zu bringen, weitere Varianten auszuwählen und erneut zu testen. Das Ergebnismessbanner enthält farbcodierte Verbesserungs- und Verschlechterungsergebnisse zwischen Kontrolle und Experiment.

Ein Abschnitt mit verbleibenden Möglichkeiten mit einer Teilmenge von Testschaltern wird unten angezeigt. Sie können sich zu einer signifikanten Verbesserung durchklicken.

Wir haben die harte Arbeit geleistet, um Tests zur Demonstration bei SMX Advanced zu schreiben, und wenn wir live sind, können Sie davon ausgehen, dass wir dieses wichtige Update für genau die von uns verwendeten Tools behandeln werden. Es wird so viel einfacher sein.

Wir werden sehen, ob der schnelle Textzyklus der WebPageTest-Experiment-Integrationen das erreicht, was wir bereits bereit waren, zu liefern. Mal sehen, ob wir auf der ganzen Linie grün werden können.