WordPress Ladezeiten optimieren mit Google PageSpeed Insights

Speed Tests mit Tools wie Google Pagespeed Insights, Webpagetest oder pingdom sind sehr praktisch um die Performance der eigenen Seite im Auge zu behalten. Die Ergebnisse der Messungen können sehr hilfreich sein aber es ist auch wichtig diese Daten richtig zu interpretieren.

Übertreibe es nicht mit der Optimierung
pageinsights

Google Pagespeed Insights wurde vor allem als Leitfaden und Werkzeug für die besten Performance-Praktiken entwickelt. Die Bewertung soll schlicht helfen Webseiten zu optimieren und kein festes Regelbuch darstellen. Es ist auch wichtig zu erwähnen dass die Erreichung von 100/100 Punkten nicht immer möglich ist, je nachdem wie deine Server-Umgebung eingerichtet ist.

WordPress und Google PageSpeed Insights

Es kann manchmal recht schwierig sein WordPress flott zu bekommen. Wir alle wissen, sind WordPress Seiten nicht immer die schnellsten. Das liegt aber nicht an WordPress sondern mehr an schlechten WordPress Themes, langsamen Servern oder schlicht an fehlender Optimierung. Vor allem wenn auch noch zig unnötige Plugins installiert wurden und dadurch die Seite zusätzlich beim Laden ausgebremst wird. Ich habe diesen Blog bereits auf 100/100 Punkten gehabt, aber leider musste ich das CDN aufgrund der Umstellung des Blogs auf SLL deaktivieren. (Aufgrund der fehlenden Rechte musste ich bei 1und1 wieder deren Nameserver eintragen um SLL zu aktivieren). Deswegen fehlen wieder ein paar Punkte was ich aber durchaus entspannt sehe.

Hier ist, was ich in meiner Wordpress -Installation konfiguriert habe.

1. Bilder optimieren

Um diese Warnung zu beheben, installieren wir einfach das TinyPng-Plugin. Dieses Plugin konzentriert sich auf die verlustfreie Komprimierung, was bedeutet, dass du keine Qualitätsverluste hast. Es hat eine Massen-Optimierungsfunktion, so kannst du nur mit einem Klick alle Bilder auf einmal komprimieren. Und von da an werden alle deine automatisch beim Hochladen komprimiert. Es gibt weitere kostenlose Alternativen und kostenpflichtige mit netten Funktionen wie .webp Support

2. JavaScript und CSS verkleinern

Als nächstes müssen wir unsere JavaScript, CSS und HTML Dateien verkleinern. Dazu installieren wir das kostenlose „Autoptimize“ Plugin. In den Einstellungen des Plugins musst du folgendes aktivieren:

  1. HTML-Code optimieren
  2. JavaScript-Code optimieren
  3. CSS Code optimieren

Zusätzlich lassen wir mit Hilfe von dem „Cache Enabler“ Plugin statische HTML Dateien unserer Seite erstellen. Das bringt nochmal eine Verbesserung. Der Cache Enabler Plugin erzeugt statische HTML-Dateien und speichert sie auf dem Server Platte. Der Web-Server wird die statische HTML-Datei liefern und vermied die ressourcenintensive Backend-Prozesse (Kern, Plugins und Datenbank). Das WordPress -Cache-Maschine wird die Leistung Ihrer Website zu verbessern.

3. Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“

CSS und JS Dateien

Die erste Frage, die wir zu bewältigen haben, ist alle unsere JavaScript und CSS-Dateien, die über der Falte sind, so dass sie blockierend zu machen. Um dies zu beheben wir gehen tatsächlich zurück in die Autoptimize Plugin wir früher installiert und die folgenden Einstellungen zu speichern.

  1. Unter JavaScript-Optionen deaktivieren „JavaScript in <head>“
  2. Unter CSS Optionen „Inline all CSS“ aktivieren

Google Fonts

Standardmäßig lädt Wordpress die Schriftart in der Kopfzeile. Dies führt automatisch zu blockierenden Ressourcen. Um dies zu beheben installieren wir ein kostenloses Plugin namens „Disable Google Fonts“. Vereinzelt bieten Themes diese Funktion in ihren eigenen Einstellungen. Dort sollte man zuerst nachschauen.

Wir laden unsere Google-Schrift mit dem folgenden Code in der Fußzeile, direkt vor dem </ body> -Tag.

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:300,500,700' rel='stylesheet' type='text/css'>

Achtung: Kann einen kurzes Flakkern zur Folge haben

Mit dem Google Web Font Loader lassen sich Google-Schriftarten asynchron laden. Einfach den folgenden Code in die Fußzeile, direkt vor dem </ body> -Tag einfügen.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:300,500,700' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

4. Browser Caching

Dateien

Um das Browser Caching für 24 Stunden zu aktivieren fügen wir folgenden Code in unsere .htaccess Datei ein.

 <filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
 Header set Cache-Control "max-age=84600, public"
 </filesMatch>

Code für Nginx server:

location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 1d;
    add_header Cache-Control "public, no-transform";
}

Google Analytics

