Advertisement
  1. Code
  2. WordPress
Code

Das Google PageSpeed Modul installieren

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Improving Google PageSpeed.
Optimizing Google PageSpeed to 100 in WordPress

German (Deutsch) translation by Andreas Geibert (you can also view the original English article)

Final product image
What You'll Be Creating

Willkommen zu meinem dritten Tutorial zum Thema "optimizing your Google Page Speed". Für die, die Google PageSpeed noch nicht kennen – Google PageSpeed ist ein kostenloses Tool, das die Performance und Usability von Webseiten sowohl für mobile, als auch für Desktop-Plattformen evaluieren, also messen kann. Besonders wichtig daran ist, dass Google dieses Tool auch selbst nutzt, um Schlüsselelemente für das SEO Ranking unserer Webseiten zu beurteilen, was sich unter Anderem auf die Position unserer Webseite in den Google Suchergebnissen auswirkt.

Somit wissen nicht nur Webmaster wie wichtig es ist, eine gute PageSpeed Wertung zu haben, auch wenn es hierüber einige Diskussionen gibt. Zum Beispiel hat die Webseite der New York Times im Moment eine PageSpeed Wertung von 60 und 68 von 100.

In der ersten Episode habe ich Dir gezeigt, wie man die PageSpeed Wertung mit einem Theme, das von einem nun nicht mehr aktiven Entwickler erstellt wurde, verbessert. Der Titel lautet "Hands On Improving Google PageSpeed (Envato Tuts+)". Letztendlich habe ich es damit geschafft, meinen PageSpeed für mobile Geräte auf 70, für Desktop Geräte auf 86 anzuheben.

In der zweiten Episode konzentrierte ich mich auf meine eigene Blog-Seite und modifizierte meinen WordPress Code soweit, dass ich am Ende eine PageSpeed Wertung von 100 sowohl auf mobilen, als auch auf Desktop Geräten erreichte. Mehr dazu im Artikel "Optimizing Google PageSpeed to 100 in WordPress (Envato Tuts+)"

Und eine zeitlang war ich auch erfolgreich:

Google PageSpeed Module - Page Insights at 100 for Mobile and Desktop

Heute erzähle ich Dir mehr über meine Erfahrungen mit der Optimierung der PageSpeed und einer relativ unbekannten Alternative, diese Optimierung selbst durchzuführen. Googles eigenes PageSpeed module. Dieses Modul kannst Du sowohl für Apache, als auch für nginx installieren:

PageSpeed can in den Apache oder Nginx Webserver integriert werden und Deine Webseite automatisch optimieren. — Google

Bevor wir starten, möchte ich Dich noch daran erinnern, dass ich immer versuche, an der Diskussion im unteren Kommentarbereich teilzunehmen. Wenn Du Fragen, Anregungen oder Vorschläge zu neuen Themen hast, schreibe unten auf der Seite bitte einen Kommentar, oder kontaktiere mich auf Twitter unter @reifman. Ich bin gespannt auf Deine Erfahrungen mit WordPress und PageSpeed.

Einen optimalen PageSpeed Wert beibehalten

Wenn mein Blog mein einziges Projekt wäre, wäre es wahrscheinlich nicht allzu schwer gewesen, einen optimierten Code für PageSpeed aufrecht zu erhalten, obwohl von Zeit zu Zeit WordPress Plugin- und Theme-Updates eingespielt wurden. Aber es ist nicht mein einziges Projekt. Und, ehrlich gesagt, erwies sich das Aufrechterhalten des optimierten Codes als überaus zeitaufwändig.

Ich sehnte mich zurück nach den alten Tagen der Mausklick Updates.

Google belohnt Dich nicht für eine hohe PageSpeed Wertung

Außerdem habe ich, nachdem ich auf ein anderes Theme gewechselt und die PageSpeed auf 100 gebracht habe, festgestellt, dass sich mein Traffic verringerte und sogar niedriger blieb. Ich war mir sicher, dass das responsive Layout des Themes etwas damit zu tun hat, aber Google hat mich niemals dafür belohnt, dass ich eine PageSpeed Wertung von 100 erreicht hatte.

Ebenso trägt AMP, welches entwickelt wurde, um großen Publishern mehr Traffic zukommen zu lassen, nicht viel Positives zum Traffic kleinerer Publisher bei, wie ich im Artikel Installing AMP in WordPress (Envato Tuts+) bereits ausgeführt habe. Google hat nämlich niemals für zusätzlichen Traffic auf meinem Blog gesorgt, nachdem ich AMP Support darauf eingeführt hatte.

Also habe ich beschlossen, den Fokus von PageSpeed lieber auf ein neues Theme, welches meinen Benutzern eine einfachere Navigation meiner Webseite ermöglichte, zu verlagern. Ich habe auch AMP vorerst deinstalliert.

Das Google PageSpeed Module ausprobieren

Das war die perfekte Gelegenheit, meine eigenen Versuche zum Zusammenlegen und Minimieren von JavaScript und CSS beiseite zu legen und mit Googles PageSpeed Module, welches ja auf dem Server läuft und unter anderem genau solche Optimierungen übernimmt, zu experimentieren.

