Google Page Speed - Installation unter Ubuntu

von Christian Hanne am 10. February 2014

Seit 2011 stellt Google ein Apachemodul namens Google Page Speed zur Verfügung. Dieses bietet einige nette Features mit denen man die Ladezeiten seiner Seite deutlich reduzieren kann. In diesem Artikel möchte ich Euch zeigen, wie man G oogle Page Speed unter Ubuntu installiert und Euch mit einer Beispielkonfiguration und ein paar Tipps den Einstieg erleichtern.

1. Installation unter Ubuntu

Zur Installation benötigen wir Zugriff auf den Terminal des Servers. Habt Ihr diesen nicht, bittet Euren Hoster darum mod_pagespeed zu installieren. Wenn Ihr Glück habt ist das bereits der Fall und Ihr könnt direkt zu Punkt 2 springen. Für alle anderen geht es hier weiter.

Zuerst einmal laden wir die aktuelle Version des Moduls herunter und entpacken diese:

$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
$ sudo dpkg -i mod-pagespeed-*.deb
$ apt-get -f install

Anschließend können wir das Paket entfernen.

$ rm mod-pagespeed-*.deb

Zum Abschluss müssen wir pagespeed noch aktivieren und den Apache neu starten.

$ a2enmod pagespeed
$ apache2ctl restart

Einzelheiten zur Installation auf anderen Systemen könnt Ihr hier erfahren: https://developers.google.com/speed/pagespeed/module/download

2. Konfiguration

Google Page Speed ist nun installiert und läuft hoffentlich nun problemlos. Die Konfiguration kann in der pagespeed.conf verändert werden (/etc/apache2/mods-available/pagespeed.conf). Sollte sich die Datei wider Erwarten nicht an diesem Ort befinden, könnt Ihr sie mit folgendem Befehl finden:

$ locate pagespeed.conf

Ich persönlich ziehe es allerdings vor die Einstellungen je nach Seite unterschiedlich zu handhaben. Für diesen Fall können wir auf die .htaccess Datei zugreifen. Ihr habt die Möglichkeit mehrere Filter auszuwählen, die Google Page Speed verwenden soll. Eine detaillierte Auflistung findet Ihr auf folgender Seite:

https://developers.google.com/speed/pagespeed/module/config_filters

Beispiel: christianhanne.de

Als kleines Anwendungsbeispiel möchte ich Euch die Konfiguration für meine eigene Seite nicht vorenthalten. Durch die Anweisung ModPagespeedRewriteLevel PassThrough deaktivieren wir die Core-Filter von ModPageSpeed. Dadurch können wir direkter bestimmen was wirklich benötigt wird. Prinzipiell kann man die Filter auch als Komma-separierte Liste definieren. Ich ziehe diese Variante allerdings vor, weil sie übersichtlicher und einzelne Anweisungen schneller auskommentiert werden können.

<IfModule pagespeed_module> 
  ModPagespeed on
  ModPagespeedRewriteLevel PassThrough
  ModPagespeedEnableFilters extend_cache
  ModPagespeedEnableFilters collapse_whitespace
  ModPagespeedEnableFilters combine_css
  ModPagespeedEnableFilters move_css_to_head
  ModPagespeedEnableFilters flatten_css_imports
  ModPagespeedEnableFilters remove_comments
  ModPagespeedEnableFilters inline_css
  ModPagespeedEnableFilters insert_image_dimensions
  ModPagespeedEnableFilters rewrite_css
  ModPagespeedEnableFilters rewrite_images
  ModPagespeedEnableFilters rewrite_javascript
  ModPagespeedEnableFilters defer_javascript
  ModPagespeedEnableFilters lazyload_images
</IfModule>

Google Page Speed - Filter

