Optimieren Sie Ihre Website mit dem Google PageSpeed Dynamic Module für NGINX Plus

Da die durchschnittliche Größe von Webseiten immer weiter zunimmt, ist es zunehmend wichtiger, alle Aspekte des Designs, der Entwicklung und der Bereitstellung Ihrer Website zu optimieren, um Ihren Benutzern unabhängig vom verwendeten Gerät ein gutes Erlebnis zu bieten. Es ist hinlänglich dokumentiert , dass die Seitenladezeit Auswirkungen auf das Benutzererlebnis und den Umsatz hat.

Google PageSpeed ist eine Suite von Tools zum Messen und Optimieren der Leistung Ihrer Website und ist seit mehreren Jahren als Drittanbietermodul verfügbar, das Sie in NGINX Open Source kompilieren können. Mit der Einführung dynamischer Module in NGINX Plus R11 können NGINX Plus -Benutzer jetzt auch die Vorteile von PageSpeed nutzen.

Wenn Sie PageSpeed als dynamisches Modul in NGINX Plus laden, werden die Ressourcen auf Ihrer Website automatisch neu geschrieben und optimiert. In diesem Blogbeitrag erklären wir, wie man das dynamische Modul erstellt und konfiguriert. (Denken Sie daran, dass PageSpeed als Drittanbietermodul nicht von Ihrem NGINX Plus-Supportvertrag abgedeckt ist.)

Erstellen und Laden von PageSpeed als dynamisches Modul für NGINX Plus

Die folgenden Anweisungen basieren auf den manuellen Installationsanweisungen von Google und wurden für die Binärkompatibilität mit NGINX Plus angepasst. (Sie können die Anweisungen von Google unverändert verwenden, um ein dynamisches Modul zu erstellen, das mit NGINX Open Source funktioniert.)

Schritt 0: Vorbereiten der Build-Umgebung

Wir empfehlen dringend, dynamische Module auf einem separaten System zu kompilieren, das wir hier als „Build-Umgebung“ bezeichnen. Dadurch werden das Risiko und die Komplexität des Systems minimiert, auf dem Sie NGINX Plus mit dem PageSpeed-Modul ausführen möchten (wir bezeichnen dies als „Produktionsumgebung“). Die Build-Umgebung muss über dasselbe Betriebssystem und dieselbe Version wie die Produktionsumgebung verfügen . Darüber hinaus müssen die folgenden Komponenten installiert sein:

• UnZip-Dienstprogramm
• Compiler und Make-Dienstprogramm
• Perl-kompatible Bibliothek für reguläre Ausdrücke (Entwicklungsdateien)
• Zlib-Komprimierungsbibliotheken (Entwicklungsdateien)

Um sicherzustellen, dass diese Voraussetzungen in Ihrer Build-Umgebung installiert sind, führen Sie den folgenden Befehl aus.

• Für Ubuntu/Debian:

  $ sudo apt-get install unzip gcc make libpcre3-dev zlib1g-dev

• Für CentOS/RHEL/Oracle Linux:

  $ sudo yum install unzip gcc make pcre-devel zlib-devel

Schritt 1: Bezug von NGINX Open Source

1. Führen Sie in der Produktionsumgebung den folgenden Befehl aus, um die Open Source-Version von NGINX zu ermitteln, die der laufenden NGINX Plus-Version entspricht. In dieser Ausgabe ist es orange hervorgehoben: NGINX 1.11.5, das entspricht NGINX Plus R11.

   $ nginx -v nginx-Version: nginx/1.11.5 (nginx-plus-r11)

2. Laden Sie in der Build-Umgebung die Quellen für die entsprechende NGINX Open Source-Version herunter.

   $ wget -qO – http://nginx.org/download/nginx-1.11.5 .tar.gz | tar zxfv -

Schritt 2: Herunterladen und Vorbereiten der PageSpeed-Quellen

Führen Sie diese Schritte in der Build-Umgebung aus.

1. Suchen Sie in den Versionshinweisen oder durch Ausführen dieses Befehls nach der neuesten Versionsnummer des PageSpeed-Moduls.

   $ curl -sS https://modpagespeed.com/doc/release_notes | grep release_ | head -1 | sed -e "s/^.*release_([0-9.]*)-beta.*/1/"

2. Die PageSpeed-Versionsnummer wird in den Build-Befehlen mehrfach verwendet. Legen Sie sie daher als Umgebungsvariable NPS_VERSION fest. Schließen Sie nur den numerischen Teil der Versionszeichenfolge ein, nicht das Suffix „-stable“ oder „-beta“ .

   $ NPS_VERSION= numerischer Teil der Versionszeichenfolge

