WordPress und Google PageSpeed Insights

Um das organische Ranking für die eigene Webseite zu beeinflussen kommt man nicht daran vorbei sich an die Vorgaben zu halten, welche durch Google selbst festgelegt wurden.

Google macht regelmäßig Veröffentlichungen, um Webentwickler darauf hinzuweisen, wie eine Webseite technisch aufgebaut sein sollte, damit der GoogleBot die Seite sauber indizieren und für relevante Keywords mit dem entsprechenden Ranking versieht.

Google SearchConsole (Webmaster Tools)

Google bietet hierzu diverse Tools, um seine eigene Seite prüfen zu können. Mit der SearchConsole früher Webmaster Tools genannt, kann man feststellen unter welchen Keywords man wie gefunden wurde und ob Google die Seite gut indizieren konnte.

Google PageSpeed Insights

Die Indizierung mit den passenden Keywords aus Page-Title, Meta-Description und Inhalt ist die eine Sache, aber immer wichtiger wird die Performance der Seite. Besonders im Hinblick auf die Darstellung auf mobilen Endgeräten mit teilweise begrenzter Download-Geschwindigkeit ist es wichtig, dass die Seite schnell geladen wird, nicht zu viel Speicher verbraucht und im Browser auch schnell aufgebaut wird.

Mit dem Programm PageSpeed Insights kann man seine eigene Seite prüfen lassen und es werden einem Hinweise gegeben, um die Performance zu steigern und störende Faktoren für den Seitenaufbau zu eliminieren.

Man kann nun der Ansicht sein, dass diese Performance-Punkte ab einem gewissen Punkt auf Kosten der Usability oder optisch ansprechenden Darstellung geht. Dies ist sicher auch richtig, aber ich vertrete die Meinung, dass die von Google aufgeführten Richtlinien ein guter Hinweis sind, dass der Coder der HTML-Templates und Admin der Content Management Systeme seinen Job noch besser machen könnte.

Eine Hürde in der Wirtschaft ist sicher auch das Geld und nicht alle sind bereit bereits bei der Konzeption mehr Geld auszugeben, um später eine maximal optimierte Seite zu erhalten. Ein Kompromiss ist da zumeist produktiver.

Aus Erfahrung sinnvoll.

Meine Erfahrung zeigt aber auch, dass eine hochperformante Seite im organischen Ranking von Google stark bevorzugt wird. Und es sollte in jedem Fall eine solche Optimierung erfolgen bevor man weitere Marketing-Maßnahmen ergreift, z.B. durch eine AdWords-Kampagne.

Für WordPress werden eine Vielzahl von Plugins angeboten, welche genau für diesen Zweck bestimmte Veränderungen am System vornehmen, aber bei genauerer Betrachtung scheinen nicht alle sinnvoll, oder umsetzbar.

Ich werde auf einige Punkte eingehen und im Detail erklären, wie man mit WordPress und dem Webserver diese Ziele erreichen kann.

Browser-Caching und Komprimierung

Ein Beispiel findet man in folgendem Artikel, hier.

Weitere Hinweise direkt von Google.

 

Quellcode, CSS und Javascript optimieren

Wichtig ist, dass mit einfachen Mitteln die Dateigröße reduziert wird. Z.B. können Zeilenumbrüche entfernt und die Syntax gestrafft werden.
Dies manuell zu machen ist etwas aufwändig.
Um WordPress die Arbeit machen zu lassen, kann man entsprechende Plugins verwenden, hier.

Wenn man nicht auf Plugins zurückgreifen möchte und die Quelldateien selbst bearbeiten möchte, gibt es ebenfalls Tools mit denen der Code optimiert werden kann, um diesen dann wieder einbinden zu können.
Hier sind dazu Hinweise von Google.

 

Bilder optimieren

Bilder, aber auch andere Medien, stellen die größten Dateien dar, welche vom Server zum Browser übertragen werden müssen.
Man sollte mit einem Grafikprogramm (Notfalls Paint) umgehen können, um z.B. Bild in der passenden Auflösung in WordPress hochzuladen. Dadurch kann man bereits die Größe reduzieren bevor das Medium in einen Artikel gelegt wird.

Alternativ gibt es Plugins, welche über einen Image-Prozessor die Komprimierung der Bilddatei erneuert und dadurch die Größe nochmals reduziert.
Eines dieser Plugins ist EWWW Image Optimizer, welches ich durchaus empfehlen kann.