Für alle die des Englischen weniger mächtig sind oder die Auflistung bei Google zu unübersichtlich finden, habe ich mir die Mühe gemacht die Beschreibung der Filter zu übersetzen. Die Filter sind hierarchisch aufgebaut. Das bedeutet, dass es übergeordnete Gruppen gibt, die automatisch eine Reihe von untergeordneten Filtern aktivieren. Ich habe versucht diese Hierarchie in meiner Auflistung verständlich zu machen:

  • add_head
    Fügt jedem Dokument ein <head> Element hinzu, wenn keines vorhanden ist.

  • combine_heads
    ​Fügt mehrere <head> Elemente im Dokument zu einem einzigen zusammen.

  • inline_import_to_link
    Extrahiert @import Anweisungen aus Inline <style> Elementen zu <link> Elementen.

  • outline_css
    Lagert große CSS-Bläcke in cachebare Dateien aus.

  • outline_javascript
    Lagert große Javascript-Blöcke in cachebare Dateien aus.

  • move_css_above_scripts
    Sorgt dafür, dass CSS-Elemente immer oberhalb von <script> Tags stehen.

  • move_css_to_head
    Schiebt alle CSS-Anweisungen in das <head> Tag.

  • combine_css
    Fasst mehrere CSS-Elemente zu einem einzigen zusammen.

  • rewrite_css
    Schreibt CSS-Dateien um und entfernt dabei überflüssigen Whitespace und Kommentare. Außerdem schreibt es Bilder um, die in CSS-Dateien verlinkt sind (Hintergründe etc.). Allerdings nur dann, wenn die entprechenden Filter aktiv sind.

  • fallback_rewrite_css_urls
    Schreibt alle Referenzen in CSS-Dateien um, die ansonsten nicht gelesen oder komprimiert werden können.

  • rewrite_style_attributes
    Schreibt CSS in <style> Elementen um, indem die (für CSS-Dateien) konfigurierten Filter angewendet werden.

  • rewrite_style_attributes_with_url
    Schreibt CSS in <style> Elementen um, wenn dort der String "url(" vorkommt.

  • flatten_css_imports
    Verringert die CSS-Verschachtelung indem die @import Anweisungen reduziert werden.

  • prioritize_critical_css
    Ersetzt alle CSS-Tags mit <style> Elementen, die nur das vom Dokument benötigte CSS enthalten.

  • make_google_analytics_async
    Ändert die Nutzung von synchronem Laden der Google Analytics API zu ansynchronem Laden.

  • rewrite_javascript
    Schreibt Javascript-Dateien um und entfernt Whitespace und Kommentare.

  • combine_javascript
    Kombiniert mehrere Script-Elemente zu einem einzigen.

  • canonicalize_javascript_libraries
    Leitet Javascript-Bibliotheken zu einem Javascript Hosting Service um.

  • inline_css
    Konvertiert kleine CSS-Dateien zu Inline-Elementen.

  • inline_google_font_css
    Konvertiert kleine CSS-Dateien, die von fonts.googleapis.com genutzt werden, zu Inline-Elementen.

  • inline_javascript
    Konvertiert kleine Javascript-Dateien zu Inline-Elementen.

  • local_storage_cache
    Speichert Inline-Elemente via HTML4 Local Storage.

  • insert_ga
    Fügt ein Google Analytics Snippet zur Seite hinzu.

  • rewrite_images
    Optimiert Bilder, kodiert sie neu, entfernt überflüssige Pixel und konvertiert kleine Bilder zu Inline-Elementen.

    • inline_images
      Ersetzt kleine Bilddateien mit data:-Urls.

    • recompress_images
      Komprimiert Bilder neu und entfernt dabei überflüssige Metatags, konvertiert GIFs zu PNGs.

      • recompress_jpeg
        Komprimiert Jpegs neu und entfernt dabei überflüssige Metatags.

      • recompress_png
        Komprimiert PNGs neu und entfernt dabei überflüssige Metatags.

      • recompress_webp
        Komprimiert Webp-Dateien neu und entfernt dabei überflüssige Metatags.

      • convert_gif_to_png
        Konvertiert GIFs zu PNGs.

      • strip_image_color_profile
        Entfernt alle Farbprofile aus Bildern.

      • strip_image_meta_data
        Entfernt EXIF-Tags aus Bildern.

      • jpeg_sampling
        Reduziert das Color Sampling von Jpegs zu 4:2:0.

    • resize_images
      Verkleinert Bilder, wenn das <img>-Tag eine kleine Größe für das Bild vorsieht, als die tatsächliche Größe des Bildes.

    • resize_rendered_image_dimensions
      Verkleinert Bilder automatisch, wenn die Anzeigegröße des Bildes kleiner ist als die Größe des Bildes.

  • convert_jpeg_to_progressive
    Konvertiert große Jpegs in das Format progressive.

  • convert_png_to_jpeg
    Konvertiert alle GIF- und PNG-Dateien zu Jpegs.

  • convert_jpeg_to_webp
    Generiert Webp- anstatt Jpeg-Dateien für Browser, die dieses Format unterstützen.

  • insert_image_dimensions
    Fügt allen <img> Elementen width- und height-Attribute hinzu, wenn diese nicht vorhanden sind.

  • inline_preview_images
    Verwendet Inline-Bilder schlechter Qualität als Platzhalter für noch nicht geladene Bilder.

  • resize_mobile_images
    Funktiniert genau wie inline_preview_images, verwendet aber kleinere Bilder für Mobile Browser.

  • remove_comments
    Entfernt HTML-Kommentare.

  • collapse_whitespace
    Entfernt überflüssigen Whitespace in HTML-Dateien, außer solchen in <pre>, <script>, <style> oder <textarea> Elementen.

  • elide_attributes
    Entfernt alle unwichtigen Attribute aus HTML-Elementen (laut der HTML-Spezifikation).

  • extend_cache
    Erweitert die Cache-Lebensdauer von CSS-, Javascript- und Bildreferenzen die nicht bereits anderweitig optimiert wurden, indem die URLs mit einem Content-Hash signiert werden.

    • extend_cache_css
      Erweitert die Cache-Lebensdauer von CSS-Dateien die nicht bereits anderweitig optimiert wurden, indem die URLs mit einem Content-Hash signiert werden.

    • extend_cache_images
      Erweitert die Cache-Lebensdauer von Bild-Dateien die nicht bereits anderweitig optimiert wurden, indem die URLs mit einem Content-Hash signiert werden.

    • extend_cache_scripts
      Erweitert die Cache-Lebensdauer von Javascript-Dateien die nicht bereits anderweitig optimiert wurden, indem die URLs mit einem Content-Hash signiert werden.

  • extend_cache_pdfs
    Erweitert die Cache-Lebensdauer von PDF-Dateien, indem die URLs mit einem Content-Hash signiert werden.

  • sprite_images
    Kombiniert Hintergrundbilder zu einem einzigen Sprite.

  • rewrite_domains
    Schreibt Domains um, die nicht anderweitig von PageSpeed optimiert wurden, basierend auf den Einstellungen MapRewriteDomain und ShardDomain in der pagespeed.conf.

  • trim_urls
    Kürzt Urls, indem sie relativ zur Basisurl angegeben werden.

  • pedantic
    Fügt Default-Typen zu <script> und <style> Elementen hinzu, wenn kein type-Attribut angegeben wurde und das Dokument kein HTML5-Dokument ist.

  • remove_quotes
    Entfernt Anführungsstriche um HTML-Attribute, wo sie nicht notwendig sind.

  • add_instrumentation
    Fügt Javascript hinzu, welches die Latenz misst und zum Server zurücksendet.

  • convert_meta_tags
    Fügt jedem Metatag einen Response Header hinzu mit einem http-equiv-Attribut.

  • defer_javascript
    Verzögert die Ausführung von Javascript bis das Dokument vollständig geladen ist.

  • dedup_inlined_images
    Ersetzt sich wiederholende Bilder mit Javascript, dass das entsprechend Bild automatisch aus dem ersten Vorkommen des Bildes dupliziert.

  • lazyload_images
    Lädt Bilder erst dann, wenn der User sie im Viewport des Browsers betrachtet.

  • insert_dns_prefetch
    Fügt <link rel="dns-prefetch" href="//www.example.com"> hinzu um die für die DNS-Auflösung benötigte Zeit zu reduzieren.