3. Laden Sie die Quellen wie folgt herunter und extrahieren Sie sie. Beachten Sie, dass diese Befehle wie ein Skript nacheinander ausgeführt werden müssen.

   wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip
   entpacken Sie v${NPS_VERSION}-beta.zip
   cd ngx_pagespeed-${NPS_VERSION}-beta/
   psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz
   [ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
   wget ${psol_url}
   tar -xzvf $(basename ${psol_url}) # extrahiert nach psol/

Schritt 3: Kompilieren des PageSpeed Dynamic-Moduls

1. Kompilieren Sie in der Build-Umgebung das dynamische PageSpeed-Modul, indem Sie zuerst das NGINX- Konfigurationsskript mit dem Argument --with-compat ausführen, um das dynamische Modul binärkompatibel mit NGINX Plus zu machen. Führen Sie dann „make module“ aus, um nur das Modul zu kompilieren.

   $ cd ../nginx-1.11.5 $ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION}-beta --with-compat $ Module erstellen

2. Der Build-Prozess erzeugt das dynamische Modul als objs/ngx_pagespeed.so . Kopieren Sie die .so- Datei aus der Build-Umgebung in das Modulverzeichnis /etc/nginx/modules in der Produktionsumgebung. Wir empfehlen (und der folgende Schritt setzt dies voraus), dass Sie die Datei beim Kopieren umbenennen, um die Versionsnummer von NGINX Open Source einzuschließen, zum Beispiel ngx_pagespeed_1.11.5.so .

3. Erstellen Sie in der Produktionsumgebung einen symbolischen Link zwischen dem Dateinamen mit der Versionsnummer und dem allgemeinen (ursprünglichen) Dateinamen.

   $ cd /etc/nginx/modules $ sudo ln -s ngx_pagespeed_1.11.5.so ngx_pagespeed.so $ ls -gG -rw-r--r-- 1 11924784 6. Feb. 11:52 ngx_pagespeed_1.11.5.so lrwxrwxrwx 1 23 6. Feb. 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so

Schritt 4: Laden des PageSpeed Dynamic-Moduls

Führen Sie diese Schritte in der Produktionsumgebung aus.

1. Fügen Sie die Direktive load_module ein, um PageSpeed als dynamisches Modul zu laden. Die Anweisung muss im Kontext der obersten Ebene („main“) der Konfigurationsdatei nginx.conf erscheinen (also nicht im HTTP- oder Stream -Kontext).

   Lademodulmodule/ngx_pagespeed.so;

2. PageSpeed selbst wird im HTTP- Kontext konfiguriert, daher fügen Sie diese Anweisungen in eine neue Konfigurationsdatei namens pagespeed.conf im Verzeichnis /etc/nginx/conf.d ein. PageSpeed wird für die in der Proxy_pass- Direktive angegebene Website aktiviert, hier http://www.example.com .

   Seitengeschwindigkeit MessageBufferSize 10240;
   Seitengeschwindigkeit FileCachePath /var/ngx_pagespeed_cache;
   
   Server {
   Listen 80;
   Standort / {
   Proxy_Pass http://www.example.com; 
   }
   Seitengeschwindigkeit ein;
   }

3. Laden Sie NGINX Plus neu, um das PageSpeed-Modul in die laufende Instanz zu laden.

   $ sudo nginx -s neu laden

Testen des NGINX Plus PageSpeed-Moduls mit PageSpeed Insights

PageSpeed Insights ist ein separates Tool von Google zum Messen des Optimierungsgrads einer Webseite für Mobil- und Desktopgeräte. Es bietet eine Bewertung für beide Geräte und Vorschläge, wie sich das Laden der Seite beschleunigen lässt. Es ist ein nützliches Tool zum Messen Ihrer Site und zum Demonstrieren der Wirksamkeit des PageSpeed-Moduls.

Mit PageSpeed Insights können Sie Ihren Site-Score und Optimierungsvorschläge mit und ohne aktiviertem PageSpeed vergleichen. Wechseln Sie zwischen den Anweisungen „Pagespeed ein“ und „Pagespeed aus“, um die Effektivität des PageSpeed-Moduls auf Ihrer Site zu messen.

PageSpeed wendet seine Optimierungen ohne weitere Konfiguration oder Feinabstimmung an. Wenn Sie jedoch mehr Kontrolle darüber haben möchten, welche Optimierungen auf Ihrer Site durchgeführt werden, lesen Sie die PageSpeed-Dokumentation .

Probieren Sie PageSpeed mit NGINX Plus selbst aus – starten Sie noch heute Ihre kostenlose 30-Tage-Testversion oder kontaktieren Sie uns, um Ihre Anwendungsfälle zu besprechen .