Über das Google PageSpeed Modul

Einfach gesprochen, automatisiert das Google PageSpeed Modul eine Vielzahl an Performance Optimierungen, welche für das PageSpeed Ranking ausschlaggebend sind. Es ist auf populären Open Source Servern, wie z.B. dem Apache oder nginx verfügbar.

Das PageSpeed Modul komprimiert und kombiniert eingebundene JavaScript und CSS Dateien und kann auch z.B. Bilder komprimieren, oder durch progressive Äquivalente, wie z.B. .webp Versionen, ersetzen.

Snapshots of my PageSpeed Prior to Installation

Nach der Installation meines neuen Themes, machte ich "Vorher-Screenshots" meines PageSpeed Scores.  Ich lag bei 83 für Desktop:

Google PageSpeed Module - Before Test 83 for Desktop PageSpeed

And einer niedrigeren 64 für Mobile:

Google PageSpeed Module - Before Test 64 for Mobile PageSpeed

Das PageSpeed Modul installieren

In diesem Tutorial erkläre ich Dir die Installation auf einem Apache Server Google erklärt auch die Installation für Nginx Server.

Das PageSpeed Modul ist nicht in Ubuntu Packages enthalten, weswegen Du es manuell über wget herunter laden musst:

Danach benutzt Du den dpkg Befehl, um das Modul zu installieren:

Zum Schluß nutzt Du den Befehl apt-get -f install um fehlende Abhängigkeiten nachzuladen.

Danach startest Du den Apache neu:

Unterstützung von Dateien Deines CDN

In einem früheren Artikel schrieb ich einen gesponserten Artikel mit dem Titel Accelerate Your Content Delivery With KeyCDN und nutze die Punkte darin heute immer noch. Wenn Du ein CDN für Deine Seite verwendest, musst Du dies dem PageSpeed Modul mitteilen.

Hier siehst Du, wie Du die Module Konfiguration einsehen und ändern kannst:

Hier siehst Du die Basis-Konfiguration:

Standardmäßig werden alle Deine Websites damit arbeiten. Aber du musst die CDN Sub-Domains manuell hinzufügen:

Meine CDN sind c1-, c2-, c3- und c4- . jeffreifman.com, deswegen nutze ich eine ? Wildcard um alle vier auf einmal abzudecken.

Natürlich musst Du den Apache, so wie wir es auch schon vorher gemacht haben, danach wieder neu starten.

Überprüfen der PageSpeed Modul Ergebnisse

Du kannst den Quelltext Deiner Seite prüfen, um zu sehen, ob das PageSpeed Modul funktioniert. Hier ein Beispiel meiner Webseite JeffReifman.com:

Beachte, dass die src-URL im "script" Tag jetzt lautet:

568f4.js.PageSpeed.JM.7B4hJGmADB.js

Das ist der Code für ein größeres, manuell platziertes Bild (eines meiner eigenen Werbebanner), welches PageSpeed automatisch in .webp konvertiert hat:

All dies geschieht automatisch.

Enttäuschende Änderungen am PageSpeed

Insgesamt waren die Ergebnisse durch den Einsatz des PageSpeed Moduls nicht gerade berauschend. Der Score hat sich gerade mal um 4 Punkte auf dem Desktop und um 8 Punkte auf Mobile verbessert.

Hier der "Nachher-Score" für Desktop:

Google PageSpeed Module - After Test 87 for Desktop PageSpeed

Hier der "Nachher-Score" für Mobile:

Google PageSpeed Module - After Test 72 for Mobile PageSpeed

Zusammenfassend

Wenn Du ein Systemadministrator bist, wird das Google PageSpeed Modul sehr hilfreich sein. Es ist voll konfigurierbar und Du kannst es auf verschiedenste Art und Weise anpassen, um noch bessere Ergebnisse zu erzielen. Aber ich habe Zweifel, ob es für den durchschnittlichen Entwickler effizient genug ist:

  • Die grundlegenden Performance Gewinne waren doch sehr gering.
  • Weiterführende Anpassung sind sehr komplex.
  • PageSpeed Verbesserungen münden nicht immer, wenn überhaupt, in mehr Traffic durch Suchanfragen.

Ich bin dankbar dafür, dass Google das Modul zur Verfügung stellt und dass dieses auch in komplexen Systeme einsetzbar ist. Aber der Mehrwert für Do-It-Yourself System-Administratoren ist limitiert.

Wenn Du Fragen hast, schreibe diese bitte unten in den Kommentarbereich. Oder kontaktiere mich auf Twitter @reifman. Besuche auch meine Envato Tuts+ instructor page, um andere Tutorials zu lesen, die ich geschrieben habe. Zum Beispiel Cloning WordPress in Linux (in 90 seconds). Weiterhin empfehle ich Dir meine beiden Programmier-Serien How to Program With Yii2 und Building Your Startup With PHP.

Links zum Thema

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.