Ansonsten bietet PageSpeed Insights selbst die Möglichkeit optimierte Dateien aus der analysierten Seite herunterzuladen. Diese lassen sich dann direkt zum Upload verwenden.

Ansicht von PageSpeed mit Download

 

Sichtbare Inhalte priorisieren

Unter dem Begriff „above the fold“ wird der nach dem Laden der Seite sichbare Teil bezeichnet und die dazu gehörenden Scripte und Stylings.
Wenn der HTML-Code so entwickelt wurde, das CSS oder Javascript erst komplett geladen sein muss, bevor der Browser die Seite korrekt anzeigt, so kann es zu Blockierungen beim Rendering kommen. Dies wird PageSpeed anmerken.

Das Auflösen dieses Problems kann sehr kompliziert werden und wird in einem eigenen Beitrag abgehandelt.

Browser-Caching und Komprimierung

Voraussetzung um Browser-Caching und Komprimierung zu aktivieren ist die Installation folgender Module auf einem Linux/Apache Webserver:

  • mod_headers
  • mod_deflate
  • mod_expires

Diese Module ermöglichen nun durch einfache Einträge in der HTACCESS-Datei Browser-Caching und Komprimierung für die gängigen Datei-Endungen zu aktivieren.

Beispiel:

<IfModule mod_headers.c>
    Header set Connection keep-alive
    Header append Cache-Control "private"
    <FilesMatch "\.(js|css)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    <FilesMatch "\.(gif|png|jpg|jpeg|pdf|ico|svg)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
</IfModule>

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript application/x-javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component application/json
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject font/truetype application/x-font-ttf font/opentype application/x-font-woff
    AddOutputFilterByType DEFLATE font/opentype font/truetype font/eot
</IfModule>

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault "access plus 7 days"
    ExpiresByType text/html "access plus 0 seconds"
    ExpiresByType application/rss+xml "access plus 7 days"
    ExpiresByType image/ico "access plus 7 days"
    ExpiresByType image/gif "access plus 7 days"
    ExpiresByType image/png "access plus 7 days"
    ExpiresByType image/jpg "access plus 7 days"
    ExpiresByType image/jpeg "access plus 7 days"
    ExpiresByType font/truetype "access plus 7 days"
    ExpiresByType application/x-font-ttf "access plus 7 days"
    ExpiresByType font/opentype "access plus 7 days"
    ExpiresByType application/x-font-woff "access plus 7 days"
    ExpiresByType image/svg+xml "access plus 7 days"
    ExpiresByType application/vnd.ms-fontobject "access plus 7 days"
    ExpiresByType application/javascript "access plus 7 days"
    ExpiresByType application/x-javascript "access plus 7 days"
</IfModule>

 

Diese Konfiguration reicht schon aus, um die Antwortgeschwindigkeit der Seite und die Größe der Übertragungen zu verringern.
Bei Bedarf können die Einträge erweitert werden, um weitere Content-Types und Dateiendungen abzudecken. So können z.B. Videos, XML-Dateien etc. noch in die Listen aufgenommen werden.

In WordPress CSS, Javascript und HTML reduzieren

Die oberste Regel ist „Müllvermeidung“.

Wenn ein Theme entwickelt wird, dann sollte man darauf achten wirklich nur die absolut nötigen Scripts zu verwenden und von vorhinein sauberen Code abzuliefern. Wer Müll vermeidet braucht weniger Zeit um diesen dann zu entfernen.

Die meisten Themes fügen CSS und JS Dateien in der function.php per wp_register_style und wp_register_script hinzu. Auf diese Weise sind alle Dateien über interne Funktionen erreichbar und dadurch auch automatisiert manipulierbar.

Es gibt eine ganze Reihe von Plugins welche die registrierten Dateien auslesen und mit entsprechenden Programmen verkleinern können.
Dies macht vor allem in Kombination mit einem Seiten-Cache Plugin Sinn, wie z.B. WP Fastest Cache oder WP Super Cache.

Requests verringern

Zusätzlich bieten die Caching Plugins die Möglichkeit Javascript und CSS Dateien zu jeweils nur einer Datei zusammenzulegen. Das spart vor allem Requests durch den Browser.