Willkommen zu meinem dritten Tutorial zur Optimierung Ihrer Google Page Speed. Für diejenigen, die es nicht wissen, ist Google PageSpeed ein kostenloses Tool, das die Leistung und Benutzerfreundlichkeit Ihrer Website für mobile und Desktop-Plattformen bewertet. Es ist besonders wichtig, weil Google es verwendet, um die wichtigsten Elemente unseres SEO-Rankings zu bestimmen, d. H. Wie hoch wir in ihren Suchergebnissen erscheinen.
Webmaster wissen also, dass es wichtig ist, einen guten PageSpeed zu haben, obwohl darüber diskutiert wird. Beispielsweise liegt die Seitengeschwindigkeit der New York Times derzeit bei 60 und 68 von 100.
In der ersten Episode habe ich Sie durch ein Thema des inzwischen verstorbenen Anbieters Hands On Improving Google PageSpeed (Envato Tuts +) geführt. Letztendlich habe ich es zu einem PageSpeed for Mobile von 70 und Desktop 86 geschafft.
In der zweiten Episode habe ich aus meinem Blog eine fokussierte Entwicklungsseite gemacht und meinen WordPress-Code so angepasst, dass er PageSpeed 100 sowohl auf dem Handy als auch auf dem Desktop erreicht. Siehe Optimieren von Google PageSpeed auf 100 in WordPress (Envato Tuts +)..
Und ich war eine Zeitlang erfolgreich dabei:
Heute erzähle ich Ihnen mehr über meine Erfahrungen mit der PageSpeed-Optimierung und einer weniger bekannten Alternative, Googles eigenes PageSpeed-Modul. Sie können es für Apache und Nginx installieren.
PageSpeed kann in Ihren Apache- oder Nginx-Webserver integriert werden, um Ihre Site automatisch zu optimieren. - Google
Bevor wir anfangen, denken Sie daran, ich versuche, an den folgenden Diskussionen teilzunehmen. Wenn Sie eine Frage oder ein Thema haben, schreiben Sie bitte einen Kommentar oder kontaktieren Sie mich unter Twitter @reifman. Ich bin an Ihren Erfahrungen mit WordPress und PageSpeed interessiert.
Wenn mein Blog mein Hauptberuf gewesen wäre, wäre es vielleicht nicht allzu schwierig gewesen, den optimierten Code für PageSpeed aufrechtzuerhalten, da Updates für WordPress-Plugins und Themenaktualisierungen verwendet wurden. Aber es ist nicht. Und ehrlich gesagt, die Aufrechterhaltung dieser Arbeit war übermäßig zeitaufwändig.
Ich sehnte mich danach, zu den alten Tagen der Mausklick-Updates zurückzukehren.
Ich bemerkte auch, dass nach dem Wechsel zu einem neuen Design und der Optimierung meiner PageSpeed auf 100 der Verkehr tatsächlich zurückging und zurückging. Das responsive Theme-Layout hatte sicherlich etwas damit zu tun, aber Google hat mich nie dafür belohnt, dass ich 100 PageSpeed erreicht habe.
Wie ich in AMP in WordPress installieren (Envato Tuts +) bereits besprochen habe, wurde AMP erstellt, um die Aufmerksamkeit von Medienherausgebern zu erregen, fügt aber für kleine Verleger nicht viel hinzu. Google hat niemals zusätzlichen Traffic für mein Blog bereitgestellt, nachdem ich AMP-Support bereitgestellt habe.
Also entschied ich mich, meinen Fokus auf PageSpeed zurückzudrängen und zu einem neuen Thema zu wechseln, das Benutzern das Navigieren auf meiner Website erleichtern würde. Ich habe AMP vorerst auch deinstalliert.
Es schien die perfekte Gelegenheit zu sein, alle meine benutzerdefinierten JavaScript- und CSS-Pakete zu deaktivieren und mit dem PageSpeed-Modul von Google zu experimentieren, das auf Serverebene für Sie arbeitet.
Grundsätzlich automatisiert das Google PageSpeed-Modul viele der Leistungsoptimierungen, nach denen seine PageSpeed-Rankings suchen. Und es ist auf den bekannten Open-Source-Servern Apache und Nginx verfügbar.
Das PageSpeed-Modul komprimiert und kombiniert enthaltene Dateien wie JavaScript und CSS-Stylesheets, ersetzt Bilder jedoch auch durch komprimierte, progressive Dateiformate (.webp)..
Nachdem ich mein neues Design installiert hatte, machte ich "vor" Momentaufnahmen meines PageSpeed-Scores. Ich habe eine 83 für den Desktop erhalten:
Und eine niedrigere 64 für Handys:
In diesem Tutorial werde ich Sie durch die Installation von Apache führen. Google bietet auch eine Nginx-Installationsanleitung an.
Das PageSpeed-Modul ist nicht in den Ubuntu-Paketverzeichnissen enthalten. Sie müssen es daher manuell herunterladen wget
:
$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb --2016-10-02 15: 10: 54 - https://dl-ssl.google .com / dl / linux / direct / mod-pagespeed-stable_current_amd64.deb Auflösung von dl-ssl.google.com (dl-ssl.google.com)… 74.125.22.136, 74.125.22.91, 74.125.22.190,… Herstellen einer Verbindung mit dl -ssl.google.com (dl-ssl.google.com) | 74.125.22.136 |: 443… verbunden. HTTP-Anfrage gesendet, wartet auf Antwort… 200 OK Länge: 7009850 (6.7M) [application / x-debian-package] Speichern in: 'mod-pagespeed-stable_current_amd64.deb' 100% [=========== ================================================== =============>> 7,009,850 38,6 MB / s in 0,2 s 2016-10-02 15:10:54 (38,6 MB / s) - 'mod-pagespeed-stable_current_amd64.deb' gespeichert [7009850/7009850]
Dann benutze dpkg
um das Modul zu installieren:
$ sudo dpkg -i mod-pagespeed - *. deb Auswahl eines zuvor nicht ausgewählten Pakets mod-pagespeed-stable. (Lesen der Datenbank… 668500 Dateien und Verzeichnisse sind derzeit installiert.) Vorbereitungen zum Entpacken von mod-pagespeed-stable_current_amd64.deb… Entpacken von mod-pagespeed-stable (1.11.33.2-r0)… Einstellen von mod-pagespeed-stable (1.11.33.2-r0 )… Modul-Seitengeschwindigkeit aktivieren. Um die neue Konfiguration zu aktivieren, müssen Sie Folgendes ausführen: service apache2 restart
Und schlussendlich, apt-get -f installieren
um Abhängigkeiten zu beheben:
$ sudo apt-get -f install [sudo] Kennwort für…: Paketlisten lesen… Fertig Baum für Abhängigkeiten erstellen Statusinformationen lesen… Fertig Die folgenden Pakete wurden automatisch installiert und werden nicht mehr benötigt: ca-certificate-java default-jre default- jre-headless fonts-dejavu-extra gconf-service gconf-service-backend gconf2 gconf2-common icedtea-6-jre-cacao icedtea-6-jre-jamvm icedtea-netx icedtea-netx-common Java-common Java-Wrappers libasyncns0 -wrapper-java libatk-wrapper-java-jni… openjdk-7-jre openjdk-7-jre-headless sound-theme-freesktop ttf-dejavu-extra tzdata-java Verwenden Sie 'apt-get autoremove', um sie zu entfernen. 0 aktualisiert, 0 neu installiert, 0 zu entfernen und 0 nicht aktualisiert.
Starten Sie anschließend den Apache-Server neu:
$ sudo service apache2 restart * Neustarten des Webservers apache2
Zuvor habe ich einen gesponserten Beitrag geschrieben, der die Bereitstellung von Inhalten mit KeyCDN beschleunigt und noch immer verwendet. Wenn Sie für Ihre Site ein CDN verwenden, müssen Sie das PageSpeed-Modul darüber informieren.
So können Sie die Konfigurationsdatei des Moduls anzeigen und bearbeiten:
$ sudo nano /etc/apache2/mods-available/pagespeed.conf
Und hier ist die Grundkonfiguration:
# Schalten Sie mod_pagespeed ein. Um mod_pagespeed vollständig zu deaktivieren, können Sie diese Option auf "off" setzen. ModPagespeed on # Wir möchten, dass VHosts die globale Konfiguration erben. # Wenn dies nicht enthalten ist, sind sie unabhängig von den # globalen Optionen, zumindest für die Abwärtskompatibilität. ModPagespeedInheritVHostConfig on
Alle Ihre Sites arbeiten standardmäßig damit. Sie müssen die CDN-Unterdomänen jedoch manuell hinzufügen:
# ModPagespeedDomain # erlaubt das Umschreiben von JS-, CSS- und Image-Dateien in dieser # Domain. Standardmäßig werden nur Ressourcen mit demselben Ursprung wie die # HTML-Datei neu geschrieben. Beispiel: # # ModPagespeedDomain cdn.myhost.com # # Dadurch können Ressourcen, die auf http://cdn.myhost.com zu finden sind, zusätzlich zu denen in der gleichen Domäne wie der HTML-Code # überschrieben werden. # # Andere domänenbezogene Direktiven (wie ModPagespeedMapRewriteDomain # und ModPagespeedMapOriginDomain) können auch Domänen autorisieren. # # Platzhalterzeichen (* und?) Sind in der Domänenspezifikation zulässig. Seien Sie vorsichtig, wenn Sie sie verwenden, als ob Sie Domains umschreiben, die keinen Verkehr senden, und die Site, die den Verkehr empfängt, kann nicht wissen, wie der umgeschriebene Inhalt bereitgestellt wird. ModPagespeedDomain c? .Jeffreifman.com
Meine CDNs sind bei c1-, c2-, c3- und c4-. Jeffreifman.com, also habe ich eine ?
Platzhalterzeichen, um auf alle vier oben zu verweisen.
Dann müssen Sie Apache natürlich wie zuvor neu starten.
Sie können den Quellcode auf Ihrer Site überprüfen, um zu sehen, ob das PageSpeed-Modul funktioniert. Hier ist ein Beispiel von JeffReifman.com oben auf der Seite:
Beachten Sie, dass die URL der URL jetzt lautet:
568f4.js.pagespeed.jm.7B4hJGmADB.js
Hier ist ein größeres, manuell platziertes Bild (übrigens eine meiner Hausanzeigen), das PageSpeed in .webp konvertiert:
All dies geschieht automatisch.
Änderungen an PageSpeed
Insgesamt waren die Ergebnisse der Verwendung des PageSpeed-Moduls allein nicht besonders beeindruckend. Ich gewann 4 Punkte auf dem Desktop und (besser) 8 Punkte auf dem Handy.
Hier ist die After-Score für Desktop:
Hier ist die After-Score für Handys:
Abschließend
Wenn Sie Systemadministrator sind, ist das Google PageSpeed-Modul sehr hilfreich. Es ist vollständig konfigurierbar und kann auf verschiedene Arten angepasst werden, um eine bessere Wirkung zu erzielen. Für den durchschnittlichen Entwickler habe ich jedoch Zweifel an der Wirksamkeit:
Ich bin froh, dass Google das Modul anbietet und es für komplexe Systeme entwickelt wurde. Die Auswirkungen auf den Systemadministrator im Alltag sind jedoch begrenzt.
Wenn Sie Fragen haben, posten Sie diese bitte weiter unten. Oder Sie können mich auf Twitter @reifman kontaktieren. Bitte sehen Sie sich meine Envato Tuts + Instructor-Seite an, um andere Tutorials zu sehen, die ich geschrieben habe, wie beispielsweise das Klonen von WordPress unter Linux (in 90 Sekunden). Ich empfehle Ihnen, meine beiden Programmierserien hier zu lesen: So programmieren Sie mit Yii2 und Building Your Start mit PHP.