Mit diesen 6 Tipps wird Dein WordPress Blog noch schneller

4
771

Neben guten Inhalten braucht Dein WordPress Blog auch richtig schnelle Ladezeiten um auf den ersten Positionen bei Google und Co. mitzumischen.

Schnelle Ladezeiten erfreuen aber natürlich auch die Besucher Deines Blogs. Und wenn die zufrieden sind, dann sind es auch Bing, Google und all die anderen Suchmaschinen da draussen.

Aus diesem Grund möchte ich Dir heute 6 Tipps und Tricks an die Hand geben, mit denen Du die Ladezeiten Deines WordPress Blogs deutlich verbessern kannst.

So machst Du Deinen WordPress Blog schneller

So sehen die Zahlen für flodji.de aus, nachdem ich die Anpassungen vorgenommen habe, die ich Dir in diesem Beitrag vorstellen werde. Hier kannst Du Deine Seite testen: tools.pingdom.com

Mobile Performance meiner WordPress Seite

Auch mobil sieht alles gut aus 🙂 Hier kannst Du die mobile Performance Deiner WordPress Seite testen: testmysite.withgoogle.com

So verbesserst Du die Ladezeiten Deines WordPress Blogs

Bevor ich anfange noch ein kleiner Hinweis: Alles worüber ich hier schreibe hat auf meinen Blogs gut funktioniert und richtig für Speed gesorgt. Da aber jede Webseite anders ist (z.B. anderer Hoster, andere Plugins, anderes Theme, andere Einstellungen), muss nicht jeder meiner Tipps auch bei Dir funktionieren.
Die Anwendung der folgenden Tipps und Tricks erfolgt daher auf eigene Gefahr.

Unnütze oder ungenutzte Plugins entfernen

Wie viele Plugins hast Du installiert? 10? 20? Brauchst Du wirklich jedes einzelne davon? Jedes installierte und aktivierte Plugin wirkt sich in irgendeiner Form auch auf die Ladezeiten Deines WordPress Blogs aus.

Unter Anderem werden nämlich zusätzliche Styles und Scripts geladen, oder Funktionen im Hintergrund ausgeführt. Aus diesem Grund ist es wichtig, dass Du wirklich nur die Plugins installiert hast, die Du auch wirklich nutzt.

Es macht z.B. wenig Sinn Plugin zu installieren, nur für den Fall, dass Du es irgendwann einmal brauchen könntest. Leg Dir dafür lieber eine Favoritenliste im Browser, oder ähnliches an.

Räum‘ Deine Datenbank auf

WordPress kommuniziert oft und gerne mit seiner Datenbank. Und wenn diese besonders voll ist, dann kann es auch mal länger dauern, bis der richtige Eintrag gefunden wird.

Du kannst es Dir in etwa wie ein Bücherregal vorstellen. Solange nur 5 Bücher darin stehen, findest Du schneller das gewünschte Exemplar, als wenn es inmitten hunderter Bücher steht.

Im Laufe der Zeit und mit wachsender Anzahl von Beiträgen sammeln sich eine Menge Daten in der WordPress Datenbank an. Die meisten davon sind wichtig, damit Dein Blog korrekt funktioniert. Es gibt aber auch immer wieder verwaiste oder nicht (mehr) benötigte Einträge, die eigentlich nur noch wertvollen Speicherplatz belegen.

Ich habe mir daher angewöhnt meine Datenbanken regelmäßig aufzuräumen. Und damit ich nicht alles manuell durchsuchen und optimieren muss, habe ich mir dafür das Plugin: WP-Optimize installiert.

Dazu noch ein wichtiger Hinweis: Meinen Seiten ist zwar noch nie etwas passiert, aber es macht durchaus Sinn ein Backup der Datenbank anzulegen, bevor Du Änderungen daran vornimmst 😉

Hast Du ein schnelles WordPress Theme?

WordPress Themes sind nicht selten vollgestopft mit vielen nützlichen und auch weniger nützlichen Funktionen. Auf der einen Seite kann das natürlich super sein, auf der anderen Seite aber eben auch für höhere Ladezeiten sorgen.

Bevor Du Dir ein neues Theme kaufst, oder herunterlädst solltest Du daher schauen, ob es auch in Hinblick auf die Geschwindigkeit optimiert ist.

Ich habe mich daher z.B. für mein aktuelles WordPress Theme: Newspaper* entschieden. Es bietet nicht nur viele Gestaltungsmöglichkeiten und tolle Funktionen, sondern ist auch noch ziemlich flink 🙂

Mehr Speed durch Anpassung der .htaccess

Die .htaccess Datei ist ein wahres Wunderwerkzeug für die Pagespeed-Optimierung. Nur ein paar Zeilen Code sind nötig und Dein WordPress Blog geht ab, wie Schmitz Katze.

Ich benutze aktuell diese Einstellungen in meiner .htaccess Datei und bin damit sehr zufrieden:

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"
    ExpiresByType text/css                              "access plus 1 year"
    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"
	ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"
    ExpiresByType text/html                             "access plus 0 seconds"
    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"
    ExpiresByType text/javascript                       "access plus 1 year"
    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"
    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"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType font/eot                              "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/x-font-woff               "access plus 1 month"
    ExpiresByType font/woff                             "access plus 1 month"
    ExpiresByType application/font-woff2                "access plus 1 month"
    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"
</IfModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt 
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml 
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf 
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json 
AddOutputFilterByType DEFLATE font/opentype 
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon 