Ein weiteres Problem ist Google Analytics. Das lustige daran, es ist eine Warnung aus ihrem eigenen Skript. http://www.google-analytics.com/analytics.js. Das Problem tritt auf, weil ihr Skript, eine Cache-Lebensdauer von nur 2 Stunden hat. Google hat bereits gesagt, dass sie dies nicht beheben. So bekommt fast jeder diese Meldung.

Die einzige Lösung, die ich bisher gefunden habe ist Jesse Luoto’s GA-lite-Skript. Das Skript lädt automatisch das Google Analytics JS ein. Kopiere den folgenden Code in die Fußzeile, kurz vor dem </ body> -Tag. Vergess nicht deine UA Tracking-ID einzutragen.

<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async> </ script> <script> var Galite = Galite || {}; galite.UA = 'UA-DEINE ID'; </script>

5. Komprimierung aktivieren

gzip ist unheimlich wichtig um die übertragene Datenmenge zu reduzieren. Man erzielt teilweise bis zu 85% an Einsparung. Abhängig vom jeweiligen Dateityp. Aber bei sehr kleinen Dateien ist die Einsparung an übertragenen Daten sehr gering. Dem gegenüber steht der erhöhte Aufwand zum Dekomprimieren der Inhalte. Deshalb macht es wenig Sinn, sehr kleine Dateien zusätzlich zu komprimieren. Bilder per gzip zu komprimieren bringt auch keinen Vorteil, da hierbei kaum eine Verkleinerung der Bilddateien zu verzeichnen ist. Man muss Bilder mit Bildbearbeitungsprogrammen wie Gimp oder Photoshop vorher optimieren oder zB bei WordPress ein entsprechendes Plugin installieren. Ein Plugin ist natürlich bequem, dennoch kann man mit Online Tools wie tinypng.com Bilder schnell und komplett ohne Bildbearbeitungskenntnisse kostenlos optimieren.

Apache

Komprimierung mit Hilfe der .htaccess Datei aktivieren.

<IfModule mod_deflate.c>
  # Komprimiere HTML, CSS, JavaScript, Text, XML und fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Für Suchmaschinen
  Header append Vary User-Agent
</IfModule>

Es funzt einfach nicht

Falls du Probleme bei manchen Dateien hast, kann es sein das dein Webserver die Dateitypen nicht korrekt setzt. Um das zu verhindern kannst du mit folgender Konfiguration manuell den Dateityp für eine bestimmte Datei-Endung setzen:

<IfModule mod_mime.c>
  AddType image/x-icon .ico
</IfModule>

Es hilft meist nicht gleich aufzugeben sondern unterschiedliche Konfigurationen auszuprobieren. Quellen findet man im Netz dazu reichlich. Beim Apache Webserver lässt sich über eine PHP Info Datei die aktuelle Konfigurationen samt allen geladenen Module ausgeben. Dazu einfach eine PHP Datei mit folgendem Code erstellen, auf deinen Server ziehen und im Browser aufrufen. In der Ausgabe werden weiter unten alle Module wie mod_deflate, das für gzip genutzt wird, ausgegeben.

<?php phpinfo(); ?>

Den bei fast jedem ist die Server-Umgebung unterschiedlich und daher gibt es auch kein Patentrezept. In schwierigen Fällen hilft zu recherchieren oder zu beim Hoster nachzufragen ob zB gzip auf dem Server möglich ist, bevor man Tage damit verbringt vergebens unterschiedliche Ansätze auszuprobieren.

Nginx

Du kannst die Kompression mit Hilfe der nginx.conf Datei aktivieren.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

6. Antwortzeit des Servers reduzieren

Und schließlich müssen wir noch die Antwortzeit des Servers reduzieren . Der beste Tipp ist wenn möglich einen schnelleren Web-Host zu verwenden oder es reicht meist nur ein CDN Netzwerk zu einzurichten. Aber Vorsicht, das bedeutet meist zusätzliche Kosten. Es gibt hierfür auch kostenlose Alternativen wie CloudFire. Ich habe es ausprobiert. Die Einrichtung ist spielend einfach und für WordPress gibt es natürlich entsprechende Plugins.

Wenn du alle Punkte erfolgreich gemeistert hast, solltest du jetzt eine 100/100 Bewertung in Google Pagespeed Insights erhalten.

Fazit

Die Empfehlungen von Google Pagespeed Insights sind sehr hilfreich und man kann bei richtiger Anwendung gewaltige Verbesserungen erzielen. Auch hier empfiehlt es sich nicht nur von den Zahlen besessen zu sein. Wenn du keine 100/100 Punkten erzielen kannst, dann ist es nicht das Ende der Welt. Es kann durchaus passieren das du dein gesamtes Wochenende mit der Optimierung verbringst um am Ende nur geringe Verbesserungen hinsichtlich der tatsächlichen Ladezeit zu erzielen. Am besten optimierst du so viel wie in deinem Rahmen möglich und in Punkto Aufwand/Leistung gerechtfertigt ist. Und vergesse dabei nicht die anderen Aspekte einer guten Seite wie eine gute Usability oder interessante Inhalte. Nur weil eine Seite schnell lädt ist sie nicht automatisch gut. Die Einheit aus einer guten technischen Basis, einem ansprechendem Design und wertvollem Inhalt macht eine Seite in meinen Augen perfekt.