Rezepte für Performance-Tests von Single-Page-Anwendungen in WebPageTest

WebPageTest ist ein Online-Tool und ein Open-Source-Projekt, das Entwicklern hilft, die Leistung ihrer Websites zu überprüfen. Als Web Performance Evangelist bei Theodo nutze ich es jeden Tag. Ich bin immer wieder erstaunt, was es der Webentwicklungs-Community im Allgemeinen und den Web-Performance-Enthusiasten im Besonderen kostenlos bietet.

Aber die Dinge können bei der Arbeit mit Single-Page-Anwendungen – die üblicherweise mit React, Vue, Svelte oder einem anderen Frontend-Framework geschrieben werden – schnell schwierig werden. Wie kommt man durch eine Anmeldeseite? Wie kann man den Benutzerfluss im Hinblick auf die Performance testen, wenn ein Großteil davon clientseitig abläuft und keine spezifische URL hat, auf die man verweisen kann?

In diesem Artikel werden wir herausfinden, wie wir diese Probleme (und viele mehr) lösen können, und Sie werden bereit sein, die Leistung Ihrer Single-Page-Anwendung mit WebPageTest zu testen!

Hinweis: Dieser Artikel setzt ein fortgeschrittenes Verständnis einiger fortgeschrittener Funktionen von WebPageTest voraus.

Wenn Sie neugierig auf Web-Performance sind und eine gute Einführung in WebPageTest wünschen, empfehle ich Ihnen die folgenden Ressourcen

• „How To Use WebPageTest and its API“ auf CSS-Tricks ist ein guter Überblick über die Funktionen von WebPageTest von Edouardo Bouças;
• „Who has the fastest website in F1?“ von Jake Archibald erklärt, wie die Analyse von WebPageTest-Ergebnissen zu Leistungsverbesserungen in einer Fallstudie zum Thema Formel 1 führen kann.

Das Problem beim Testen von Single-Page-Anwendungen

Single-Page-Anwendungen (SPAs) haben die Funktionsweise von Websites revolutioniert. Anstatt das Backend (z. B. Django, Rails und Laravel) die meiste Arbeit leisten zu lassen und dem Browser fertiges HTML zu liefern, verlassen sich SPAs stark auf JavaScript, um den HTML-Code im Browser zu berechnen. Solche Frontend-Frameworks sind React, Vue, Angular oder Svelte.

Die Einfachheit von WebPageTest ist ein Teil seines Reizes für Entwickler: Gehen Sie zu http://webpagetest.org/easy, geben Sie Ihre URL ein, warten Sie ein wenig, und voilà! Ihr Performance-Audit ist fertig.

Wenn Sie eine SPA erstellen und deren Leistung messen möchten, könnten Sie auf End-to-End-Test-Tools wie Selenium, Cypress oder Puppeteer zurückgreifen. Ich habe jedoch festgestellt, dass keines dieser Tools über die Menge an leistungsbezogenen Informationen und die benutzerfreundlichen Werkzeuge verfügt, die WebPageTest bietet.

Aber das Testen von SPAs mit WebPageTest kann komplex sein.

Bei vielen SPAs ist der Großteil der Website hinter einem Anmeldeformular geschützt. Ich verwende oft Netlify zum Hosten meiner Websites (einschließlich meines persönlichen Blogs), und die meiste Zeit, die ich in der Anwendung verbringe, bin ich auf authentifizierten Seiten, wie dem Dashboard, das alle meine Websites auflistet. Da die Informationen auf meinem Dashboard für mich spezifisch sind, werden andere Benutzer, die versuchen, auf https://app.netlify.com/teams/phacks/sites zuzugreifen, mein Dashboard nicht sehen, sondern stattdessen zur Anmelde- oder 404-Seite weitergeleitet.

Dasselbe gilt für WebPageTest. Wenn ich die URL meines Dashboards in http://webpagetest.org/easy eingebe, wird das Audit auf der Anmeldeseite durchgeführt.

Darüber hinaus kann die Leistung von dynamischen Interaktionen in SPAs nicht mit einfachen WebPageTest-Audits getestet und überwacht werden.

Hier ist ein Beispiel. Nuage ist ein Domain-Registrar mit ausgefallenen Animationen und einer schönen, dynamischen Benutzeroberfläche. Wenn Sie nach Domainnamen zum Kauf suchen, ruft ein asynchroner Aufruf die Ergebnisse der Anfrage ab und die Ergebnisse werden angezeigt, sobald sie abgerufen werden.

