Dieses Tutorial zeigt wie man auf einem All-Inkl. Server WordPress eine Pagespeed-Optimierung durchführt.

    • Allgemeine WordPress Einstellungen
    • Empfohlene Plugins zur Bildoptimierung
    • Zusammenfassung von Java-Script und CSS
    • Caching Lösung für WordPress

Allgemeine Einstellungen für mehr WordPress pagespeed

WordPress Memory Limit erhöhen

Um WordPress etwas mehr Power zu geben gehe in die wp-config.php. Dort am Beginn der Datei folgendes einfügen:

define('WP_MEMORY_LIMIT', '256M');

Damit die Einstellungen für das WordPress Memory Limit auch greifen, folgende Einstellungen der .htaccess hinzufügen:

php_value post_max_size 32M 
php_value upload_max_filesize 32M // Maximale Dateigröße
php_value memory_limit 256M // PHP-Memory Limit
php_value max_execution_time 300 // Maximale Skriptlaufzeit
php_value max_input_time 300 // Maximale Eingabedauer
php_value session.gc_maxlifetime 86400 // Sesson Laufzeit

Dies erhöht die PHP-Leisungsmerkmale so, dass alle Plugins reibungslos und schnell laufen.

WordPress Cronjob umstellen

Dies sorgt dafür, dass WordPress nun pro Skript bis zu 256M verbrauchen kann. Die Standardeinstellung ist hier 40M.

define('DISABLE_WP_CRON', true);

Diese Einstellung schaltet den WordPress Cronjob ab. Dieser wird sonst bei jedem Aufruf der Seite geladen, was in der Regel unnötig ist.

Damit dennoch ein Cronjob zur Verfügung steht, müssen wir diesen nun im All-Inkl. KAS unter Tools > Cronjobs anlegen.

Wordpress Pagespeed Optimierng

Anschließend speichern. Der Cronjob sollte jetzt aktiv sein.

Plugins zur Bildoptimierung

Um einen optimalen WordPress pagespeed und Bewertungen bei Google zu erreichen, ist eine Bildoptimierung unerlässlich. Der erste und wichtigste Schritt ist sicherzustellen, dass das verwendete Theme Bilder in die korrekte Größe bringt und nicht skaliert darstellt. Ist dies nicht so, sollte man entsprechende Thumbnail formate anlegen.

 // Set Thumbs Sizes
    add_image_size( 'thumnail-slug', 300, 240, true );           // Thumb

Für die Bildoptimierung unter WordPress empfehle ich die Plugins Imsanity und EWWW Image Optimizer. Imsanity sorgt dafür, dass Bilder mit „verrückten“ Größen sofort auf ein vorgegebenes Maß reduziert werden. Das spart vor allem Speicherplatz und vermeidet Full-Size Bilder mit 16MB und sonstige Späße. EWWW-Image Optimizer arbeitet komplexer. Das Plugin berechnet Bilder neu und speichert diese in kompakteren Formaten ab. In meinen frühere Turorial Bildoptimierung unter WordPress gehe ich näher auf die Einstellungen dieser Plugin und der Funktionsweise ein.

EWWW Image-Optimizer bei All-Inkl.

Ich möchte an dieser Stelle nur ein kurzes Snippet über die besonderen Einstellungen bringen, die für All-Inkl.com notwendig sind. All-Inkl.com hat die exec() funktion in der Standardkonfiguration nicht freigegeben. Diese kann man aber aktivieren, wenn man die Installation via .htaccess in cgi-mode setzt. Folgender Eintrag muss für die Funktion von EWWW-Image Optimizer vorgenommen werden.

AddHandler php56-cgi .php

EDIT: Achtung. Wer seine Installation über eingeschränkte PHP-Nutzerrechte absichert wie in Ernestos Artikel zur WordPress Sicherheit erwähnt, der schaltet diese Sicherung mit dem .htaccess Eintrag wieder ab.

Weiter sollte für den EWWW-Image Optimizer das WebP Format aktiviert werden. Damit dies korrekt erkannt und auf nicht unterstützten Browsern ausgeschlossen wird, die .htaccess um folgende Zeilen erweitern:

