In diesem Tutorial zeige ich Ihnen Schritt für Schritt, wie Sie ein einfaches Tool in node.js erstellen, um Google Lighthouse -Audits über die Befehlszeile auszuführen, die Berichte zu speichern, die sie im JSON -Format erstellen, und diese dann zu vergleichen, damit die Webleistung beobachtet werden kann, wenn die Website w?chst und sich entwickelt.

Ich hoffe, dass dies als gute Einführung für jeden Entwickler dienen kann, der daran interessiert ist, dass er programmatisch mit Google Lighthouse zusammenarbeitet.

Aber zuerst für die Uneingeweihten…

Was ist Google Lighthouse?

Google Lighthouse ist eines der am besten automatischen Tools, die auf dem Utility-Gürtel eines Webentwicklers verfügbar sind. Sie k?nnen eine Website in einer Reihe von Schlüsselbereichen schnell prüfen, die zusammen ein Ma? für die Gesamtqualit?t bilden k?nnen. Diese sind:

• Leistung
• Zug?nglichkeit
• Best Practices
• SEO
• Progressive Web -App

Sobald das Audit abgeschlossen ist, wird ein Bericht auf dem generiert, was Ihre Website gut macht… und nicht so gut, wobei letztere als Indikator für die n?chsten Schritte dienen sollen, um die Seite zu verbessern.

So sieht ein vollst?ndiger Bericht aus.

Zusammen mit anderen allgemeinen Diagnostik- und Web-Leistungsmetriken besteht eine wirklich nützliche Funktion des Berichts darin, dass jeder der Schlüsselbereiche in farbcodierte Bewertungen zwischen 0 und 100 aggregiert wird.

Dies erm?glicht es den Entwicklern nicht nur, die Qualit?t einer Website ohne weitere Analysen schnell zu messen, sondern erm?glicht es auch nicht technische Leute wie Stakeholder oder Kunden, zu verstehen.

Dies bedeutet beispielsweise, dass es viel einfacher ist, den Sieg mit Heather aus dem Marketing zu teilen, nachdem sie Zeit damit verbracht hat, die Zug?nglichkeit der Website zu verbessern, da sie die Anstrengungen mehr zu sch?tzen wissen, nachdem sie den Lighthouse -Barrierefreiheitswert um 50 Punkte in das Grün stieg.

Aber ebenso wie Simon, der Projektmanager, versteht m?glicherweise nicht, welchen Speed ??-Index oder der erste inhaltliche Farbe bedeutet, aber wenn er den Lighthouse -Bericht zeigt, der die Website -Performance -Punktzahl tief im Rot zeigt, wei? er, dass Sie noch Arbeit zu tun haben.

Wenn Sie sich in Chrome oder der neuesten Version von Edge befinden, k?nnen Sie sich jetzt mit Devtools ein Lighthouse -Audit ausführen. So wie: wie:

Sie k?nnen auch ein Lighthouse -Audit online über PageSpeed ??-Erkenntnisse oder über beliebte Leistungstools wie WebPagetest durchführen.

Heute interessieren wir uns jedoch nur für Lighthouse als Knotenmodul, da wir das Tool programmgesteuert verwenden k?nnen, um Web -Leistungsmetriken zu prüfen, aufzunehmen und zu vergleichen.

Lassen Sie uns herausfinden, wie.

Aufstellen

Wenn Sie es noch nicht haben, brauchen Sie Node.js. Es gibt eine Million verschiedene M?glichkeiten, es zu installieren. Ich benutze den Homebrew -Paket -Manager, aber Sie k?nnen auch einen Installateur direkt von der Node.js -Website herunterladen, wenn Sie es vorziehen. Dieses Tutorial wurde mit node.js v10.17.0 geschrieben, wird jedoch sehr wahrscheinlich bei den meisten in den letzten Jahren ver?ffentlichten Versionen gut funktionieren.

Sie werden auch Chrome installiert ben?tigen, da wir so die Leuchtturmprüfungen ausführen werden.

Erstellen Sie als n?chstes ein neues Verzeichnis für das Projekt und dann in der Konsole ein CD. Führen Sie dann NPM Init aus, um eine Package.json -Datei zu erstellen. Zu diesem Zeitpunkt würde ich empfehlen, die Eingabetaste immer wieder zu verprügeln, um so viel wie m?glich davon zu überspringen, bis die Datei erstellt wurde.

Lassen Sie uns nun eine neue Datei im Projektverzeichnis erstellen. Ich habe meine Lh.js angerufen, aber ich z?gern Sie nicht, es so zu nennen, was Sie wollen. Dies enth?lt das gesamte JavaScript für das Tool. ?ffnen Sie es in Ihrem Texteditor Ihrer Wahl und schreiben Sie vorerst eine Konsole.log -Anweisung.

 console.log ('Hallo Welt');

Stellen Sie dann in der Konsole sicher, dass Ihr CWD (aktuelles Arbeitsverzeichnis) Ihr Projektverzeichnis ist, und führen Sie den Knoten Lh.js aus und ersetzen Sie meinen Dateinamen für alles, was Sie verwendet haben.

Sie sollten sehen:

 $ node lh.js
Hallo Welt

Wenn nicht, überprüfen Sie, ob Ihre Knoteninstallation funktioniert, und Sie befinden sich definitiv im richtigen Projektverzeichnis.

Nun, das ist nicht im Weg, wir k?nnen das Werkzeug selbst entwickeln.

Chrom mit node.js ?ffnen

Installieren wir die erste Abh?ngigkeit unseres Projekts: Leuchtturm selbst.

 NPM Installieren Sie Leuchtturm-Save-dev

Dadurch wird ein NODE_MODULES -Verzeichnis erstellt, das alle Dateien des Pakets enth?lt. Wenn Sie Git verwenden, sollten Sie es nur mit dieser. Gitignore -Datei hinzufügen.