Wie Sie vielleicht im obigen Video bemerkt haben, ändert sich die URL der Seite nicht, während ich meine Suchbegriffe eingebe. Folglich ist es nicht möglich, die Leistung des Sucherlebnisses mit einem einfachen WebPageTest-Audit zu testen, da wir keine richtige URL haben, um auf die Aktion des Suchens nach etwas zu verweisen – nur auf eine leere Suchseite.

Weitere Probleme können sich aus dem Paradigmenwechsel der SPA beim Einsatz von WebPageTest ergeben

• Das Herumklicken zur Navigation auf einer Webseite ist in der Regel schwieriger als das einfache Aufrufen einer neuen URL, aber es ist manchmal die einzige Option in SPAs.
• Die Authentifizierung in SPAs wird üblicherweise mit JSON Web Tokens anstelle von alten Cookies implementiert, was die Option des direkten Setzens von Authentifizierungs-Cookies in WebPageTest ausschließt (wie hier beschrieben).
• Die Verwendung von React und Redux (oder anderen State-Management-Bibliotheken für Anwendungen) für Ihre SPA kann bedeuten, dass Formulare programmatisch schwieriger auszufüllen sind, da die Verwendung von .innerText() oder .value() zum Setzen eines Feldwerts möglicherweise nicht an den Anwendungsspeicher weitergeleitet wird.
• Da API-Aufrufe oft asynchron sind und verschiedene Loader verwendet werden können, um einen Ladezustand anzuzeigen, können diese WebPageTest dazu "überlisten", zu glauben, dass die Seite tatsächlich geladen wurde, obwohl dies nicht der Fall ist. Ich habe dies bei länger dauernden API-Aufrufen (5+ Sekunden) erlebt.

Da ich diese Probleme bei mehreren Projekten hatte, habe ich eine Reihe von Tipps und Techniken entwickelt, um ihnen entgegenzuwirken.

Die vielen Möglichkeiten der Elementauswahl

Die Auswahl von DOM-Elementen ist ein wichtiger Teil aller automatisierten Tests, sei es für End-to-End-Tests mit Selenium oder Cypress oder für Performance-Tests mit WebPageTest. Die Auswahl von DOM-Elementen ermöglicht es uns, auf Links und Schaltflächen zu klicken, Formulare auszufüllen und im Allgemeinen mit der Anwendung zu interagieren.

Es gibt verschiedene Möglichkeiten, ein bestimmtes DOM-Element mit nativen Browser-APIs auszuwählen, die von einfachen document.getElementsByClassName bis zu den komplexen, aber sehr mächtigen XPath-Selektoren reichen. In diesem Abschnitt werden wir drei verschiedene Möglichkeiten betrachten, geordnet nach zunehmender Komplexität.

Element nach ID, Klassenname oder Tag-Namen abrufen

