WordPress Geschwindigkeit optimieren – Cache, Minify & Komprimierung

 in Anleitungen



Ich möchte hier kurz und knapp meine aktuelle Konfiguration erklären. Ich nutze WordPress als CMS (Content-Management-System) und als Theme das „Jupiter“ von Artbees. Meiner Meinung nach, das beste Theme überhaupt.

Neben dem Theme habe ich noch einige Plugins installiert und genau da beginnt das Problem. Das WordPress, das Theme und jeweils jedes einzelne Plugin bringen sein eigenes CSS und JavaScript mit sich. Da hat man dann schnell einmal 12 CSS- und JavaScript Verlinkungen oder mehr im Quelltext stehen. An dieser Stelle verlangsamt sich die Geschwindigkeit der ganzen Seite schon spürbar. Obendrauf kommen dann unkomprimierte Bilder und der fehlende Cache.

Diese ganze Thematik betrifft den Besucher, der liebend gerne eine schnelle und flüssige Webseite besuhen möchte, aber auch Google und andere Suchmaschine richten unter anderem das Ranking und die Indexierung danach. Mit wenigen und vor allem „fast“ kostenfreien Plugins konnte ich die Geschwindigkeit meiner Webseite um über 58% verbessern, gleichzeitig Speicherplatz einsparen und in Googles Pagespeed Insight meine Bewertung deutlich verbessern.

In meinem alten Beitrag „WordPress Geschwindigkeit optimieren – Cache, Cloudflare, CleanUp, Minify“ von 2016 habe ich schon erste Gehversuche gewagt und war bisher mehr oder weniger zufrieden. Aber je größer mein Blog wird und je mehr Plugins hinzukommen, desto langsamer wird der ganze Spaß.

pagespeed_insights_old

 

Jetzt fangen wir einfach mal an.

Caching

Als reines Caching-Plugin verwende ich mittlerweile das kostenfreie Plugin „WP Super Cache„.

Die Ladezeit von Webseiten spielt selbst heute in Zeiten von fast allseits verfügbaren Breitbandanschlüssen immer noch eine große Rolle. Neben den Besuchern mit langsamerer Verbindung, werden mittlerweile auch von Suchmaschinen wie z.B. Google möglichst kurze Wartezeiten und schnelle Ladegeschwindigkeiten angefordert. Nicht zuletzt kann man durch die Optimierung eventuell selbst noch wertvolle Ressourcen sparen und hat so genügend Gründe WordPress durch Caching Plugins zu optimieren.
WP Super Cache ist ein Plugin, das speziell für WordPress entwickelt wurde, welches auch auf einem Hosting-Paket mit geringen Ressourcen ordentlich funktioniert. Dennoch ist es auch für größere Webseiten mit höherem Trafficaufkommen geeignet.

Wie bei fast jedem Plugin, lässt sich auch WP Super Cache schnell und einfach installieren.
Anschließend muss lediglich der Cache auf „aktiv“ gestellt werden. Unter dem Reiter „Erweitert“ gibt der Plugin-Entwickler bereits klare Empfehlungen vor, die man als Option aktiviert haben sollte. Ich habe diese so belassen und lediglich einige Unterordner und spezielle Seiten wie z.B. den Shop als Ausnahme hinzugefügt, damit diese dann nicht geached werden.

Einstellungen am Webspace oder an dem eigenen Server selbst müssen grundsätzlich nicht vorgenommen werden.

WP Super Cache erzeugt Seiten als statische HTML-Datei. Die Auslieferung ist dann natürlich schneller, als wenn die Seite von PHP jedes Mal neu erzeugt werden muss. Somit wird nicht jedes Mal eine neue Datenbankabfrage getätigt, sondern der Besucher erhält eben diese erzeugte statische Seite ausgeliefert.

Browser Caching

