Webseiten Optimieren

Mit Hilfe von mod_pagespeed und Pagespeed Insights

Marcel Thole

Agenda

Was ist mod_pagespeed?

Was macht Pagespeed Insight?

Zusammenfassung der Optimierungen

Praxisbeispiele

mod_pagespeed

Ein Modul für Apache und NGINX

Verändert den HTML-Quelltext

Verändert die HTTP-Header

Legt einen optimierten Cache an

HTML-Anpassungen

Eindeutiger Dateiname 

                                <img src="img_shop/products/.3/x13418_63035.jpg.pagespeed.ic.uXhF5iLsSI.jpg">
Zusammenfassen mehrerer Dateien 

                                <script src="js/jquery.jselectbox.js+vendor,_jquery.elevateZoom.min.js+plugins.js.pagespeed.jc.MDoYSqI-Nc.js"></script>
Entfernen von Leerzeichen in Styles und Scripten 

                                <style>footer,header,nav{display:block}audio:not([controls]){display:none;height:0}</style>

Header-Anpassungen

Hinzufügen der Cache Header für ein Jahr 

HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: max-age=31536000
Connection: keep-alive
Content-Length: 10746
Content-Type: image/png
Date: Tue, 08 Mar 2016 19:02:58 GMT
Etag: W/"0"
Expires: Wed, 08 Mar 2017 18:33:40 GMT
Last-Modified: Tue, 08 Mar 2016 18:33:40 GMT
Server: nginx
2. Aufruf 

HTTP/1.1 304 Not Modified
Server: nginx
Date: Tue, 08 Mar 2016 19:02:58 GMT
Connection: keep-alive

Optimierter Cache

Es werden komprimierte Bilder erstellt und zwischengespeichert
51,6 KB 14,0 KB

- 73%

Pagespeed Insight

Prüft die Perfomance der Webseite

Problemmeldungen ohne mod_pagespeed

Bilder optimieren

  • Komprimierung der Bilder via jpegtran und OptiPNG
  • Für statische Bilder gulp-imagemin nutzen.
  • SVG statt gif/png/jpg
  • SVG statt Icon-Font
  • Kleine Grafiken auch inline via base64
Bsp. spacer.gif

Komprimierung aktivieren 


<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
                              "application/javascript" \
                              "application/json" \
                              "application/ld+json" \
                              "application/manifest+json" \
                              "application/rdf+xml" \
                              "application/rss+xml" \
                              "application/schema+json" \
                              "application/vnd.geo+json" \
                              "application/vnd.ms-fontobject" \
                              "application/x-font-ttf" \
                              "application/x-javascript" \
                              "application/x-web-app-manifest+json" \
                              "application/xhtml+xml" \
                              "application/xml" \
                              "font/eot" \
                              "font/opentype" \
                              "image/bmp" \
                              "image/svg+xml" \
                              "image/vnd.microsoft.icon" \
                              "image/x-icon" \
                              "text/cache-manifest" \
                              "text/css" \
                              "text/html" \
                              "text/javascript" \
                              "text/plain" \
                              "text/vcard" \
                              "text/vnd.rim.location.xloc" \
                              "text/vtt" \
                              "text/x-component" \
                              "text/x-cross-domain-policy" \
                              "text/xml"
</IfModule>

Browser-Caching nutzen 


<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault                              "access plus 1 month"
# CSS
ExpiresByType text/css                      "access plus 1 year"
# Data interchange
ExpiresByType application/atom+xml          "access plus 1 hour"
ExpiresByType application/rdf+xml           "access plus 1 hour"
ExpiresByType application/rss+xml           "access plus 1 hour"