Wenn das Element, das Sie auswählen möchten (z. B. eine Schaltfläche "Warenkorb leeren"), eine spezifische und eindeutige ID (z. B. #empty-cart), einen Klassennamen hat oder die einzige button auf der Seite ist, können Sie darauf klicken, indem Sie die getElementsBy Methoden verwenden.

const emptyCartButton = document.getElementById("empty-cart");
// or document.getElementsByClassName(".empty-cart-button")[0]
// or document.getElementsByTagName("button")[0]
emptyCartButton.click();

Wenn Sie mehrere Schaltflächen auf derselben Seite haben, können Sie die resultierende Liste filtern, bevor Sie mit dem Element interagieren.

const buttons = document.getElementsByTagName("button");
const emptyCartButton = buttons.filter(button =>
  button.innerText.includes("Empty Cart")
)[0];
emptyCartButton.click();

Komplexe CSS-Selektoren verwenden

Manchmal weist das Element, mit dem Sie interagieren möchten, keine interessante Eindeutigkeitseigenschaft in seiner ID, seiner Klasse oder seinem Tag auf.

Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, diese Eindeutigkeit manuell und nur zu Testzwecken hinzuzufügen. Das Hinzufügen von #perf-test-empty-cart-button zu einer bestimmten Schaltfläche ist für Ihr Website-Markup unbedenklich und kann Ihre Testeinrichtung erheblich vereinfachen.

Diese Lösung ist jedoch manchmal nicht erreichbar: Möglicherweise haben Sie keinen Zugriff auf den Quellcode der Anwendung oder können keine neuen Versionen schnell bereitstellen. In solchen Situationen ist es nützlich, document.querySelector (und seine Variante document.querySelectorAll) zu kennen und komplexe CSS-Selektoren zu verwenden.

Hier sind einige Beispiele für das, was mit document.querySelector erreicht werden kann

// Select the first input with the `name="username"` property
document.querySelector("input[name='username']");
// Select all number inputs
document.querySelectorAll("input[type='number']");

// Select the first h1 inside the <section>
document.querySelector("section h1");

// Select the first direct descendent of a <nav> which is of type <img>
document.querySelector("nav > img");

Interessant ist hier, dass Sie die volle Kraft von CSS-Selektoren zur Verfügung haben. Ich ermutige Sie, einen Blick auf die immer nützliche MDN-Referenztabelle der Selektoren zu werfen!

Zum Äußersten gehen: XPath-Selektoren

Die XML Path Language (XPath), obwohl sehr leistungsfähig, ist schwieriger zu verstehen und zu warten als die oben genannten CSS-Lösungen. Ich muss sie selten verwenden, aber es ist definitiv nützlich zu wissen, dass sie existiert.

Ein solcher Fall ist, wenn Sie einen Knoten nach seinem Textwert auswählen möchten und nicht auf CSS-Selektoren zurückgreifen können. Hier ist ein praktischer Codeausschnitt für solche Fälle

// Returns the  that has the exact content 'Sep 16, 2015'
document.evaluate(
  "//span[text()='Sep 16, 2015']",
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
).singleNodeValue;

Ich werde nicht ins Detail gehen, wie man ihn benutzt, da dies mich vom Ziel dieses Artikels abbringen würde. Fairerweise muss ich sagen, dass ich nicht einmal weiß, was viele der obigen Parameter bedeuten. Ich kann jedoch definitiv die MDN-Dokumentation empfehlen, falls Sie mehr über das Thema lesen möchten.

Rezepte für häufige Anwendungsfälle

Im folgenden Abschnitt werden wir sehen, wie die Leistung in gängigen Anwendungsfällen von Single-Page-Anwendungen getestet werden kann. Ich nenne diese meine Testrezepte.

Um diese Rezepte zu veranschaulichen, werde ich die React Admin Demo-Website als Beispiel verwenden. React Admin ist ein Open-Source-Projekt, das sich dem Erstellen von Admin-Anwendungen und Back-Office-Systemen widmet.

Es ist ein typisches Beispiel für eine SPA, da es React (wie der Name schon sagt) verwendet, Remote-APIs aufruft, eine Login-Oberfläche hat, viele Formulare enthält und auf clientseitiges Routing setzt. Ich ermutige Sie, sich die Website kurz anzusehen (das Demo-Konto ist demo/demo), um eine Vorstellung davon zu bekommen, was wir erreichen wollen.

Authentifizierung und Formulare

Die Authentifizierungsseite von React Admin erfordert, dass der Benutzer einen Benutzernamen und ein Passwort eingibt

Intuitiv könnte man den folgenden Ansatz zur Ausfüllung des Formulars und zum Absenden wählen

const [usernameInput, passwordInput] = document.getElementsByTagName("input");
usernameInput.value = "demo"; // innerText could also be used here
passwordInput.value = "demo";
document.getElementsByTagName("button")[0].click();

Wenn Sie diese Befehle nacheinander in einer DevTools-Konsole auf der Anmeldeseite ausführen, sehen Sie, dass alle Felder zurückgesetzt werden und die Anmeldeanforderung beim Absenden durch Klicken auf die Schaltfläche fehlschlägt. Das Problem liegt darin, dass die neuen Werte, die wir mit .value() (oder .innerText()) setzen, nicht an den Redux-Store weitergeleitet und somit nicht vom Anwendung verarbeitet werden.

Was wir dann tun müssen, ist, React explizit mitzuteilen, dass sich der Wert geändert hat, damit es die interne Buchhaltung entsprechend aktualisiert. Dies kann mit der Event-Schnittstelle erreicht werden.

const updateInputValue = (input, newValue) => {
  let lastValue = input.value;
  input.value = newValue;
  let event = new Event("input", { bubbles: true });
  let tracker = input._valueTracker;
  if (tracker) {
    tracker.setValue(lastValue);
  }
  input.dispatchEvent(event);
};

Hinweis: Diese Lösung ist ziemlich hacky (selbst laut ihrem eigenen Autor), funktioniert aber für unsere Zwecke gut.

Unser aktualisiertes Skript wird

const updateInputValue = (input, newValue) => {
  let lastValue = input.value;
  input.value = newValue;
  let event = new Event("input", { bubbles: true });
  let tracker = input._valueTracker;
  if (tracker) {
    tracker.setValue(lastValue);
  }
  input.dispatchEvent(event);
};

const [usernameInput, passwordInput] = document.getElementsByTagName("input");

updateInputValue(usernameInput, "demo");
updateInputValue(passwordInput, "demo");

document.getElementsByTagName("button")[0].click();

Hurra! Sie können es in der Konsolen Ihres Browsers ausprobieren – es funktioniert wie am Schnürchen.

Die Übersetzung dies in ein tatsächliches WebPageTest-Skript (mit Skript-Schlüsselwörtern, Einzeilenbefehlen und tabulatorgetrennten Parametern) würde so aussehen

setEventName    Go to Login

navigate    https://marmelab.com/react-admin-demo/

setEventName    Login
    
exec    const updateInputValue = (input, newValue) => {  let lastValue = input.value;  input.value = newValue;  let event = new Event("input", { bubbles: true });  let tracker = input._valueTracker;  if (tracker) {  tracker.setValue(lastValue);  }  input.dispatchEvent(event);};

exec    const [usernameInput, passwordInput] = document.getElementsByTagName("input")

exec    updateInputValue(usernameInput, "demo")
exec    updateInputValue(passwordInput, "demo")

execAndWait document.getElementsByTagName("button")[0].click()

Beachten Sie, dass das Klicken auf die Schaltfläche "Absenden" uns zu einer neuen Seite führt und API-Aufrufe auslöst, was bedeutet, dass wir den Befehl execAndWait verwenden müssen.

Sie können die vollständigen Testergebnisse unter dieser Adresse einsehen. (Hinweis: Die Ergebnisse wurden möglicherweise von WebPageTest archiviert – Sie können den Test jedoch selbst noch einmal ausführen!)

Hier ist ein kurzes Video (aufgenommen von WebPageTest), in dem Sie sehen können, dass wir tatsächlich den Authentifizierungsschritt bestanden haben

Navigation zwischen Seiten

Bei traditionellen servergerenderten Seiten erfolgt die Navigation von einer URL zur nächsten in WebPageTest-Skripten über den Befehl navigate <url>.

Bei SPAs spiegelt dies jedoch nicht die Benutzererfahrung wider, da Client-seitiges Routing bedeutet, dass der Server keine Rolle bei der Navigation spielt. Das direkte Ansteuern einer URL würde die gemessene Leistung erheblich verlangsamen (aufgrund der Zeit, die das JavaScript-Framework zum Kompilieren, Parsen und Ausführen benötigt), eine Verlangsamung, die der Benutzer beim Seitenwechsel nicht erlebt. Da es entscheidend ist, den Benutzerfluss so gut wie möglich zu simulieren, müssen wir die Navigation auch auf der Client-Seite handhaben.

Hoffentlich ist das viel einfacher als das Ausfüllen von Formularen. Wir müssen nur den Link (oder die Schaltfläche) auswählen, der uns zur neuen Seite bringt, und darauf klicken! Lassen Sie uns unserem vorherigen Beispiel folgen, obwohl wir jetzt die Leistung der Rezensionsliste und einer einzelnen Rezensionsseite testen wollen.

Ein Benutzer würde normalerweise auf das Element "Rezensionen" im linken Navigationsmenü klicken und dann auf ein beliebiges Element in der Liste. Die Inspektion der Elemente in DevTools könnte zu folgender Auswahlstrategie führen

document.querySelector("a[href='#reviews']"); // select the Reviews link in the menu
document.querySelector("table tr"); // select the first item in the Reviews list

Da beide Klicks zu Seitenübergängen und API-Aufrufen führen (zum Abrufen der Rezensionen), müssen wir für das Skript das Schlüsselwort execAndWait verwenden.

setEventName    Go to Login

navigate    https://marmelab.com/react-admin-demo/

setEventName    Login

exec    const updateInputValue = (input, newValue) => {  let lastValue = input.value;  input.value = newValue;  let event = new Event("input", { bubbles: true });  let tracker = input._valueTracker;  if (tracker) {    tracker.setValue(lastValue);  }  input.dispatchEvent(event);};

exec    const [usernameInput, passwordInput] = document.getElementsByTagName("input")

exec    updateInputValue(usernameInput, "demo")
exec    updateInputValue(passwordInput, "demo")

execAndWait document.getElementsByTagName("button")[0].click()

setEventName    Go to Reviews

execAndWait document.querySelector("a[href='#/reviews']").click()

setEventName    Open a single Review

execAndWait document.querySelector("table tbody tr").click()

Hier ist das Video des vollständigen Skripts, das auf WebPageTest ausgeführt wird

Das Audit-Ergebnis von WebPageTest zeigt die Leistungsmetriken und Wasserfalldiagramme für jeden Schritt des Skripts, sodass wir die Leistung jedes API-Aufrufs und jeder Interaktion überwachen können.

Was ist mit der Kompatibilität von Internet Explorer 11?

WebPageTest ermöglicht uns die Auswahl des Standorts, des Browsers und der Netzwerkbedingungen für den Test. Internet Explorer 11 (IE11) gehört zu den verfügbaren Browseroptionen, und wenn Sie die vorherigen Skripte in IE11 ausführen, werden sie fehlschlagen.

Dies liegt an zwei Gründen

• Wir verwenden die ES6-Syntax (z. B. Pfeilfunktionen), die von IE11 nicht zu 100 % unterstützt wird.
• Die CustomEvent API, die wir für die Handhabung von Formularen verwenden, wird von IE11 nicht unterstützt.

Das ES6-Syntaxproblem kann durch die Umwandlung unserer Skripte in ES5-Syntax (keine Pfeilfunktionen, kein let und const, keine Array-Destrukturierung) behoben werden, was wie folgt aussehen könnte

setEventName    Go to Login

navigate    https://marmelab.com/react-admin-demo/

setEventName    Login

exec    var updateInputValue = function(input, newValue) {  var lastValue = input.value;  input.value = newValue;  var event = new Event("input", { bubbles: true });  var tracker = input._valueTracker;  if (tracker) {    tracker.setValue(lastValue);  }  input.dispatchEvent(event);};

exec    var usernameInput = document.getElementsByTagName("input")[0]
exec    var passwordInput = document.getElementsByTagName("input")[1]

exec    updateInputValue(usernameInput, "demo")
exec    updateInputValue(passwordInput, "demo")

execAndWait document.getElementsByTagName("button")[0].click()

setEventName    Go to Reviews

execAndWait document.querySelector("a[href='#/reviews']").click()

setEventName    Open a single Review

execAndWait document.querySelector("table tbody tr").click()

Um die Abwesenheit der CustomEvent-Unterstützung zu umgehen, können wir auf Polyfills zurückgreifen und manuell einen am Anfang des Skripts hinzufügen. Dieses Polyfill ist auf MDN verfügbar:

(function() {
  if (typeof window.CustomEvent === "function") return false;
  function CustomEvent(event, params) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent("CustomEvent");
    evt.initCustomEvent(
      event,
      params.bubbles,
      params.cancelable,
      params.detail
    );
    return evt;
  }
  CustomEvent.prototype = window.Event.prototype;
  window.CustomEvent = CustomEvent;
})();

