Webleistungsmessung automatisieren

Addi Osmani
Addy Osmani

Die Leistung im Web kann einen großen Einfluss auf die gesamte Nutzererfahrung haben. Wenn ihr in letzter Zeit darüber nachdenkt, die Leistung eurer eigenen Website zu verbessern, habt ihr wahrscheinlich schon von PageSpeed Insights gehört. Dieses Tool analysiert Seiten und gibt Tipps zur Beschleunigung der Seitenladezeit anhand von Best Practices für die Leistung auf Mobilgeräten und Desktop-Computern.

Die Bewertungen von PageSpeed basieren auf einer Reihe von Faktoren, z. B. darauf, wie gut deine Skripts minimiert, Bilder optimiert und Inhalte mit gzip verschlüsselt wurden, Tippziele angemessen groß sind und Weiterleitungen zu Landingpages vermieden werden.

40% der Nutzer verlassen möglicherweise Seiten, die länger als drei Sekunden zum Laden benötigen. Die Frage, wie schnell die Seiten auf den Geräten der Nutzer geladen werden, spielt daher in unserem Entwicklungsworkflow eine immer wichtigere Rolle.

Leistungsmesswerte im Build-Prozess

Obwohl Sie PageSpeed Insights manuell aufrufen, um herauszufinden, wie Ihre Ergebnisse in Ordnung sind, haben sich einige Entwickler gefragt, ob es möglich ist, eine ähnliche Leistungsbewertung in ihren Erstellungsprozess einzubeziehen.

Die Antwort lautet: absolut.

Einführung von PSI für Node

Heute möchten wir euch PSI für Node vorstellen. Dieses neue Modul funktioniert hervorragend mit Gulp, Grunt und anderen Build-Systemen. Es kann eine Verbindung zum PageSpeed Insights-Dienst herstellen und einen detaillierten Bericht zur Leistung eurer Websites zurückgeben. Sehen wir uns eine Vorschau der damit verbundenen Berichtstypen an:

Bildschirm für Leistungsberichte

Die Ergebnisse oben sind gut, um ein Gefühl dafür zu bekommen, welche Verbesserungen möglich sind. Ein Beispiel: 5,92 für die Größenanpassung von Inhalten an den Darstellungsbereich bedeutet, dass noch einige Arbeitsschritte möglich sind, während eine 24 zur Minimierung von Ressourcen, die das Rendering blockieren, darauf hindeuten könnte, dass du das Laden von JavaScript mithilfe des async-Attributs zurückstellen musst.

Einstiegsbarriere für PageSpeed Insights

Wenn Sie schon einmal die PageSpeed Insights API oder eines der darauf aufbauenden Tools ausprobiert haben, mussten Sie sich wahrscheinlich für einen speziellen API-Schlüssel registrieren. Auch wenn dies nur wenige Minuten dauert, können Sie die Statistiken im Rahmen Ihres normalen Workflows unter Umständen deaktivieren.

Wir freuen uns, Ihnen mitteilen zu können, dass der PageSpeed Insights-Dienst Anfragen ohne API-Schlüssel für maximal eine Anfrage alle 5 Sekunden unterstützt. Bei einer normalen Verwendung oder bei größeren Produktions-Builds empfiehlt es sich wahrscheinlich, einen Schlüssel zu registrieren.

Das PSI-Modul unterstützt sowohl die nokey-Option für die Einrichtung in weniger als ein paar Minuten als auch die key-Option für etwas länger. Hier finden Sie weitere Informationen zur Registrierung für einen API-Schlüssel.

Erste Schritte

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

Build-Prozess

Die Verwendung von PSI in deinem 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 die Datei in der Datei package.json zu speichern.

npm install psi --save-dev

Definieren Sie dann eine Gulp-Aufgabe dafür in Ihrer Gulpfile-Datei wie folgt (die auch in unserem Gulp-Projekt Beispiel behandelt wird):

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

Für den obigen Befehl können Sie dann die Task mit dem folgenden Befehl ausführen:

gulp psi

Wenn Sie Grunt verwenden, können Sie auch grunt-pagespeed von James Cryer nutzen, der jetzt PSI für die Berichterstellung nutzt.

Installieren

npm install grunt-pagespeed --save-dev

Laden Sie dann die Aufgabe 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 Task dann mit folgendem Befehl 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 das Tool mit npm installieren:

$ npm install -g psi

Außerdem können Sie über ein beliebiges Terminalfenster PageSpeed Insights-Berichte für eine Website anfordern (mit der Option nokey oder einem API-spezifischen key wie im Folgenden dargestellt):

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!

Mach Leistung zu einem Teil deiner Kultur

Wir müssen uns mehr Gedanken darüber machen, wie sich unsere Designs und Implementierungen auf die User Experience auswirken.

Lösungen wie PSI können Ihre Webleistung auf Desktop-Computern und Mobilgeräten im Auge behalten und sind nützlich, wenn sie als Teil Ihres regulären Workflows nach der Bereitstellung eingesetzt werden.

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