ExpiresByType application/json              "access plus 0 seconds"
ExpiresByType application/ld+json           "access plus 0 seconds"
ExpiresByType application/schema+json       "access plus 0 seconds"
ExpiresByType application/vnd.geo+json      "access plus 0 seconds"
ExpiresByType application/xml               "access plus 0 seconds"
ExpiresByType text/xml                      "access plus 0 seconds"
# Favicon (cannot be renamed!) and cursor images
ExpiresByType image/vnd.microsoft.icon      "access plus 1 week"
ExpiresByType image/x-icon                  "access plus 1 week"
# HTML
ExpiresByType text/html                     "access plus 0 seconds"
# JavaScript
ExpiresByType application/javascript        "access plus 1 year"
ExpiresByType application/x-javascript      "access plus 1 year"
ExpiresByType text/javascript               "access plus 1 year"
# Manifest files
ExpiresByType application/manifest+json     "access plus 1 week"
ExpiresByType text/cache-manifest           "access plus 0 seconds"
# Media files
ExpiresByType audio/ogg                     "access plus 1 month"
ExpiresByType image/bmp                     "access plus 1 month"
ExpiresByType image/gif                     "access plus 1 month"
ExpiresByType image/jpeg                    "access plus 1 month"
ExpiresByType image/png                     "access plus 1 month"
ExpiresByType image/svg+xml                 "access plus 1 month"
ExpiresByType image/webp                    "access plus 1 month"
ExpiresByType video/mp4                     "access plus 1 month"
ExpiresByType video/ogg                     "access plus 1 month"
ExpiresByType video/webm                    "access plus 1 month"
# Web fonts
# Embedded OpenType (EOT)
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/eot                      "access plus 1 month"
# OpenType
ExpiresByType font/opentype                 "access plus 1 month"
# TrueType
ExpiresByType application/x-font-ttf        "access plus 1 month"
# Web Open Font Format (WOFF) 1.0
ExpiresByType application/font-woff         "access plus 1 month"
ExpiresByType application/x-font-woff       "access plus 1 month"
ExpiresByType font/woff                     "access plus 1 month"
# Web Open Font Format (WOFF) 2.0
ExpiresByType application/font-woff2        "access plus 1 month"
# Other
ExpiresByType text/x-cross-domain-policy    "access plus 1 week"
</IfModule>

Problemmeldungen auch mit mod_pagespeed

  • JavaScript / CSS / HTML reduzieren
    • Nur benötigte Resourcen verwenden
  • Sichtbare Inhalte priorisieren
    • Header-Styles/Scripts priorisieren
    • Prüfen je nach Einzelfall: CSS Inline oder als externe CSS-Datei
    Auch wenn Styles und Scripte im Footer hinterlegt sind, können diese angezeigt werden, da diese notwendig sind um den sichtbaren Inhalt zu rendern.
  • JavaScript- und CSS-Ressourcen, die das Rendering blockieren
    • Wichtige Styles in den Head
    • Javascript in den Footer
    <script async defer>

Zusammenfassung der Optimierungen

mod_pagespeed installieren

Vorteile:

Unter Apache schnell eingerichtet

Standardfilter meist schon ausreichend

Kaum Probleme durch gecachte Inhalte 


                                    # touch /var/cache/mod_pagespeed/cache.flush
                                
http://url.tld/?ModPagespeed=off

Nachteile:

Unter NGINX schwer zu installieren

Aktuelle Version unterstützt kein srcset oder picture

WebCMS erweitern

jpegtran und OptiPNG auf Servern installieren

Layout Klasse für Styles und Javascript

  • Keine fehlenden Abhängigkeiten durch Skripte in Bausteinen
  • Alles im Footer der Webseite
  • Nur benötigte Dateien werden ausgeliefert
  • Eindeutige gecachte URL möglich

Umsetzungen stets optimieren

Alten CSS-Code löschen

Nicht benötigten Javascript Code und Bibliotheken löschen

VanillaJS einsetzen wenn möglich

PageSpeed Insights (auch als Addon) verwenden

Tasks mit Gulp automatisieren und optimieren

Nützliche Tools:
DOMMonster (Beispiel)
Critical CSS anzeigen

Praxisbeispiele

jpegoptim installieren/nutzen


# apt-get install jpegoptim
# cd /path/to/images/
# find -type f -name "*.jpg" -exec sudo -u wwwuser jpegoptim -pqtm75 --strip-all {} \;
Benutzer ändern

NGINX im Einsatz?

Respone Header prüfen: 

HTTP/1.1 304 Not Modified
Server: nginx
Connection: keep-alive
                        

# GZIP!
gzip on;
gzip_comp_level 6;
gzip_buffers 4 32k;
gzip_types  "application/atom+xml"
            "application/javascript"
            "application/json"
            "application/ld+json"
            "application/manifest+json"
            "application/rdf+xml"
            "application/rss+xml"
            "application/schema+json"
            "application/vnd.geo+json"
            "application/vnd.ms-fontobject"
            "application/x-font-ttf"
            "application/x-javascript"
            "application/x-web-app-manifest+json"
            "application/xhtml+xml"
            "application/xml"
            "font/eot"
            "font/opentype"
            "image/bmp"
            "image/svg+xml"
            "image/vnd.microsoft.icon"
            "image/x-icon"
            "text/cache-manifest"
            "text/css"
            "text/html"
            "text/javascript"
            "text/plain"
            "text/vcard"
            "text/vnd.rim.location.xloc"
            "text/vtt"
            "text/x-component"
            "text/x-cross-domain-policy"
            "text/xml";

Danke für die Aufmerksamkeit

Fragen?