Wir können dann alle Erwähnungen von Event durch CustomEvent ersetzen, das Polyfill für eine einzelne Zeile anpassen und fertig!

setEventName    Go to Login

navigate    https://marmelab.com/react-admin-demo/

exec    (function(){if(typeof window.CustomEvent==="function")return false;function CustomEvent(event,params){params=params||{bubbles:false,cancelable:false,detail:undefined};var evt=document.createEvent("CustomEvent");evt.initCustomEvent(event,params.bubbles,params.cancelable,params.detail);return evt}CustomEvent.prototype=window.Event.prototype;window.CustomEvent=CustomEvent})();

setEventName    Login

exec    var updateInputValue = function(input, newValue) {  var lastValue = input.value;  input.value = newValue;  var event = new CustomEvent("input", { bubbles: true });  var tracker = input._valueTracker;  if (tracker) {    tracker.setValue(lastValue);  }  input.dispatchEvent(event);};

exec    var usernameInput = document.getElementsByTagName("input")[0]
exec    var passwordInput = document.getElementsByTagName("input")[1]

exec    updateInputValue(usernameInput, "demo")
exec    updateInputValue(passwordInput, "demo")

execAndWait document.getElementsByTagName("button")[0].click()

setEventName    Go to Reviews

execAndWait document.querySelector("a[href='#/reviews']").click()