Google`s Pagespeed Insight Analyse prangert immer wieder an, das das Browser Caching nicht aktiviert ist.

WP Super Cache ist für das Caching auf der Serverseite zuständig. Mit dem Browser Caching wird die dort generierte statische HTML Datei und auch andere Dateien wie Bilder, CSS- und JS Daten lokal auf dem Computer zwischengespeichert.

Bei einem aktiven Browser Cache dauert der erste Aufruf zwar etwas länger, der zweite aber nicht mehr. Der Browser speichert fast alle Daten der Webseite auf der Festplatte des Besuchers und je nach voreingestellter Gültigkeit, behält er diese Daten dann eine gewisse Zeit im Browser Cache. Das bedeutet: Wenn der Besucher nun noch einmal auf den Blog geht, zum Beispiel weil er einen neuen Beitrag entdeckt hat, werden alle diese Dateien blitzschnell und direkt angezeigt. So müssen auch die zuvor langsam ladenden Bilder, nicht erneut und langwierig heruntergeladen werden, da sie schon im Cache des Browsers liegen.

Für die Aktivierung unterscheide ich nun zwei Systeme. Nämlich Apache und den IIS von Windows.

Apache

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_static_suffix .gz
mod_gzip_can_negotiate yes
AddEncoding gzip .gz
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>
 
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Diese Codezeilen kannst du in die „.htaccess“-Datei in deinem lokalen WordPressvezeichnis hineinkopieren. Ab dann ist der Browser Cache direkt aktiviert und speichert alle Dateien für 7 Tage auf dem PC des Besuchers. Ab dem 8 Tag, werden die Dateien neu von dem Server geladen, sofern der Besucher auf die eigene Webseite zurück kommt.

IIS

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.01:00:00" />
    </staticContent>
  </system.webServer>
</configuration>

Bei einem IIS Webserver (Windows), sind die Codezeilen in die „web.config“-Datei zu schreiben. Ist diese Datei noch nicht vorhanden, dann kann diese einfach mit dem Notepad oder einem anderen Editor erstellt werden. Die Datei liegt ebenfalls in dem Hauptverzeichnis der WordPress-Installation. Bei dem IIS, lässt sich nicht wirklich zwischen den verschiedenen Dateien (Bilder, CSS, JS, HTML, etc.) unterscheiden, weshalb ich die Cachin-Dauer lediglich auf 1 Stunde festgelegt habe.

Der Browser Cache ist jedoch auch mit Vorsicht zu genießen.
Das Problem ist nämlich, das gecachte Inhalte nicht automatisch erneuert werden. Hat der Nutzer die Dateien z.B. für ein Jahr im Cache, werden diese ihm auch ein Jahr lang so angezeigt (abgesehen vom Neuladen bzw. Cache Renew im Browser), selbst wenn sich z.B. ein Blogbeitrag verändert hat.

Was im Browser Cache liegt, merkt nicht, ob auf dem Server etwas geändert wurde, da der Server nicht mehr kontaktiert werden muss. Hier ein kleines Beispiel:

Um 12:00 Uhr kommt ein Besucher auf deinen Blog. Um 20:30 Uhr wird ein neuer Artikel veröffentlicht. Als der Besucher, um 21:45 Uhr wieder auf deinen Blog kommt, sieht er diesen neuen Artikel aber noch nicht, da sein Browser Cache für HTML-Seiten ihm noch die alte gecachde Version anzeigt. Aus diesem Grund sollten HTML-Dateien nie über Tage hinweg geached werden. Maximal 2-3 Stunden, wenn überhaupt. So profitieren zumindest die Ressourcen vom Cache des Browsers.

CSS & JS Minify

Hier verwende ich mittlerweile „Fast Velocity Minify“ als kostenfreies Plugin. Meiner Meinung nach, hat es sich klar gegen andere wie z.B. Autoptimize, Better WordPress Minify & Co. durchgesetzt.

Heutzutage bringt jedes Plugin seine eigenen JavaScript- und CSS-Dateien mit, wodurch am Ende unzählige dieser Dateien im Quellcode eingebunden werden. Fast Velocity Minify wird die CSS- und JaveScript-Dateien bündeln und minimiern und speichert diese anschließend zwischen. Das Plugin arbeitet mit „WP Super Cache“ perfekt zusammen. Gleichzeitig behebt das Plugin die Rendering-Probleme. Durch die Einstellungen, die auch schön beschrieben sind, ist das Plugin für jeden Anwender leicht verständlich. Ich selbst nutze es mit den Standardeinstellungen.

Gleichzeitig räumt dieses Plugin die HTML-Struktur etwas auf, womit gleichzeitig die Ladezeit beschleunigt wird.
Nicht zuletzt kann so aber auch die Angriffsfläche für z.B. Hacker etwas minimiert werden. Durch das Zusammenlegen und dem Aufräumen des Quellcodes können diese den Quellcode nicht mehr zwingend nach bestimmten eingebundenen Scripts durchsuchen.

Ich habe mich aufgrund der sehr schlanken Konfigurationsmöglich für dieses Plugin installiert. Aber auch, da es von allen getesteten am zuverlässigsten funktioniert hat.

Bilder komprimieren

Das ist ebenfalls ein Thema, das man vielleicht bei einem kleinen Blog mit 10-12 Bildern ignorieren könnte. Da ich aber das gesamte Thema „Optimierung der Geschwindigkeit“ komplett abarbeiten will, gehört das Thema „Komprimierung“ ebenfalls dazu.

Zur Komprimierung von Bildern verwende ich das Plugin „Optimus„. Allerdings in der HQ Version, die ca. 16 Euro im Jahr kostet. Der Grund ist, dass ich damit quasi auch größere Bilddateien bis 5MB komprimieren kann. In der kostenlosen Version liegt die Grenze bei 100kb, womit alle Bilder, die größer sind, nicht komprimiert werden. Ich denke 16 Euro im Jahr sind nicht zu viel.

Optimus wird installiert und ist danach quasi unsichtbar. Nur in der Mediathek zeigt sich die Erweiterung mit einer kleinen grünen Anzeige, welche die Kompression der Bilder anzeigt.

Es verkleinert beim Upload deine Bilder, verändert aber nicht deren Qualität. So werden zum Beispiel nicht nur die Uploads, sondern auch die generierten Thumbnails verkleinert, was ich wirklich genial finde. Die Qualität der Bilder bleibt auch nach der Komprimierung gleich, nur unnötige und unsichtbare Einträge verschwinden und die Ladezeit der Webseite verbessert sich merklich.

Wenn du jetzt schon einige Bilder hochgeladen hast, könnten diese im Nachgang durch Optimus komprimiert werden. So habe ich es geschafft, manche Bilder um bis zu 25% zu verkleinern.

pagespeed_insights_new

Das war es eigentlich auch schon. Ein erneuter Google Pagespeed Insight Test zeigt eine klare Verbesserung. Es soll nicht das Ziel sein, in diesem Test die 100/100 zu erreichen, aber man sollte schon im grünen Bereich landen. Damit ist unter anderem auch eine bessere Listung in den Suchergebnissen gesichert. Ich selbst merke die Performanceverbesserung deutlich und kann jedem diese 4 Schritte ans Herz legen.

Viel Spaß.