Ein schneller Seitenaufbau deiner WordPress Webseite reduziert nicht nur die Absprungrate enorm. Auch für deine Rankings bei Google und anderen Suchmaschinen ist Pagespeed ein wichtiger Faktor. Mit einem WordPress Caching Plugin kannst du einfach mit der Optimierung deiner Webseite beginnen. Hier stelle ich meinen Favoriten vor und gebe aus meiner eigenen WordPress Praxis weitere Tipps zur Pagespeed Optimierung.
Viel Zeit bleibt nicht: Verzögert sich der Seitenaufbau, wenn User deine WordPress Webseite ansteuern, ist der Absprung nur einen Klick entfernt. Rückkehr ungewiss. Auf die Zufriedenheit deiner User wirkt sich Pagespeed unmittelbar aus. Studien zeigen, dass 47% der Befragten erwarten, dass eine Webseite in maximal zwei Sekunden oder weniger geladen wird.
Die Optimierung des Pagespeed ist also ein Muss. Doch was genau wird unter „Pagespeed“ überhaupt verstanden? Hier lohnt es sich genauer hinzusehen:
- Einerseits wird mit Pagespeed die gesamte Dauer des vollständigen Aufbaus einer Internetseite bezeichnet.
- Gemeint ist aber auch die „time to first byte“, also die Dauer zum Laden des ersten Bytes. Diese oft unterschätzte Komponente, die in erster Linie von deiner Serverpower abhängt, wird z.B. von Google als Rankingfaktor gemessen und bewertet. Verbessern kannst du diesen Faktor z.B. mit einem optimierten WordPress Hosting.
Mit der Auswahl eines optimierten Hostingtarifs ist es aber nicht getan. Onpage helfen einige Tricks und Tools, um den Seitenaufbau deiner Webseite nachhaltig zu verbessern. Hier stelle ich drei Tipps aus meiner eigenen WordPress Praxis vor.
1. WordPress Cache Plugin: WP Fastest Cache
Warum kompliziert, wenn es auch einfach geht. Mit einem simpel zu installierenden WordPress Plugin kannst du den Seitenaufbau durch Caching effektiv beschleunigen. Beim Caching werden Webseiten nicht bei jedem Aufruf neu generiert. Stattdessen wird eine zuvor auf dem Server zwischengespeicherte Version der Webseite abgerufen.
Ein Plugin, das dieses Caching vollautomatisch übernimmt, ist WP Fastest Cache. In der Grundversion ist das Plugin kostenlos. Auch hier gibt es schon einige Einstellungsmöglichkeiten und Erweiterungen. So kannst du z.B. wählen, dass Seiten aus dem Cache nur abgerufen werden, wenn man nicht als Admin im WordPress Backend eingeloggt ist.
Selbst habe ich WP Fastest Cache aus der Vielzahl an verfügbaren WordPress Cache Plugins für eigene Projekte und Kunden ausgewählt. Das Plugin leistet mir bei der Pagespeed Optimierung seit mehreren Jahren gute Dienste und wird ständig vom Autor aktualisiert.
In der erweiterten Premium Version sind zusätzliche Funktionen wie Lazy Load oder Bilder-Optimierung mit an Bord. Ob sich die Investition in die kostenpflichtige Version lohnt, muss im Einzelfall entschieden werden. Selbst setze ich auf die Premium-Version und unterstütze so auch den Autor bei der Weiterentwicklung dieses praktischen Tools.
Plugin Tipp: WP Fastest Cache (kostenlos)
Mit dem Plugin WP Fastest Cache lässt sich der Seitenaufbau deiner WordPress Webseite deutlich beschleunigen. Auch in der kostenlosen Version verfügt das Plugin über eine Vielzahl an individuellen Einstellungsmöglichkeiten.
2. Bilder optimieren mit WordPress Plugin: Smush
Bilder und sonstige mediale Inhalte können den Seitenaufbau stark verlangsamen. Auch hier ist Optimierung stark anzuraten. Plugins helfen dabei, Bilder direkt auf dem Server nach dem Upload zu komprimieren. Mit Lazy Load werden Bilder und weiterer Content erst während des Scroll-Vorgangs geladen. Auch das hilft, mehr Speed auf deine WordPress Webseite zu bekommen.
Mein favorisierter Tool für die Bilderoptimierung ist Smush von WPMU DEV. Das Plugin ist in einer kostenlosen und einer kostenpflichtigen Premium-Version verfügbar. Wirklich einsatzbereit ist das WordPress Plugin meiner Erfahrung nach nur in der Premium-Version. In der kostenlosen Standard-Version sind die Funktionen stark eingeschränkt. Außerdem können hier nicht unbegrenzt Bilder komprimiert werden.
Die Investition in die Pro-Version kann sich aber lohnen. Mit Smush Pro gelingt es, den Seitenaufbau durch das Komprimieren von Bildern deutlich zu beschleunigen. Auch Lazy Load kann einfach aktiviert werden. Die Bedienung des Plugins ist einfach und intuitiv. Außerdem unterstützt Smush auch die Konvertierung deiner Bilder ist das weboptimierte WebP-Format.
Plugin Tipp: Smush und Smush Pro
3. Seitenaufbau beschleunigen über HTACCESS
Über die automatisch von WordPress genierte .htaccess-Datei im Stammordner deiner WordPress Installation kannst du deinen Webserver auch anweisen, Dateien serverseitig zu komprimieren. Aber Vorsicht: Nicht alle Hoster erlauben es, hier Einstellungen individuell vorzunehmen! Deshalb ist dieser Tipp eher an Profis gerichtet. In jedem Fall sollte nach der Änderung der .htaccess-Datei geprüft werden, ob die Webseite noch fehlerfrei läuft.
Auf den Projekten meiner Digitalmanufactur setze ich grundsätzlich auch auf Komprimierung über die .htaccess-Datei. Der zusätzliche Code sieht dann beispielsweise wie folgt aus. Er wird einfach in der .htaccess-Datei ergänzt.
# Serve resources with far-future expires headers.
#
# (!) If you don't control versioning with filename-based
# cache busting, you should consider lowering the cache times
# to something like one week.
#
# https://httpd.apache.org/docs/current/mod/mod_expires.html
<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 - Behält die Website eine Stunde im Cache, neues wird erst nach Ablauf einer Stunde
# angezeigt. Wenn nicht gewuenscht, bei 3600 eine Null eintragen
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 application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Media files
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType image/bmp "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
# Web fonts
# Embedded OpenType (EOT)
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/eot "access plus 1 year"
# OpenType
ExpiresByType font/opentype "access plus 1 year"
# TrueType
ExpiresByType application/x-font-ttf "access plus 1 year"
# Web Open Font Format (WOFF) 1.0
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
# Web Open Font Format (WOFF) 2.0
ExpiresByType application/font-woff2 "access plus 1 year"
# Other
ExpiresByType text/x-cross-domain-policy "access plus 1 week"
</IfModule>
<IfModule mod_deflate.c>
# Insert filters / compress text, html, javascript, css, xml:
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/font-woff2
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json font/woff
AddOutputFilterByType DEFLATE font/woff
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
# Exception: Images
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary
# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
#Alternative caching using Apache's "mod_headers", if it's installed.
#Caching of common files - ENABLED
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|woff2|woff)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>
# Set Keep Alive Header
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
# If your server don't support ETags deactivate with "None" (and remove header)
<IfModule mod_expires.c>
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None
</IfModule>
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html|woff|woff2|ttf)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>Fazit: Pagespeed Optimierung trägt zum Erfolg deiner WordPress Seite bei
Schon diese drei Tipps unterstützen bei der Aufgabe, den Seitenaufbau von WordPress Webseiten effektiv zu beschleunigen. Am Anfang der Optimierung steht aber die Auswahl eines schnellen Servers oder Hosters, am besten mit speziellen WordPress Tarifen. Als zweiten Schritt sollte man sich mit der onpage Optimierung befassen. Die oben beispielhaft genannten Plugins und Tipps helfen dir dabei, die WordPress Pagespeed Optimierung konzentriert anzugehen.
Melde dich bei mir für weitere Unterstützung!
Benötigst du Hilfe bei der Pagespeed Optimierung deiner WordPress Webseite, helfe ich dir gerne weiter. Neben den oben genannten Tools und Tipps setze ich auch weitere Tools zur Optimierung ein. Am Anfang der Zusammenarbeit steht eine Analyse deines Vorhabens. Dann stimme ich die weiteren Maßnahmen auf die individuellen Anforderungen ab. Stell eine Anfrage, damit ich dich bei deiner Projektidee unterstützen kann!