setEventName    Open a single Review

execAndWait document.querySelector("table tbody tr").click()

Und voilà!

Allgemeine Tipps und Tricks für WebPageTest-Skripting

Als letztes möchte ich ein paar Tipps und Tricks geben, die das Schreiben von WebPageTest-Skripten erleichtern. Schicken Sie mir gerne eine DM auf Twitter, wenn Sie Vorschläge haben!

Sicherheit zuerst!

Denken Sie daran, beide Datenschutz-Checkboxes anzukreuzen, wenn Ihr Skript sensible Daten, wie z. B. Anmeldedaten, enthält!

Dokumentation durchsuchen

Die WebPageTest Scripting-Dokumentation ist voll von Funktionen, die ich in diesem Artikel nicht behandelt habe, angefangen bei DNS-Überschreibung bis hin zu iPhone-Spoofing und sogar if/else-Bedingungen.

Wenn Sie ein neues Skript schreiben möchten, empfehle ich, sich zuerst die verfügbaren Parameter anzusehen und zu prüfen, ob einige davon helfen können, Ihr Skript einfacher oder robuster zu gestalten.

Lange Ladezustände

Manchmal dauert ein Remote-API-Aufruf (z. B. zum Abrufen der Rezensionen) sehr lange. Eine Ladeanzeige, wie ein Spinner, kann verwendet werden, um dem Benutzer mitzuteilen, dass er etwas warten soll, da etwas passiert.

