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:
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.