#EWWW IMAGE Optimizer
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (.+).(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
#EWWW IMAGE Optimizer

Zusammenfassung von JavaScript und CSS

Für das Zusammenfassen von JS & CSS Dateien zur WordPress Pagespeed Optimierung gibt es viele Plugins. Leider besitzen viele nicht die Flexibilität um mit nahezu allen Themes umgehen zu können. Der einzige, der zufriedenstellend arbeitet ist meiner Meinung nach Better WordPress MinifyDas Plugin bietet die Möglichkeit den Umgang JavaScript & CSS Dateien einzeln zu definieren und diese, wenn notwendig auch von der Optimierung aus zu schließen.

Caching von WordPress

Nun, da die Bilder klein und JS & CSS zusammengefasst sind, kommt die WordPress Pagespeed Optimierung durch Caching zum tragen. Mein Favorit weil am einfachsten zu konfigurieren ist Cachify.

Folgende Konfiguration ist unter PHP 5.6, welche wir bereits beim EWWW-Image Optimizer eingestellt haben, optimal:

Cachify Einstellung HDD-Caching wählen.

Folgende Zeilen in die .htaccess einfügen:

 # BEGINN CACHIFY
<IfModule mod_rewrite.c>
    # ENGINE ON
    RewriteEngine On

    # GZIP FILE
    <IfModule mod_mime.c>
        RewriteCond %{REQUEST_URI} /$
        RewriteCond %{REQUEST_URI} !^/wp-admin/.*
        RewriteCond %{REQUEST_METHOD} !=POST
        RewriteCond %{QUERY_STRING} =""
        RewriteCond %{HTTP_COOKIE} !(wp-postpass|wordpress_logged_in|comment_author)_
        RewriteCond %{HTTP:Accept-Encoding} gzip
        RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/cachify/%{HTTP_HOST}%{REQUEST_URI}index.html.gz -f
        RewriteRule ^(.*) /wp-content/cache/cachify/%{HTTP_HOST}%{REQUEST_URI}index.html.gz [L]

        AddType text/html .gz
        AddEncoding gzip .gz
    </IfModule>

    # HTML FILE
    RewriteCond %{REQUEST_URI} /$
    RewriteCond %{REQUEST_URI} !^/wp-admin/.*
    RewriteCond %{REQUEST_METHOD} !=POST
    RewriteCond %{QUERY_STRING} =""
    RewriteCond %{HTTP_COOKIE} !(wp-postpass|wordpress_logged_in|comment_author)_
    RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/cachify/%{HTTP_HOST}%{REQUEST_URI}index.html -f
    RewriteRule ^(.*) /wp-content/cache/cachify/%{HTTP_HOST}%{REQUEST_URI}index.html [L]
</IfModule>
# END CACHIFY

Browser Caching & Expires setzen

Weiter kann der WordPress Pagespeed durch Browsercaching optimiert werden. Dabei werden Dateien, die bereits einmal geladen wurden nicht erneut geladen, wenn man eine neue Seite aufruft. Um das Browsercaching zu aktivieren und die Caching dauer festzulegen, noch folgende Zeilen in die .htaccess einfügen:

 <IfModule mod_expires.c>
      ExpiresActive On
      ExpiresDefault "access plus 1 days"
      ExpiresByType text/html "access plus 5 minutes"
      ExpiresByType text/xml "access plus 6 hours"
      ExpiresByType text/css "access plus 1 weeks"
      ExpiresByType text/javascript "access plus 1 weeks"
      ExpiresByType application/javascript "access plus 1 weeks"
      ExpiresByType application/x-javascript "access plus 1 weeks"
      ExpiresByType text/ecmascript "access plus 1 weeks"
      ExpiresByType image/gif "access plus 1 years"
      ExpiresByType image/png "access plus 1 years"
      ExpiresByType image/jpeg "access plus 1 years"
      ExpiresByType image/ico "access plus 1 years"
      ExpiresByType image/icon "access plus 1 years"
      ExpiresByType image/x-icon "access plus 1 years"
      ExpiresByType video/x-flv "access plus 1 years"
      ExpiresByType video/quicktime "access plus 1 years"
      ExpiresByType application/x-shockwave-flash "access plus 1 years"
      ExpiresByType application/pdf "access plus 1 years"
    </IfModule>

    # gzip Compression if availiable
AddEncoding gzip .gzip
<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>

Viel Spaß bei der Umsetzung.

Besseren Weg zu noch mehr Pagespeed gefunden?

Gerne passe ich den Artikel an. Kommentier mit Deinen Hinweisen.