Webleistungsmessung automatisieren

Die Webleistung kann einen großen Einfluss auf die gesamte Nutzererfahrung haben. Wenn Sie sich in letzter Zeit mit der Verbesserung der Leistung Ihrer Website beschäftigt haben, haben Sie wahrscheinlich schon von PageSpeed Insights gehört. Dieses Tool analysiert Seiten und bietet auf der Grundlage von Best Practices für die Webleistung auf Mobilgeräten und Computern Tipps zur Leistungssteigerung.

Die PageSpeed-Bewertungen basieren auf einer Reihe von Faktoren, darunter, wie gut Ihre Scripts minimiert, Bilder optimiert, Inhalte komprimiert, Tippziele angemessen dimensioniert und Landingpage-Weiterleitungen vermieden werden.

40% der Nutzer verlassen Seiten, die länger als drei Sekunden laden. Daher wird die Frage, wie schnell Ihre Seiten auf den Geräten der Nutzer geladen werden, immer wichtiger.

Leistungsmesswerte im Build-Prozess

Es ist zwar in Ordnung, manuell PageSpeed Insights aufzurufen, um die Bewertungen zu sehen, aber einige Entwickler haben gefragt, ob es möglich ist, ähnliche Leistungsbewertungen in ihren Build-Prozess einzubinden.

Die Antwort lautet: Auf jeden Fall.

PSI für Node

Heute stellen wir PSI für Node vor – ein neues Modul, das sich hervorragend mit Gulp, Grunt und anderen Build-Systemen kombinieren lässt. Es kann mit dem PageSpeed Insights-Dienst verbunden werden und einen detaillierten Bericht zur Webleistung zurückgeben. Hier eine Vorschau der Berichtstypen, die damit möglich sind:

Bildschirm mit Leistungsberichten

Anhand der oben genannten Ergebnisse können Sie sich ein Bild davon machen, welche Verbesserungen möglich sind. Ein Wert von 5,92 für die Größe von Inhalten im Viewport bedeutet beispielsweise, dass noch „einige“ Optimierungen möglich sind, während ein Wert von 24 für die Minimierung von renderblockierenden Ressourcen darauf hindeutet, dass Sie das Laden von JS mit dem Attribut async verschieben müssen.

Einstiegshürden für PageSpeed Insights senken

Wenn Sie in der Vergangenheit versucht haben, die PageSpeed Insights API oder eines der darauf basierenden Tools zu verwenden, mussten Sie sich wahrscheinlich für einen speziellen API-Schlüssel registrieren. Wir wissen, dass das zwar nur wenige Minuten dauert, aber es kann frustrierend sein, wenn Sie Statistiken nicht direkt in Ihrem normalen Workflow abrufen können.

Der PageSpeed Insights-Dienst unterstützt Anfragen ohne API-Schlüssel mit einer Häufigkeit von bis zu einer Anfrage alle 5 Sekunden. Für eine regelmäßigere Nutzung oder seriöse Produktions-Builds sollten Sie sich wahrscheinlich für einen Schlüssel registrieren.

Das PSI-Modul unterstützt sowohl eine nokey-Option, mit der es in weniger als wenigen Minuten eingerichtet werden kann, als auch die key-Option, die etwas länger dauert. Details zur Registrierung für einen API-Schlüssel sind dokumentiert.

Erste Schritte

Es gibt zwei Möglichkeiten, PSI in Ihren Workflow einzubinden. Sie können es entweder in Ihren Build-Prozess einbinden oder als global installiertes Tool auf Ihrem System ausführen.

Build-Prozess

Die Verwendung von PSI in Ihrem Grunt- oder Gulp-Build-Prozess ist ziemlich einfach. Wenn Sie an einem Gulp-Projekt arbeiten, können Sie PSI direkt installieren und verwenden.

Installieren

Installieren Sie PSI mit npm und übergeben Sie --save-dev, um es in der Datei „package.json“ zu speichern.

npm install psi --save-dev

Definieren Sie dann in Ihrer gulpfile eine Gulp-Aufgabe für sie, wie unten gezeigt (siehe auch unser Beispielprojekt für Gulp):

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

In diesem Fall können Sie die Aufgabe mit folgendem Befehl ausführen:

gulp psi

Wenn Sie Grunt verwenden, können Sie grunt-pagespeed von James Cryer verwenden, das jetzt PSI für seine Berichte verwendet.

Installieren

npm install grunt-pagespeed --save-dev

Laden Sie die Aufgabe dann in Ihre Gruntfile:

grunt.loadNpmTasks('grunt-pagespeed');

und für die Verwendung konfigurieren:

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

Sie können die Aufgabe dann mit folgenden Methoden ausführen:

grunt pagespeed

Als globales Tool installieren

Sie können PSI auch als global verfügbares Tool auf Ihrem System installieren. Auch hier können wir npm verwenden, um das Tool zu installieren:

$ npm install -g psi

Sie können auch über ein beliebiges Terminalfenster PageSpeed Insights-Berichte für eine Website anfordern (mit der Option nokey oder einer API-spezifischen key wie unten beschrieben):

psi http://www.html5rocks.com --nokey --strategy=mobile

oder für Nutzer mit einem registrierten API-Schlüssel:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

Geschafft!

Machen Sie Leistung zu einem Teil Ihrer Unternehmenskultur

Wir müssen mehr über die Auswirkungen unserer Designs und Implementierungen auf die Nutzererfahrung nachdenken.

Mit Lösungen wie PSI können Sie die Webleistung auf Computern und Mobilgeräten im Blick behalten. Sie sind nützlich, wenn Sie sie als Teil Ihres regulären Workflows nach der Bereitstellung verwenden.

Wir freuen uns auf Ihr Feedback und hoffen, dass PSI dazu beiträgt, die Leistungskultur in Ihrem Team zu verbessern.