SetEnvIfNoCase REQUEST_URI .(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html

Header append Vary User-Agent env=!dont-vary
</IfModule>

<IfModule mod_headers.c>
<FilesMatch ".(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch ".(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
    Header set Connection keep-alive
</IfModule>

<IfModule mod_expires.c> 
  <IfModule mod_headers.c> 
    Header unset ETag 
  </IfModule> 
  FileETag None 
</IfModule>

<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Durch diese Befehle werden verschiedene Apache Module aktiviert, die z.B. Inhalte und Dateien komprimieren, bevor diese an den Browser ausgeliefert werden.

mod_deflate
Dieser Befehl aktiviert den DEFLATE Ausgabe-Filter. Dieser Filter hat die Aufgabe verschiedene Dateitypen zu komprimieren bevor sie an den Browser geschickt werden.
Im obigen Beispiel habe ich den Code nach Dateitypen und Mime-Typen suchen und filtern lassen.

mod_expires
Über diesen Befehl legst Du fest, wie lange bestimmte Inhalts- und Dateitypen im Browsercache abgelegt werden sollen.

mod_gzip
Gzip schrumpft die Datenausgabe über das HTTP Protokoll.

mod_headers
Über dieses Modul werden im obigen Beispiel die sogenannten ETags deaktiviert, die „Cache-Control“ Header gesetzt und die KeepAlive-Direktive aktiviert. Letztere sorgt dafür, dass eine zum Server aufgebaute Verbindung bestehen bleibt und nicht bei jeder Anfrage neu gestartet werden muss.

Fotos sind hübsch, aber auch „groß“

Fotos sind zwar (meist) schön und werten Deine Inhalte dadurch optisch auf, allerdings sind sie auch oft ein Grund für lange Ladezeiten. Ganz auf Bilder zu verzichten ist häufig keine Alternative, aber es gibt zum Glück Mittel und Wege, wie Fotos genutzt werden können, auch ohne den Seitenaufruf unnötig in die Länge zu ziehen.

Wenn Du Deine Fotos direkt aus der Kamera in Deinen WordPress Blog hoch lädst, dann werden diese mit ziemlich hoher Wahrscheinlichkeit zu groß für die Anzeige in Deinen Beiträgen sein.

Besser wäre, wenn Du die Bilder gleich von vornherein auf die richtige Größe schrumpfst.

Wenn Du Adobe Photoshop benutzt, dann würde ich Dir außerdem empfehlen zum Speichern die Funktion: „Für Web speichern…“ zu nutzen. Dadurch brauchen die Fotos weniger Speicherplatz und das wirkt sich wiederum positiv auf die Ladezeiten aus.

Es kann aber trotzdem noch sein, dass einige Pagespeed Tools Dir anzeigen, Du sollst Deine Bilder doch bitte komprimieren. Dafür gibt es zum Glück ein tolles Plugin, das ich für flodji.de auch verwende: EWWW Image Optimizer

Dieses Plugin beherrscht die verlustfreie Komprimierung von Bilddateien. Neue Bilder werden gleich beim Hochladen komprimiert und bestehende Fotos kannst Du über das Plugin auch noch optimieren.

Kleine Codeschnipsel – große Wirkung

Nicht nur mit Befehlen für die .htaccess, auch mit ein paar PHP Codeschnipseln kannst Du Deinen WordPress Blog schneller machen.

Ich habe viele davon in den letzten Monaten ausprobiert und bin diesen 3 Funktionen hängen geblieben:

<?php

/* Diese Funktion aktiviert die serverseitige GZIP / ZLIB Komprimierung */
if(extension_loaded("zlib") && (ini_get("output_handler") != "ob_gzhandler"))
   add_action('wp', create_function('', '@ob_end_clean();@ini_set("zlib.output_compression", 1);'));

/* Diese Funktion entfernt den Versionsparameter eingebundener Javascript und CSS Dateien, damit diese gecached werden können. */
function css_script_version_entfernen( $version ) {
if( strpos( $version, '?ver=' ) )
$version = remove_query_arg( 'ver', $version );
return $version;
}
add_filter( 'style_loader_src', 'css_script_version_entfernen', 1000 );
add_filter( 'script_loader_src', 'css_script_version_entfernen', 1000 );

/* Diese Funktion erweitert eingebundene Javascript Dateien um den 'defer'-Parameter, damit diese quasi asynchron geladen werden können. */
function js_parsing_defer ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
/* Eine Ausnahme definierst Du so: */
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer='defer";
}
if(!is_admin()){
add_filter( 'clean_url', 'js_parsing_defer', 11, 1 );
}

?>

Ich habe jeweils immer darüber geschrieben, wofür die einzelnen Funktionen nützlich sind und wie sich Ausnahmen definieren lassen, wenn nötig.

Du kannst den Code gerne abtippen und in die functions.php Deines Themes kopieren (ohne die <?php und ?> Tags), oder Du lädst Dir das Ganze als kostenloses Plugin direkt hier herunter:

SpeedUp Functions downloaden

 

Du brauchst das Plugin nur hochladen und aktivieren. Einstellungen gibt es keine. Bei Fragen oder wenn Du Probleme mit dem Plugin haben solltest, schreib mir einfach einen Kommentar unter diesen Beitrag, oder schick mir eine Nachricht.

Das waren meine 6 Tipps und Tricks mit denen Du die Ladezeiten Deines WordPress Blogs verbessern kannst. Ich hoffe sie gefallen Dir.

Falls Du noch Fragen oder Ergänzungen haben solltest, schreib mir gerne einen Kommentar unter diesen Beitrag.

4 Kommentare

  1. Hi Florian, wenn du kein Bock hast dich um das ganze selbstständig zu kümmern, ich weiß das Entwickler da oft aber Bock drauf haben, dann kannst du dich auch an Spezialisten wenden die das für dich 24/7 übernehmen und damit meine ich keine generischen Hoster! 🙂

Hinterlasse einen Kommentar

Hier ist Platz für Deinen Kommentar
Hier gehört Dein Name hin