Testen und Feintuning

Nachdem wir unsere Einstellungen vorgenommen haben ist natürlich die große Frage, ob Google Page Speed überhaupt läuft und seine Arbeit tut. Wir können uns mit einem Aufruf vergewissen, dass pagespeed tatsächlich aktiv ist.

$ curl -D - http://www.christianhanne.de

Wenn Google Page Speed aktiv ist, muss im Response-Header des Requests folgender String vorkommen (die Versionsnummer kann bei Euch variieren):

X-Mod-Pagespeed: 1.6.29.7-3566

Nachdem wir uns vergewissert haben, dass mod_pagespeed aktiv ist, können wir auf ein weiteres Tool von Google zurück greifen: Pagespeed Insights. Dies ist eine Erweiterung für Chrome, mit deren Hilfe Ihr Eure Seiten analysieren könnt. Spaßes halber könnt Ihr mod_pagespeed für Eure Seite ausschalten, um einen größeren Eindruck von Unterschied in der Performance zu bekommen.

Welche Filter nun letztendlich für Euch relevant sind, solltet Ihr je nach Seite bzw. Projekt entscheiden. Darum ist es sinnvoll die Einstellungen je Projekt in der .htaccess zu definieren. Ich wünsche Euch viel Spaß beim Ausprobieren.

Share this on:

Noch keine Kommentare vorhanden.

Kommentar schreiben