In Lh.js m?chten Sie als n?chstes die Testkonsole (log () l?schen und das Lighthouse -Modul importieren, damit Sie sie in Ihrem Code verwenden k?nnen. Like SO:

 Const Lighthouse = Request ('Lighthouse');

Darunter müssen Sie auch ein Modul namens Chrome-Leiter importieren, bei dem es sich um eine der Abh?ngigkeiten des Leuchtturms handelt und es den Knoten erm?glicht, Chrome für sich selbst zu starten, damit das Audit ausgeführt werden kann.

 Const Lighthouse = Request ('Lighthouse');
const chromelauncher = require ('Chrom-Launcher');

Jetzt, da wir Zugriff auf diese beiden Module haben, erstellen wir ein einfaches Skript, das nur Chrome ?ffnet, ein Lighthouse -Audit ausführt und dann den Bericht an die Konsole druckt.

Erstellen Sie eine neue Funktion, die eine URL als Parameter akzeptiert. Da wir dies mit node.js ausführen, k?nnen wir die ES6 -Syntax sicher verwenden, da wir uns keine Sorgen um diese l?stigen Internet -Explorer -Benutzer machen müssen.

 const stirpchrome = (url) => {

}

Innerhalb der Funktion müssen wir als erstes das Chrom mit dem von uns importierten Chrom-Launcher-Modul ?ffnen und an das Argument senden, das durch den URL-Parameter weitergeleitet wird.

Wir k?nnen dies mit der Start () -Methode und der Starturl -Option tun.

 const stirpchrome = url => {
  chromelauncher.launch ({{
    Starturl: URL
  });
};

Wenn Sie die Funktion unten aufrufen und eine URL Ihrer Auswahl übergeben, wird das Chrome bei der URL ge?ffnet, wenn das Knotenskript ausgeführt wird.

 LaunchCrome ('https://www.lukeharrison.dev');

Die Startfunktion gibt tats?chlich ein Versprechen zurück, mit dem wir auf ein Objekt zugreifen k?nnen, das einige nützliche Methoden und Eigenschaften enth?lt.

Beispielsweise k?nnen wir mit dem folgenden Code Chrom ?ffnen, das Objekt in die Konsole drucken und Chrom drei Sekunden sp?ter mit seiner Kill () -Methode schlie?en.

 const stirpchrome = url => {
  Chromelauncher
    .Start({
      Starturl: URL
    })
    .then (Chrome => {
      console.log (chrome);
      setTimeout (() => Chrome.kill (), 3000);
    });
};

LaunchCrome ("https://www.lukeharrison.dev");

Nachdem wir Chrome herausgefunden haben, gehen wir zum Leuchtturm.

Leuchtturm programmatisch ausführen

Lassen Sie uns zun?chst unsere Funktion "startChrome () in etwas mehr reflektierender seiner endgültigen Funktionalit?t umbenennen: Startchromeandrunlighthouse (). Mit dem schwierigen Teil k?nnen wir jetzt das Lighthouse -Modul verwenden, das wir zuvor im Tutorial importiert haben.

In der damaligen Funktion des Chrome Launcher, die nur sobald der Browser ge?ffnet ist, werden wir das URL -Argument der Funktion über den Leuchtturm übergeben und eine Prüfung dieser Website ausl?sen.

 const stirpchromeandrunlighthouse = url => {
  Chromelauncher
    .Start({
      Starturl: URL
    })
    .then (Chrome => {
      const opts = {
        Port: Chrome.port
      };
      Leuchtturm (URL, Opts);
    });
};

LaunchCromeandrunLightHouse ("https://www.lukeharrison.dev");

Um die Lighthouse -Instanz mit unserem Chrom -Browserfenster zu verknüpfen, müssen wir zusammen mit der URL seinen Port übergeben.

Wenn Sie dieses Skript jetzt ausführen, werden Sie in der Konsole auf einen Fehler drücken:

 (Knoten: 47714) UnbeschlossenesPromiserjektionSWARNING: Fehler: Sie haben wahrscheinlich mehrere Registerkarten für denselben Ursprung ge?ffnet.

Um dies zu beheben, müssen wir nur die Starturl -Option von Chrome Launcher entfernen und die URL -Navigation von Lighthouse von hier aus verarbeiten lassen.

 const stirpchromeandrunlighthouse = url => {
  chromelauncher.launch (). Dann (Chrome => {
    const opts = {
      Port: Chrome.port
    };
    Leuchtturm (URL, Opts);
  });
};

Wenn Sie diesen Code ausführen, werden Sie feststellen, dass etwas definitiv zu passieren scheint. Wir erhalten einfach kein Feedback in der Konsole, um zu best?tigen, dass das Lighthouse -Audit definitiv ausgeführt wurde, und die Chrome -Instanz schlie?t sich auch nicht wie zuvor.

Zum Glück gibt die Lighthouse () -Funktion ein Versprechen zurück, mit dem wir auf die Prüfungsergebnisse zugreifen k?nnen.

Lassen Sie uns Chrome abt?ten und diese Ergebnisse dann über die Berichtseigenschaft des Ergebnisobjekts an das Terminal im JSON -Format drucken.

 const stirpchromeandrunlighthouse = url => {
  chromelauncher.launch (). Dann (Chrome => {
    const opts = {
      Port: Chrome.port
    };
    Leuchtturm (URL, Opts) .then (Ergebnisse => {
      chrome.kill ();
      console.log (results.Report);
    });
  });
};

Obwohl die Konsole nicht der beste Weg ist, um diese Ergebnisse anzuzeigen, wird das Einfügen hier den Bericht in ihrem gesamten Ruhm angezeigt, wenn Sie sie in Ihre Zwischenablage kopieren und den Lighthouse Report Viewer besuchen.

Zu diesem Zeitpunkt ist es wichtig, den Code ein wenig aufzur?umen, um die Funktion der LaunchCromeandrunlighthouse () zu erstellen, die den Bericht zurückgibt, sobald er ausgeführt wird. Dies erm?glicht es uns, den Bericht sp?ter zu verarbeiten, ohne zu einer unordentlichen Pyramide von JavaScript zu führen.

 Const Lighthouse = Request ("Lighthouse");
const chromelauncher = require ("Chrom-Leiter");

const stirpchromeandrunlighthouse = url => {
  return Chromelauncher.launch (). Dann (Chrome => {
    const opts = {
      Port: Chrome.port
    };
    Return Lighthouse (URL, Opts) .then (Ergebnisse => {
      return Chrome.kill (). Dann (() => results.Report);
    });
  });
};

LaunchCromeandrunLightHouse ("https://www.lukeharrison.dev") .then (resultation => {
  console.log (Ergebnisse);
});

Eine Sache, die Sie vielleicht bemerkt haben, ist, dass unser Tool im Moment nur eine einzige Website prüfen kann. ?ndern wir dies, damit Sie die URL als Argument über die Befehlszeile übergeben k?nnen.

Um die Schmerzen bei der Arbeit mit Befehlszeilenargumenten zu nehmen, werden wir sie mit einem Paket namens Yargs behandeln.

 NPM Install-Save-dev Yargs

Importieren Sie es dann zusammen mit Chrome Launcher und Lighthouse ganz oben in Ihrem Skript. Wir brauchen hier nur seine Argv -Funktion.

 Const Lighthouse = Request ('Lighthouse');
const chromelauncher = require ('Chrom-Launcher');
const argv = fordert ('yargs'). argv;

Dies bedeutet, wenn Sie ein Befehlszeilenargument wie SO übergeben:

 Node lh.js --url https://www.google.co.uk

… Sie k?nnen auf das Argument im Skript wie SO zugreifen:

 const url = argv.url // https://www.google.co.uk

Bearbeiten wir unser Skript, um das URL -Argument der Befehlszeile an den URL -Parameter der Funktion zu übergeben. Es ist wichtig, ein wenig Sicherheitsnetz über die IF -Anweisung und Fehlermeldung hinzuzufügen, falls kein Argument übergeben wird.

 if (argv.url) {
  LaunchCromeandrunLightHouse (argv.url) .then (resultation => {
    console.log (Ergebnisse);
  });
} anders {
  Wirf "Du hast keine URL an den Leuchtturm übergeben";
}

Tada! Wir haben ein Tool, das Chrome startet und programmatisch ein Leuchtturm -Audit ausführt, bevor der Bericht im JSON -Format an das Terminal gedruckt wird.

Sparen von Leuchtturmberichten

Wenn der Bericht an die Konsole gedruckt wird, ist dies nicht sehr nützlich, da Sie seine Inhalte nicht einfach lesen und nicht für die zukünftige Verwendung gespeichert sind. In diesem Abschnitt des Tutorials ?ndern wir dieses Verhalten, sodass jeder Bericht in eine eigene JSON -Datei gespeichert wird.

Um Berichte von verschiedenen Websites zu verhindern, die sich verwechseln, organisieren wir sie wie so:

• lukeharrison.dev
  • 2020-01-31t18: 18: 12.648z.json
  • 2020-01-31t19: 10: 24.110z.json
• cnn.com
  • 2020-01-14T22: 15: 10.396z.json
• lh.js

Wir werden die Berichte mit einem Zeitstempel benennen, der angibt, wann das Datum/die Uhrzeit des Berichts erstellt wurde. Dies bedeutet, dass keine zwei Berichtsdateinamen jemals gleich sein werden, und es hilft uns, zwischen Berichten leicht zu unterscheiden.

Es gibt ein Problem mit Windows, das unsere Aufmerksamkeit erfordert: The Colon (:) ist ein illegaler Zeichen für Dateinamen. Um dieses Problem zu mildern, werden wir Colons durch Unterstriche (_) ersetzen, sodass ein typischer Berichts -Dateiname so aussieht:

• 2020-01-31T18_18_12.648z.json

Erstellen des Verzeichnisses

Zun?chst müssen wir das URL -Argument der Befehlszeilen manipulieren, damit wir es für den Verzeichnisnamen verwenden k?nnen.

Dies beinhaltet mehr als nur das Entfernen des WWW, da die auf Webseiten ausgeführten Audits berücksichtigt werden muss, die nicht am Root sitzen (z. B. www.foo.com/bar), da die Schr?gstriche ungültige Zeichen für Verzeichnisnamen sind.

Für diese URLs ersetzen wir die ungültigen Zeichen erneut durch Unterstriche. Wenn Sie ein Audit unter https://www.foo.com/bar ausführen, lautet der resultierende Verzeichnisname, der den Bericht enth?lt, foo.com_bar.

Um den Umgang mit URLs zu erleichtern, verwenden wir ein nationales Node.js -Modul namens URL. Dies kann wie jedes andere Paket importiert werden und ohne es thepackage.json hinzufügen und über NPM ziehen müssen.

 Const Lighthouse = Request ('Lighthouse');
const chromelauncher = require ('Chrom-Launcher');
const argv = fordert ('yargs'). argv;
const url = erfordern ('url');

Lassen Sie es uns als n?chstes verwenden, um ein neues URL -Objekt zu instanziieren.

 if (argv.url) {
  const urlobj = neue URL (argv.url);

  LaunchCromeandrunLightHouse (argv.url) .then (resultation => {
    console.log (Ergebnisse);
  });
}

Wenn Sie Urlobj in die Konsole drucken würden, sehen Sie viele nützliche URL -Daten, die wir verwenden k?nnen.

 $ node lh.js --url https://www.foo.com/bar
URL {
  href: 'https://www.foo.com/bar',
  Ursprung: 'https://www.foo.com',
  Protokoll: 'Https:',
  Benutzername: '',
  Passwort: '',
  Host: 'www.foo.com',
  Hostname: 'www.foo.com',
  Hafen: '',
  Pfadname: '/Bar',
  suchen: '',
  SearchParams: urlSearchParams {},
  Hash: ''
}

Erstellen Sie eine neue Variable namens DirName und verwenden Sie die String ersetzt () -Methode auf der Hosteigenschaft unserer URL, um das WWW zus?tzlich zum HTTPS -Protokoll zu entfernen:

 const urlobj = neue URL (argv.url);
lass DirName = urlobj.host.replace ('www.', '');

Wir haben hier Let Let verwendet, was im Gegensatz zu const neu zugewiesen werden kann, da wir die Referenz aktualisieren müssen, wenn die URL einen Pfadnamen hat, um Schr?gstriche durch Unterstriche zu ersetzen. Dies kann mit einem regul?ren Ausdrucksmuster erfolgen und sieht so aus:

 const urlobj = neue URL (argv.url);
lass DirName = urlobj.host.replace ("www.", "");
if (urlobj.PathName! == "/") {
  DIRNAME = DIRNAME URLOBJ.PATHNAME.REPLACE (/\ // g, "_");
}

Jetzt k?nnen wir das Verzeichnis selbst erstellen. Dies kann durch die Verwendung eines anderen nativen Node.js -Moduls mit dem Namen FS (kurz für "Dateisystem") erfolgen.

 Const Lighthouse = Request ('Lighthouse');
const chromelauncher = require ('Chrom-Launcher');
const argv = fordert ('yargs'). argv;
const url = erfordern ('url');
const fs = erfordern ('fs');

Wir k?nnen seine mkdir () -Methode verwenden, um ein Verzeichnis zu erstellen, müssen jedoch zun?chst ihre existsync () -Methode verwenden, um zu überprüfen, ob das Verzeichnis bereits vorhanden ist, da Node.js sonst einen Fehler werfen würde:

 const urlobj = neue URL (argv.url);
lass DirName = urlobj.host.replace ("www.", "");
if (urlobj.PathName! == "/") {
  DIRNAME = DIRNAME URLOBJ.PATHNAME.REPLACE (/\ // g, "_");
}
if (! fs.existsSync (DirName)) {
  fs.mkdirsync (DirName);
}

Das Testen des Skripts an dem Punkt sollte dazu führen, dass ein neues Verzeichnis erstellt wird. übergabe https://www.bbc.co.uk/news als URL -Argument würde zu einem Verzeichnis namens BBC.co.uk_News führen.

Speichern des Berichts

In der damaligen Funktion für LaunchCromeandrunlighthouse () m?chten wir die vorhandene Konsole durch Logik ersetzen, um den Bericht an die Festplatte zu schreiben. Dies kann mit der WriteFile () -Methode des FS -Moduls durchgeführt werden.

 LaunchCromeandrunLightHouse (argv.url) .then (resultation => {
  fs.writeFile ("report.json", resulting, err => {
    Wenn (err) err?ste;
  });
});

Der erste Parameter repr?sentiert den Dateinamen, der zweite ist der Inhalt der Datei und der dritte ist ein Rückruf, der ein Fehlerobjekt enth?lt, sollte w?hrend des Schreibvorgangs etwas schief gehen. Dies würde eine neue Datei namens Report.json erstellen, die den zurückgekehrten Lighthouse -Bericht JSON -Objekt enth?lt.

Wir müssen es noch an das richtige Verzeichnis mit einem Zeitstempel als Dateinamen senden. Der erstere ist einfach - wir übergeben die zuvor erstellte DirName -Variable wie so:

 LaunchCromeandrunLightHouse (argv.url) .then (resultation => {
  fs.writeFile (`$ {Dirname}/report.json`, Ergebnisse, err => {
    Wenn (err) err?ste;
  });
});

Letzteres verlangt jedoch, dass wir einen Zeitstempel des Erstellens des Berichts irgendwie abrufen. Zum Glück erfasst der Bericht selbst dies als Datenpunkt und wird als FetchTime -Eigenschaft gespeichert.

Wir müssen nur daran denken, Colons (:) für Unterstriche (_) auszutauschen, damit es mit dem Windows -Dateisystem gut spielt.

 LaunchCromeandrunLightHouse (argv.url) .then (resultation => {
  fs.writeFile (
    `$ {Dirname}/$ {resultes [" fetchTime "]. Ersetzen (/:/g," _ ")}. Json`,,
    Ergebnisse,
    err => {
      Wenn (err) err?ste;
    }
  );
});

Wenn Sie dies jetzt ausführen würden, anstatt einen Zeitstempel.

 UnbeschichtetePromiserjektionWarning: TypeError: Eigentum "Ersetzen" von Undefined kann nicht lesen

Dies geschieht, weil der Leuchtturm derzeit den Bericht im JSON -Format zurückgibt und nicht ein von JavaScript konsumierbares Objekt.

Zum Glück k?nnen wir den Leuchtturm nur auffordern, den Bericht als regul?res JavaScript -Objekt zurückzugeben, anstatt den JSON selbst zu analysieren.

Dies erfordert die Bearbeitung der folgenden Zeile von:

 return Chrome.kill (). Dann (() => results.Report);

…Zu:

 return Chrome.kill (). Dann (() => results.lhr);

Wenn Sie nun das Skript erneut ausführen, wird die Datei korrekt benannt. Wenn es jedoch ge?ffnet wird, ist es nur Inhalte leider…

 [Objektobjekt]

Dies liegt daran, dass wir jetzt wie zuvor das gegenteilige Problem haben. Wir versuchen, ein JavaScript -Objekt zu rendern, ohne es zuerst in ein JSON -Objekt zu streiten.

Die L?sung ist einfach. Um zu vermeiden, dass dieses riesige Objekt Ressourcen zum Analysieren oder Streben von diesem riesigen Objekt verschwenden muss, k?nnen wir beide Typen aus dem Leuchtturm zurückgeben:

 Return Lighthouse (URL, Opts) .then (Ergebnisse => {
  return Chrome.kill (). Dann (() => {
    zurückkehren {
      JS: results.lhr,
      JSON: results.Report
    };
  });
});

Anschlie?end k?nnen wir die Writefile -Instanz dazu ?ndern:

 fs.writeFile (
  `$ {Dirname}/$ {results.js [" FetchTime "]. Ersetzen (/:/g," _ ")}. Json`,,
  results.json,
  err => {
    Wenn (err) err?ste;
  }
);

Sortiert! Nach Abschluss des Lighthouse -Audits sollte unser Tool den Bericht nun in einer Datei mit einem einzigartigen Zeitstempelfilenamen in einem nach der Website -URL benannten Verzeichnis speichern.

Dies bedeutet, dass Berichte jetzt viel effizienter organisiert sind und sich gegenseitig nicht überschreien, egal wie viele Berichte gespeichert sind.

Vergleich von Leuchtturmberichten

Bei der allt?glichen Entwicklung kann ich, wenn ich mich auf die Verbesserung der Leistung konzentriere, die F?higkeit, Berichte direkt in der Konsole zu vergleichen, sehr schnell zu vergleichen und zu prüfen, ob ich in die richtige Richtung bin, ?u?erst nützlich sein. In diesem Sinne sollten die Anforderungen dieser Vergleichsfunktionalit?t sein:

1. Wenn ein früherer Bericht bereits für dieselbe Website vorhanden ist, wenn ein Leuchtturm -Audit abgeschlossen ist, führen Sie automatisch einen Vergleich damit durch und zeigen ?nderungen der wichtigsten Leistungsmetriken an.
2. Ich sollte auch in der Lage sein, wichtige Leistungskennzahlen aus zwei beliebigen Berichten aus zwei beliebigen Websites zu vergleichen, ohne einen neuen Leuchtturmbericht erstellen zu müssen, den ich m?glicherweise nicht ben?tige.

Welche Teile eines Berichts sollten verglichen werden? Dies sind die im Rahmen eines Leuchtturmberichts gesammelten numerischen Schlüsselleistungskennzahlen. Sie geben Einblicke in die objektive und wahrgenommene Leistung einer Website.

Darüber hinaus sammelt Lighthouse auch andere Metriken, die in diesem Teil des Berichts nicht aufgeführt sind, aber noch in einem geeigneten Format sind, um in den Vergleich einbezogen zu werden. Diese sind:

• Zeit zum ersten Byte - Zeit zum ersten Byte identifiziert die Zeit, zu der Ihr Server eine Antwort sendet.
• Gesamtblockierungszeit - Summe aller Zeitr?ume zwischen FCP und Zeit bis interaktiv, wenn die Aufgabenl?nge 50 ms überschritten wurde, ausgedrückt in Millisekunden.
• Gesch?tzte Eingabelatenz - Die gesch?tzte Eingabelatenz ist eine Sch?tzung, wie lange Ihre App in Millisekunden w?hrend des gesch?ftigsten 5S -Fensters des Seitenlasts auf Benutzereingaben reagiert. Wenn Ihre Latenz h?her als 50 ms ist, k?nnen Benutzer Ihre App als Verz?gerung wahrnehmen.

Wie sollte der metrische Vergleich an die Konsole ausgegeben werden? Wir werden einen einfachen prozentualen Vergleich mit den alten und neuen Metriken erstellen, um zu sehen, wie sie sich vom Bericht zu Bericht ver?ndert haben.

Um ein schnelles Scannen zu erm?glichen, werden wir auch individuelle Metriken f?rben, je nachdem, ob sie schneller, langsamer oder unver?ndert sind.

Wir werden auf diese Ausgabe streben:

Vergleichen Sie den neuen Bericht mit dem vorherigen Bericht

Erstellen wir mit dem Erstellen einer neuen Funktion namens CompyReReports () direkt unter unserer Funktion startchromeandrunlighthouse (), die die gesamte Vergleichslogik enth?lt. Wir geben ihm zwei Parameter - von - von bis hin zu den beiden für den Vergleich verwendeten Berichten.

Im Moment drucken wir als Platzhalter nur einige Daten aus jedem Bericht an die Konsole aus, um zu best?tigen, dass sie sie richtig empfangen.

 const vergleicheports = (von, bis) => {
  console.log (aus ["Finalurl"] "von [" FetchTime "]);
  console.log (an ["Finalurl"] "zu [" FetchTime "]);
};

Da dieser Vergleich nach der Erstellung eines neuen Berichts beginnen würde, sollte die Logik zur Ausführung dieser Funktion in der damaligen Funktion für Startchromeandrunlighthouse () sitzen.

Wenn Sie beispielsweise 30 Berichte in einem Verzeichnis haben, müssen wir feststellen, welches der neueste ist und es als vorheriger Bericht festlegen, mit dem der neue verglichen wird. Zum Glück haben wir uns bereits entschlossen, einen Zeitstempel als Dateiname für einen Bericht zu verwenden. Dadurch gibt es uns etwas zum Arbeiten.

Zun?chst müssen wir vorhandene Berichte sammeln. Um diesen Vorgang zu vereinfachen, installieren wir eine neue Abh?ngigkeit namens GLIB, die bei der Suche nach Dateien eine Musteranpassung erm?glicht. Dies ist kritisch, da wir nicht vorhersagen k?nnen, wie viele Berichte existieren oder wie sie genannt werden.

Installieren Sie es wie jede andere Abh?ngigkeit:

 NPM Installieren Sie GLIP-Save-dev

Importieren Sie es dann genauso wie gewohnt oben in der Datei:

 Const Lighthouse = Request ('Lighthouse');
const chromelauncher = require ('Chrom-Launcher');
const argv = fordert ('yargs'). argv;
const url = erfordern ('url');
const fs = erfordern ('fs');
const glob = fordert ('glob');

Wir werden Glob verwenden, um alle Berichte im Verzeichnis zu sammeln, die wir bereits über die DirName -Variable kennen. Es ist wichtig, seine Synchronisierungsoption auf True festzulegen, da die Ausführung von JavaScript nicht weitergeht, bis wir wissen, wie viele andere Berichte vorhanden sind.

 LaunchCromeandrunLightHouse (argv.url) .then (resultation => {
  const prevreports = glob (`$ {dirname}/*. json`, {{
    Synchronisation: Richtig
  });

  // et al

});

Dieser Prozess gibt eine Reihe von Pfaden zurück. Also, wenn das Berichtsverzeichnis so aussah:

• lukeharrison.dev
  • 2020-01-31T10_18_12.648z.json
  • 2020-01-31T10_18_24.110z.json

… Dann würde das resultierende Array so aussehen:

 [
 'Lukeharrison.dev/2020-01-31t10_18_12.648z.json',
 'lukeharrison.dev/2020-01-31t10_18_24.110z.json'
]

Da wir nur einen Vergleich durchführen k?nnen, wenn ein früherer Bericht vorhanden ist, verwenden wir dieses Array als Bedingung für die Vergleichslogik:

 const prevreports = glob (`$ {dirname}/*. json`, {{
  Synchronisation: Richtig
});

if (prevreports.length) {
}

Wir haben eine Liste von Berichtsdateipfaden und müssen ihre Zeitstempelfilen vergleichen, um festzustellen, welches die neueste ist.

Dies bedeutet, dass wir zun?chst eine Liste aller Dateinamen sammeln, irrelevante Daten wie Verzeichnisnamen abschneiden und darauf achten, die Unterstriche (_) durch Colons zurückzuziehen (:), um sie wieder in gültige Daten zu verwandeln. Der einfachste Weg, dies zu tun, besteht darin, den Pfad zu verwenden, ein weiteres natives Node.js -natives Modul.

 const path = fordern ('path');

übergeben des Pfades als Argument an seine Parse -Methode wie SO:

 path.parse ('lukeharrison.dev/2020-01-31t10_18_24.110z.json');

Gibt dieses nützliche Objekt zurück:

 {
  Wurzel: '',
  Dir: 'Lukeharrison.dev',
  Basis: '2020-01-31T10_18_24.110z.json',
  ext: '.json',
  Name: '2020-01-31T10_18_24.110z'
}

Um eine Liste aller Zeitnamen des Zeitstempelfils zu erhalten, k?nnen wir dies tun:

 if (prevreports.length) {
  Daten = [];
  für (Bericht in den Vorbereitungen) {
    Dates.push (
      Neues Datum (Path.Parse (PrevReports [Bericht]). Name.Replace (/_/g, ":"))
    );
  }
}

Wie wieder aussah, wenn unser Verzeichnis aussah:

• lukeharrison.dev
  • 2020-01-31T10_18_12.648z.json
  • 2020-01-31T10_18_24.110z.json

Würde zu:

 [
 '2020-01-31T10: 18: 12.648z',
 '2020-01-31T10: 18: 24.110Z'
]

Eine nützliche Sache an Daten ist, dass sie standardm??ig von Natur aus vergleichbar sind:

 const alpha = neues Datum ('2020-01-31');
const bravo = neues Datum ('2020-02-15');

console.log (alpha> bravo); // FALSCH
console.log (bravo> alpha); // WAHR

Durch die Verwendung einer Reduzierung der Funktion k?nnen wir unsere Datumsangaben bis zu den jüngsten überresten reduzieren:

 Daten = [];
für (Bericht in den Vorbereitungen) {
  dates.push (neues Datum (path.parse (prevReports [report]). name.replace (/_/g, ":")));
}
const max = dates.Reduce (Funktion (a, b) {
  return math.max (a, b);
});

Wenn Sie den Inhalt von Max in die Konsole ausdrucken würden, würde er einen Unix -Zeitstempel aufwerfen. Jetzt müssen wir nur noch eine weitere Zeile hinzufügen, um unser letztes Datum wieder in das richtige ISO -Format umzuwandeln:

 const max = dates.Reduce (Funktion (a, b) {
 return math.max (a, b);
});
const incremeReport = neues Datum (max) .toisString ();

Angenommen, dies sind die Liste von Berichten:

• 2020-01-31T23_24_41.786z.json
• 2020-01-31T23_25_36.827z.json
• 2020-01-31T23_37_56.856z.json
• 2020-01-31T23_39_20.459z.json
• 2020-01-31T23_56_50.959z.json

Der Wert des kürzlich erschienenen Bereichs w?re 2020-01-31T23: 56: 50,959Z.

Nachdem wir den neuesten Bericht kennen, müssen wir als n?chstes seinen Inhalt extrahieren. Erstellen Sie eine neue Variable namens neuere Berichte unter der jüngsten Reportvariablen und weisen Sie ihr eine leere Funktion zu.

Da wir wissen, dass diese Funktion immer ausführen muss, anstatt sie manuell aufzurufen, ist es sinnvoll, sie in ein IFFE zu machen (sofort auf den Funktionsausdruck aufgerufen), der von selbst ausgeführt wird, wenn der JavaScript -Parser sie erreicht. Dies bedeutet durch die zus?tzliche Klammern:

 const in LineportContents = (() => {

}) ();

In dieser Funktion k?nnen wir den Inhalt des neuesten Berichts mit der ReadFileSync () -Methode des nativen FS -Moduls zurückgeben. Da dies im JSON -Format sein wird, ist es wichtig, es in ein regul?res JavaScript -Objekt zu analysieren.

 const in LineportContents = (() => {
  const output = fs.readFilesync (
    DirName "/" letztesReport.Replace (/:/g, "_") ".json",
    "UTF8",
    (Err, Ergebnisse) => {
      Rückgabeergebnisse;
    }
  );
  return json.parse (output);
}) ();

Und dann geht es darum, die Funktion vergleicheports () zu bezeichnen und sowohl den aktuellen Bericht als auch den jüngsten Bericht als Argumente zu übergeben.

 vergleicheports (neuere Reportkontents, results.js);

Im Moment drucken Sie nur ein paar Details in die Konsole aus, damit wir die Berichtsdaten durch OK testen k?nnen:

 https://www.lukeharrison.dev/ 2020-02-01t00: 25: 06.918Z
https://www.lukeharrison.dev/ 2020-02-01t00: 25: 42.169z

Wenn Sie zu diesem Zeitpunkt Fehler erhalten, l?schen Sie einen Bericht über Bericht oder Berichte ohne gültige Inhalte aus früherer Tutorial.

Vergleichen Sie zwei beliebige Berichte

Die verbleibende wichtige Anforderung war die M?glichkeit, zwei Berichte von zwei beliebigen Websites zu vergleichen. Der einfachste Weg, dies zu implementieren, besteht darin, dass der Benutzer die vollst?ndigen Berichtsdateipfade als Befehlszeilenargumente übergeben, die wir dann an die Funktion vergleicheports () senden werden.

In der Befehlszeile würde dies so aussehen:

 Node Lh.js--From lukeharrison

Um dies zu erreichen, müssen die bedingte IF -Anweisung bearbeitet werden, die nach dem Vorhandensein eines Arguments der URL -Befehlszeile prüft. Wir fügen eine zus?tzliche überprüfung hinzu, um festzustellen, ob der Benutzer gerade einen von und zum Pfad bestanden hat. Andernfalls prüfen Sie nach der URL wie zuvor. Auf diese Weise verhindern wir ein neues Leuchtturm -Audit.

 if (argv.from && argv.to) {

} else if (argv.url) {
 // et al
}

Lassen Sie uns den Inhalt dieser JSON -Dateien extrahieren, sie in JavaScript -Objekte analysieren und anschlie?end an die Funktion vergleiche.

Wir haben JSON bereits vor dem Abrufen des neuesten Berichts an JSON analysiert. Wir k?nnen diese Funktionalit?t einfach in eine eigene Helferfunktion extrapolieren und an beiden Stellen verwenden.

Erstellen Sie eine neue Funktion namens GetContents (), die einen Dateipfad als Argument akzeptiert. Stellen Sie sicher, dass dies nur eine regul?re Funktion ist und nicht eine IFFE, da wir nicht m?chten, dass sie ausführt, sobald der JavaScript -Parser es findet.

 const getContents = pathstr => {
  const output = fs.ReadFilesync (Pathstr, "Utf8", (ers, Ergebnisse) => {
    Rückgabeergebnisse;
  });
  return json.parse (output);
};

const vergleicheports = (von, bis) => {
  console.log (aus ["Finalurl"] "von [" FetchTime "]);
  console.log (an ["Finalurl"] "zu [" FetchTime "]);
};

Aktualisieren Sie dann die Funktion der letzten reportContents (), um diese extrapolierte Helferfunktion stattdessen zu verwenden:

 const luddemaReportContents = getContents (DirName '/' letztemreport.replace (/:/g, '_') '.json');

In unserer neuen Bedingung müssen wir den Inhalt der Vergleichsberichte an die Funktion vergleiche () übergeben.

 if (argv.from && argv.to) {
  Vergleiche (
    GetContents (argv.from ".json"),
    GetContents (argv.to ".json")
  );
}

Wie zuvor sollte dies einige grundlegende Informationen zu den Berichten in der Konsole ausdrucken, um uns mitzuteilen, dass alles einwandfrei funktioniert.

 Node lh.js--from lukeharrison

Würde zu:

 https://www.lukeharrison.dev/ 2020-01-31t23_24_41.786z
https://www.lukeharrison.dev/ 2020-02-01t11_16_25.221z

Vergleichslogik

Dieser Teil der Entwicklung beinhaltet die Erstellung der Vergleichslogik, um die beiden Berichte zu vergleichen, die von der Funktion "vergleicheports () empfangen werden.

Innerhalb des Objekts, das Leuchtturm zurückgibt, gibt es eine Eigenschaft namens Audits, die ein weiteres Objekt -Auflistungsmetriken, -chancen und Informationen enth?lt. Hier gibt es viele Informationen, von denen wir uns nicht für die Zwecke dieses Tools interessieren.

Hier ist der Eintrag für die erste inhaltliche Farbe, eine der neun Leistungsmetriken, die wir vergleichen m?chten:

 "Erstkonsumierter Paint": {
  "ID": "Erstverpackter Paint", ",", ",",
  "Titel": "Erste inhaltliche Farbe",
  "Beschreibung": "Erster inhaltlicher Farbe markiert die Zeit, zu der der erste Text oder das erste Bild gemalt wird.
  "Punktzahl": 1,,
  "ScorePlayMode": "Numeric",
  "numericValue": 1081.661,
  "DisplayValue": "1.1 s"
}

Erstellen Sie ein Array, das die Schlüssel dieser neun Leistungsmetriken auflistet. Wir k?nnen dies verwenden, um das Prüfungsobjekt zu filtern:

 const vergleicheports = (von, bis) => {
  const metricfilter = [
    "Erstes in der Paint", ",",
    "Erstmesser-Paint",
    "Speed-Index",
    "Gesch?tzte Eingangs-Latenz",
    "Total-Blocking-Zeit",
    "Max-Potential-Fid",
    "Zeit bis zum ersten Mal",
    "First-CPU-Idle",
    "Interaktiv"
  ];
};

Dann werden wir eines der Prüfungsobjekte des Berichts durchlaufen und dann seinen Namen gegen unsere Filterliste verweisen. (Es spielt keine Rolle, welches Prüfungsobjekt, da beide die gleiche Inhaltsstruktur haben.)

Wenn es dort ist, dann wollen wir es nutzen.

 const metricfilter = [
  "Erstes in der Paint", ",",
  "Erstmesser-Paint",
  "Speed-Index",
  "Gesch?tzte Eingangs-Latenz",
  "Total-Blocking-Zeit",
  "Max-Potential-Fid",
  "Zeit bis zum ersten Mal",
  "First-CPU-Idle",
  "Interaktiv"
];

für (let auditObj in ["audits"]) {
  if (metricfilter.includes (auditObj)) {
    console.log (auditObj);
  }
}

Diese Konsole.log () würde die folgenden Schlüssel in die Konsole ausdrucken:

 Erstkonsum
Erstmessung
Speed-Index
Gesch?tzte Eingangs-Latenz
Total-Blocking-Zeit
max-potential-fid
Zeit bis zuerst
First-CPU-Idle
interaktiv

Dies bedeutet, dass wir von ['Audits'] [AuditObj] .NumericValue und an ['Audits'] [AuditObj] .NumericValue in dieser Schleife verwenden würden, um auf die Metriken selbst zuzugreifen.

Wenn wir diese mit dem Schlüssel in die Konsole drucken würden, würde dies zu einer solchen Ausgabe führen:

 Erster in den ersten Instrengungen 1081.661 890.774
Erstmessungstr?ger 1081.661 954.774
Speed-Index 15576.70313351777 1098.622294504341
Gesch?tzte Eingangs-Latenz 12.8 12.8
Total-Blocking-Zeit 59 31,5
Max-Potential-Fid 153 102
Zeit bis zum ersten Mal 16.85999999999985 16.096000000000004
First-CPU-Idle 1704.8490000000002 1918.774
Interaktiv 2266.2835 2374.3615

Wir haben alle Daten, die wir jetzt brauchen. Wir müssen nur die prozentuale Differenz zwischen diesen beiden Werten berechnen und dann mit dem zuvor beschriebenen farbcodierten Format an der Konsole protokollieren.

Wissen Sie, wie Sie die prozentuale ?nderung zwischen zwei Werten berechnen k?nnen? Ich auch nicht. Zum Glück kam die Lieblings -Monolith -Suchmaschine aller Rettung.

Die Formel lautet:

 ((Von - nach) / von) x 100

Nehmen wir also an, wir haben einen Geschwindigkeitsindex von 5,7s für den ersten Bericht (von) und dann einen Wert von 2,1 Sekunden für den zweiten (bis). Die Berechnung w?re:

 5.7 - 2,1 = 3.6
3,6 / 5,7 = 0,63157895
0,63157895 * 100 = 63,157895

Die Abrunden auf zwei Dezimalstellen würde zu einem Rückgang des Geschwindigkeitsindex von 63,16%führen.

Lassen Sie uns dies in eine Helferfunktion in der Funktion vergleicheports () unterhalb des Metricfilter -Arrays einfügen.

 const calcpercentagediff = (von, bis) => {
  const per = ((bis - von) / von) * 100;
  return Math.round(per * 100) / 100;
};

Back in our auditObj conditional, we can begin to put together the final report comparison output.

First off, use the helper function to generate the percentage difference for each metric.

 for (let auditObj in from["audits"]) {
  if (metricFilter.includes(auditObj)) {
    const percentageDiff = calcPercentageDiff(
      from["audits"][auditObj].numericValue,
      to["audits"][auditObj].numericValue
    );
  }
}

Next, we need to output values in this format to the console:

This requires adding color to the console output. In Node.js, this can be done by passing a color code as an argument to the console.log() function like so:

 console.log('\x1b[36m', 'hello') // Would print 'hello' in cyan

You can get a full reference of color codes in this Stackoverflow question. We need green and red, so that's \x1b[32m and \x1b[31m respectively. For metrics where the value remains unchanged, we'll just use white. This would be \x1b[37m.

Depending on if the percentage increase is a positive or negative number, the following things need to happen:

• Log color needs to change (Green for negative, red for positive, white for unchanged)
• Log text contents change.
  • '[Name] is X% slower for positive numbers
  • '[Name] is X% faster' for negative numbers
  • '[Name] is unchanged' for numbers with no percentage difference.
• If the number is negative, we want to remove the minus/negative symbol, as otherwise, you'd have a sentence like 'Speed Index is -92.95% faster' which doesn't make sense.

There are many ways this could be done. Here, we'll use theMath.sign() function, which returns 1 if its argument is positive, 0 if well… 0, and -1 if the number is negative. That'll do.

 for (let auditObj in from["audits"]) {
  if (metricFilter.includes(auditObj)) {
    const percentageDiff = calcPercentageDiff(
      from["audits"][auditObj].numericValue,
      to["audits"][auditObj].numericValue
    );

    let logColor = "\x1b[37m";
    const log = (() => {
      if (Math.sign(percentageDiff) === 1) {
        logColor = "\x1b[31m";
        return `${percentageDiff "%"} slower`;
      } else if (Math.sign(percentageDiff) === 0) {
        return "unchanged";
      } anders {
        logColor = "\x1b[32m";
        return `${percentageDiff "%"} faster`;
      }
    }) ();
    console.log(logColor, `${from["audits"][auditObj].title} is ${log}`);
  }
}

So, there we have it.

You can create new Lighthouse reports, and if a previous one exists, a comparison is made.

And you can also compare any two reports from any two sites.

Complete source code

Here's the completed source code for the tool, which you can also view in a Gist via the link below.

 const lighthouse = require("lighthouse");
const chromeLauncher = require("chrome-launcher");
const argv = require("yargs").argv;
const url = require("url");
const fs = require("fs");
const glob = require("glob");
const path = require("path");

const launchChromeAndRunLighthouse = url => {
  return chromeLauncher.launch().then(chrome => {
    const opts = {
      port: chrome.port
    };
    return lighthouse(url, opts).then(results => {
      return chrome.kill().then(() => {
        zurückkehren {
          js: results.lhr,
          json: results.report
        };
      });
    });
  });
};

const getContents = pathStr => {
  const output = fs.readFileSync(pathStr, "utf8", (err, results) => {
    return results;
  });
  return JSON.parse(output);
};

const compareReports = (from, to) => {
  const metricFilter = [
    "first-contentful-paint",
    "first-meaningful-paint",
    "speed-index",
    "estimated-input-latency",
    "total-blocking-time",
    "max-potential-fid",
    "time-to-first-byte",
    "first-cpu-idle",
    "interactive"
  ];

  const calcPercentageDiff = (from, to) => {
    const per = ((to - from) / from) * 100;
    return Math.round(per * 100) / 100;
  };

  for (let auditObj in from["audits"]) {
    if (metricFilter.includes(auditObj)) {
      const percentageDiff = calcPercentageDiff(
        from["audits"][auditObj].numericValue,
        to["audits"][auditObj].numericValue
      );

      let logColor = "\x1b[37m";
      const log = (() => {
        if (Math.sign(percentageDiff) === 1) {
          logColor = "\x1b[31m";
          return `${percentageDiff.toString().replace("-", "") "%"} slower`;
        } else if (Math.sign(percentageDiff) === 0) {
          return "unchanged";
        } anders {
          logColor = "\x1b[32m";
          return `${percentageDiff.toString().replace("-", "") "%"} faster`;
        }
      }) ();
      console.log(logColor, `${from["audits"][auditObj].title} is ${log}`);
    }
  }
};

if (argv.from && argv.to) {
  compareReports(
    getContents(argv.from ".json"),
    getContents(argv.to ".json")
  );
} else if (argv.url) {
  const urlObj = new URL(argv.url);
  let dirName = urlObj.host.replace("www.", "");
  if (urlObj.pathname !== "/") {
    dirName = dirName urlObj.pathname.replace(/\//g, "_");
  }

  if (!fs.existsSync(dirName)) {
    fs.mkdirSync(dirName);
  }

  launchChromeAndRunLighthouse(argv.url).then(results => {
    const prevReports = glob(`${dirName}/*.json`, {
      sync: true
    });

    if (prevReports.length) {
      dates = [];
      for (report in prevReports) {
        dates.push(
          new Date(path.parse(prevReports[report]).name.replace(/_/g, ":"))
        );
      }
      const max = dates.reduce(function(a, b) {
        return Math.max(a, b);
      });
      const recentReport = new Date(max).toISOString();

      const recentReportContents = getContents(
        dirName "/" recentReport.replace(/:/g, "_") ".json"
      );

      compareReports(recentReportContents, results.js);
    }

    fs.writeFile(
      `${dirName}/${results.js["fetchTime"].replace(/:/g, "_")}.json`,
      results.json,
      err => {
        Wenn (err) err?ste;
      }
    );
  });
} anders {
  throw "You haven't passed a URL to Lighthouse";
}

View Gist

N?chste Schritte

With the completion of this basic Google Lighthouse tool, there's plenty of ways to develop it further. Zum Beispiel:

• Some kind of simple online dashboard that allows non-technical users to run Lighthouse audits and view metrics develop over time. Getting stakeholders behind web performance can be challenging, so something tangible they can interest with themselves could pique their interest.
• Build support for performance budgets, so if a report is generated and performance metrics are slower than they should be, then the tool outputs useful advice on how to improve them (or calls you names).

Viel Glück!

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Node.js -Tool, um Google Lighthouse -Berichte aufzuzeichnen und zu vergleichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!