WebPageTest versucht zu erkennen, wann eine Seite vollständig geladen ist, indem es feststellt, ob sich Dinge auf dem Bildschirm ändern. Wenn Ihre Ladeanzeige lange dauert, kann WebPageTest sie fälschlicherweise als integralen Bestandteil Ihres Seitendesigns betrachten und das Audit abbrechen, bevor der API-Aufruf zurückkommt – wodurch Ihre Messungen verkürzt werden.

Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, WebPageTest anzuweisen, mindestens eine bestimmte Dauer zu warten, bevor der Test beendet wird. Dies ist ein Parameter, der im Tab "Erweitert" verfügbar ist

Ihr Skript (und die Ergebnisse) lesbar halten

• Verwenden Sie Leerzeilen und Kommentare (//) großzügig, da einzeilige JavaScript-Befehle manchmal schwer zu verstehen sind.
• Halten Sie eine mehrzeilige Version als Referenz bereit und kürzen Sie alles auf eine Zeile, wenn Sie testen. Das hilft der Lesbarkeit enorm.
• Verwenden Sie setEventName, um Ihre verschiedenen "Schritte" zu benennen. Dies macht Tests lesbarer, da es die Abfolge der Seiten, die das Audit durchläuft, verdeutlicht und auch in den WebPageTest-Ergebnissen erscheint.

Iteratives Arbeiten an Ihren Skripten

• Stellen Sie zunächst sicher, dass Ihr Skript im Browser funktioniert. Entfernen Sie dazu die WebPageTest-Schlüsselwörter (das erste Wort jeder Zeile Ihres Skripts) und kopieren und fügen Sie dann jede Zeile in die Browserkonsole ein, um zu überprüfen, ob alles Schritt für Schritt wie erwartet funktioniert.
• Sobald Sie bereit sind, Ihren Test an WebPageTest zu übermitteln, tun Sie dies zunächst mit sehr leichten Einstellungen: nur ein Lauf, ein schneller Browser (hüstel – nicht IE11 – hüstel), keine Netzwerkdrosselung, keine wiederholte Ansicht, eine gut dimensionierte Instanz (Dulles, VA, hat normalerweise gute Reaktionszeiten). Dies hilft Ihnen, Fehler viel schneller zu erkennen und zu beheben.

Automatisierung Ihrer Skripte

Ihr Testskript läuft reibungslos und Sie beginnen, Performance-Berichte Ihrer Single-Page-App zu erhalten. Da Sie neue Funktionen ausliefern, ist es wichtig, die Leistung regelmäßig zu überwachen, um Regressionen frühzeitig zu erkennen.

Um dieses Problem anzugehen, arbeite ich derzeit an Falco, einem bald Open-Source-verfügbaren WebPageTest-Test-Runner. Falco kümmert sich um die Automatisierung Ihrer Audits und präsentiert die Ergebnisse in einer leicht lesbaren Oberfläche, während Sie die vollständigen Berichte lesen können, wenn Sie sie benötigen. Sie können mir auf Twitter folgen, um zu erfahren, wann es Open Source geht, und mehr über Web-Performance und WebPageTest zu erfahren!