(Update) Im ersten Artikel aus dieser Reihe haben wir einige wichtige Werkzeuge vorgestellt, mit denen Sie Ihre Website optimieren können. Nun widmen wir uns den konkreten Maßnahmen. Auch in diesem Segment gibt es viele Möglichkeiten, aber wir wollen uns nur auf die Maßnahmen konzentrieren, die vergleichsweise einfach umzusetzen sind und dennoch gute Verbesserungen liefern.

Bilder als Teil des redaktionellen Arbeitsablaufs komprimieren

Aus meinen Beobachtungen und Untersuchungen auf vielen Websites kann ich die Aussage bestätigen, dass bei den meisten Websites die Bilder eines der größten Optimierungspotenziale bieten, wenn es darum geht, die Ladezeit der Website zu verbessern.

Abbildung: Von 181 KB auf 74 KB. Die Komprimierung der Bilder birgt viel Potenzial

Von 181 KB auf 74 KB. Die Komprimierung der Bilder birgt viel Potenzial

Im ersten Teil habe ich zwei Plugins für WordPress vorgestellt, mit denen Sie im Nachhinein, die hochgeladenen Bilder komprimieren können: Smush und EWWW Image Optimizer.

Ich selbst habe allerdings ein gespaltenes Verhältnis zu solchen Plugins. Sicherlich, es ist praktisch, wenn man auch hinterher die Bilder verkleinern oder besser gesagt komprimieren kann.

Andererseits gehört die Bildbearbeitung meiner Erfahrung nach zum redaktionellen Ablauf. Warum komme ich zu dieser Einschätzung? Üblicherweise wird sich der Autor des Artikels auch um die Bildauswahl kümmern. Die Bilder werden dann auf die passenden Maße beschnitten und sollten idealerweise nach dem Speichern auch entsprechende Dateinamen bekommen.

Der Dateiname wordpress-einstellungen.png ist sowohl für Menschen als auch für Suchmaschinen aussagekräftiger als image004.png. Und wenn man beim Abspeichern des Bildes ist, dann ist es nur ein kleiner Zwischenschritt, das Bild auf eine passende Dateigröße zu komprimieren. Diese Methode liefert in der Regel nicht nur bessere Ergebnisse, sondern macht Sie unabhängiger von Plugins. Sie funktioniert auch bei anderen Content-Management-Systemen und sogar auf statischen Websites.

Daher sollten Leute, die Textinhalte verfassen, auch über grundlegende Kenntnisse zur Bildbearbeitung verfügen: Wirkung von Motiven, speziell bei Symbolbildern, Erfahrung bei der Wahl des richtigen Ausschnitts, Wissen über die Komprimierung und die richtigen Dateiformate usw.

Textdateien mit Gzip oder Brotli komprimieren

Eine weitere sehr effektive Optimierungsmaßnahme ist die serverseitige Komprimierung von Textdateien. Damit sind nicht nur Dateien mit der Endung .txt gemeint, sondern auch HTML-, CSS-, JavaScript und PHP-Dateien sowie Grafiken im SVG-Format. Im Gegensatz zu Rastergrafiken in den Formaten PNG, JPG oder GIF basieren SVG-Grafiken auf dem Textformat XML.

Je nachdem, welche Umgebung auf Ihrem Server installiert und eingerichtet ist, stehen Ihnen mehrere Möglichkeiten zur Verfügung, um diese Textdateien auf dem Server zu komprimieren.

Auch auf den älteren Webservern dürfte die Kombination aus Deflate und Gzip vorhanden sein. Bei Deflate handelt es sich um einen Algorithmus zur verlustlosen Datenkompression, welches Dateien in das Format Gzip komprimiert.

Wenn Ihre Website auf einem Apache-Webserver läuft, dann würde der passende Code folgendermaßen ausschauen:

# mod_deflate aktivieren
<FilesMatch "\\.(js|css|html|htm|php|xml|svg|txt)$">
SetOutputFilter DEFLATE

Diesen Code fügen Sie in die .htaccess-Datei ein, und die Dateien mit den entsprechenden Endungen werden gezippt und im Browser des Besuchers entpackt. Das ist insofern sinnvoll, weil in der Regel die Internetverbindung der Flaschenhals ist und nicht die Power des Servers oder des Rechners des Besuchers.

Wenn ihr Webserver mit Nginx läuft, dann finden Sie in der offiziellen Dokumentation den entsprechenden Code-Schnipsel, um die Gzip-Komprimierung zu aktivieren.

Neben der Kombination aus mod_deflate und gzip gibt es mit Brotli einen viel effektiveren Datenkompressions-Algorithmus, welcher auf LZ77 zur Dateikompression setzt. Einige Webhoster haben bereits auf Ihren Servern diesen neuen Datenkompressions-Algorithmus standardmäßig aktiviert, sodass man dort als Nutzer nichts tun muss.

Hat Ihr Webhoster Brotli noch nicht aktiviert, dann fügen Sie den folgenden Schnipsel in die .htaccess ein:

# Brotli aktivieren, Methode 2
<FilesMatch "\\.(js|css|html|htm|php|xml|svg|json|txt|csv)$">
SetOutputFilter BROTLI_COMPRESS

Caching von Inhalten

Caching ist eine beliebte und erprobte Maßnahme, um die Ladezeit massiv zu verbessern. Hierbei gibt es zwei Aspekte zu berücksichtigen. Mit dem folgenden Code in der .htaccess

# Caching im Browser verbessern
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|svg|eot|webp|woff|woff2)$">
ExpiresActive on
ExpiresDefault "access plus 99 days"
Header unset ETag
FileETag None

…erreichen Sie, dass die oben aufgeführten Dateien bei wiederkehrenden Besuchern nicht vom Server, sondern aus dem Browser-Cache geladen werden. Es ist deutlich performanter, wenn die Komponenten von der Festplatte anstatt über die Internetleitung geladen werden.

Neben dieser Verbesserung des Caching-Verhaltens im Browser gibt es auch die Möglichkeit, die kompletten Inhalte oder Unterseiten zu cachen. Was ist damit gemeint?

Abbildung: Die Einstellungen von Cache Enabler sind übersichtlich, aber das Plugin liefert gute Optimierungsergebnisse.

Die Einstellungen von Cache Enabler sind übersichtlich, aber das Plugin liefert gute Optimierungsergebnisse.

Mithilfe von diversen Plugins, wie etwa Cache Enabler, Hyper Cache, WP Super Cache etc. versetzen Sie Ihre WordPress-Installation in die Lage, Unterseiten als statische Seiten auszugeben. Das ist viel performanter, als wenn die ganzen Inhalte zuerst durch PHP aus der Datenbank geholt und dann dynamisch eine Seite generiert wird.

Lazy Loading

Bei Lazy Loading handelt es sich um eine Technik, die Bilder und Iframes erst dann lädt, wenn die sich auch im Viewport (der sichtbare Bereich im Browserfenster) befinden. Vor allem auf langen Websites mit vielen Bildern können Sie hier mit Lazy Loading viel Ladezeit einsparen. Ganz effektiv ist diese Maßnahme bei mobilen Geräten, da die in der Regel über viel kleinere Bildschirme als die Desktop-Geräte verfügen. Somit befinden sich hier noch mehr Bilder außerhalb des sichtbaren Bereiches, die dann ohne Lazy Loading dennoch mitgeladen werden.

Da WordPress diese Funktion mit der Version 5.5 aktiviert hat, müssen Sie diesbezüglich keine zusätzlichen Schritte unternehmen, um von dieser Funktion zu profitieren.

WordPress Performance Optimierung – Fazit

Aus beiden Artikeln zur Pagespeed-Optimierung bei WordPress haben Sie gelernt, dass eine langsame Website kein unveränderliches Schicksal ist. Ihnen steht eine Reihe an Analyse-Tools und Performance-Maßnahmen zu Verfügung.

Um die Ladezeit einer Website zu verschnellern, ist es wichtig, dass Sie sich bereits vor dem Start des Projektes darüber Gedanken machen. Testen Sie in Ruhe auf einer Test-Installation das Theme und die Plugins, die Sie einsetzen möchten.

Bei der Performance-Optimierung ist es ein wenig wie bei der Gesundheit: Vorbeugen ist immer besser als heilen. Daher sollte die Performance-Optimierung immer am Anfang des Prozesses stehen und nicht am Ende.

Sicherlich, die Optimierung der Bilder, das Komprimieren der Textdateien und das Cachen sind leistungsfähige Maßnahmen, aber Sie können nur in dem Korsett agieren, welches Ihnen das Theme und die Plugins einräumen.

Wie sich das Thema Performance bei WordPress in Zukunft entwickeln wird, ist schwer vorherzusagen. Ich denke, dass das Thema auch in Zukunft weiterhin wichtig bleiben wird, aber wie wichtig, hängt auch von der Qualität der neuen Block-Themes ab, die ab WordPress 5.9 der Standard bei den Themes sind.

WordPress-Hosting von Host Europe

Je nach Anforderung Ihrer Webseite, können Sie sich für eine der auf den Einsatz von WordPress optimierten Hosting-Lösungen von Host Europe entscheiden. Jede Webseite, die Sie auf einem WordPress-Hosting-Produkt von Host Europe einrichten wir automatisch und kostenlos mit einem SSL-Zertifikat abgesichert. Hier finden Sie weitere Informationen zu den WordPress-Hosting-Produkten von Host Europe.

 

Vladimir Simović

44 thoughts on “WordPress Performance Optimierung: Die besten praxiserprobten Methoden

  1. Danke für die nützlichen Infos!

    Würde eine neuere PHP-Version nicht auch Geschwindigkeitsvorteile bieten? Ist schon absehbar, wann PHP 5.4 bei den Webhosting-Angeboten von HostEurope verfügbar sein wird?

  2. Hallo Stephan,
    vielen Dank für den Hinweis, Du hast natürlich Recht. Momentan können wir leider noch kein finales Datum nennen, allerdings sind wir aktuell gut im Plan, eine gangbare Lösung im angekündigten Zeitfenster (Q3/Q4) fertigzustellen.

  3. sehr schöner artikel. wir haben bereits einiges getan um wordpress schneller zu machen. wichtig sind aber auch die themes die sehr schnell laden sollten. etwas das wirklich spürbar geholfen hat ist ein kleiner code den wir direkt nach dem auf dem theme header einfügten:

    viel spass beim ausprobieren
    und beste grüße aus berlin
    dr. motte

    • Hallo Dr. Motte, vielen Dank für den Hinweis. Der Code wurde aus Sicherheitsgründen systembedingt leider automatisch aus dem Kommentar entfernt. Wir möchten Ihn aber gerne vorstellen. Könnten Sie uns diesen bitte einfach noch mal als Bild schicken?

  4. Noch ein super Artikel zum Thema – wusste bisher gar nicht dass es bei HE so einen Blog gibt … ich nutze zum Tunen übrigens noch das WP-Plugin WP HTTP Compression und Optimize DB. Mit der Compression von CSS files habe ich schlechte Erfahrungen gemacht, sah hinterher alles aus wie Kraut und Rüben und ich glaube auch nicht, dass das so viel bringt. VG und weiter so!

    • User Experience ist natürlich mehr als nur die Nutzererfahrung, deshalb habe ich auch von Nutzererfahrung und Nutzerverhalten gesprochen. Ich gebe Ihnen aber Recht: der Fachbegriff User Experience ist mittlerweile so verbreitet und selbsterklärend, dass man ihn eigentlich nicht übersetzen müsste.

  5. Moin,
    Danke für die Zusammenstellung, wirklich gute Plugins, die ich auch teilweise im Einsatz habe. Eine Ergänzung habe ich jedoch noch: Zum Cachen kann ich nur WP Rocket empfehlen, das kostet zwar, hat bei mir aber mit Abstand das beste Ergebnis geliefert.

  6. Sehr gute Plugins. Cachify nutze ich schon sehr lange und W3 ist wirklich nur mit Vorsicht zu genießen. Nur wer sich mit Datenbanken sehr gut auskennt, sollte die Einstellungen nutzen. Dafür ist es gut geeignet. Ansonsten fehlt in der Liste glaube „Better WordPress Minify“, ist auch ziemlich einfach aufgebaut.

    Grüße und Danke.

  7. Hallo,

    sehr brauchbare Plugins, die mir teilweise selber bereits ein Begriff wahren aber zum großen Teil auch noch völlig neu waren. Danke für das Zusammentragen dieser Informationen und den tollen Blog. Er hilft sicher vielen Anwendern weiter. Ich werde einiges davon auf alle Fälle mal selber ausprobieren.

    Viele Grüße

  8. Danke für die Tipps. Leider sind einige Plugins seit einigen Monaten nicht mehr aktualisiert worden. Vielleicht könntest du eine neue Version des Artikels veröffentlichen.

    • Vielen Dank – das Problem ist mir bekannt. Seit September 2014 hat sich einiges getan. Pagespeed-Optimierung ist natürlich weiterhin ein wichtiges Thema, deshalb werde ich mir dieses Thema in einem neuen Artikel noch mal vornehmen. Beste Grüße Wolf-Dieter Fiege

      • Die Ladezeit scheint mir immer wichtiger zu werden, denn diese beeinflusst ja direkt die Nutzererfahrung. Auch in den Google Suchergebnissen macht sich das bemerkbar. Alles Gründe, warum ich mich auch mal verstärkt um das Thema kümmern muss und in diesem Beitrag gelandet bin.
        Ich freue mich auf eine aktualisierte Version oder einen völlig neuen Beitrag zu dem Thema!

  9. Die Performance nimmt einen immer größeren Anteil bei Google ein. Daher wird es immer wichtiger auch Geschwindigkeit Wert zu legen. Einen Teil der vorgestellten Plug-ins verwenden wir bei unseren Kunden und konnten damit gute Ergebnisse erzielen.

  10. Netter Beitrag, danke dafür. Da jedoch einige Punkte fehlen und sich der Beitrag hauptsächlich auf WordPress bezieht, hier ein paar Ergänzungen:

    – Caching mit WordFence
    – Object Cache durch Redis Server & Redis Plugin
    – Bilder mit Kranken.io optimieren (es gibt ebenfalls ein WP-Plugin)
    – HTTP/2 verwenden (Multiplexing)
    – mod_pagespeed bzw. ngx_pagespeed verwenden
    – OpCache mit APCu unter mod_ruid2 o.Ä.

    Und natürlich: schnelles Hosting verwenden sowie ein schlankes Theme. Insbesondere ein auf dem Genesis Framework basierendes WordPress Theme kommt hier infrage.

    • Hallo,
      vielen Dank für diese Ergänzungen. Einige Möglichkeiten werde Sie mir direkt mal näher anschauen.
      Beste Grüße
      Wolf-Dieter

  11. Danke für den leicht verständlichen Guide, danach habe ich gesucht! Nach Umsetzung der einzelnen Schritte hat sich der Speed unserer Page erheblich verbessert! Wir sind um fast 40 Punkte beim Page Speed Test von google gestiegen und sind jetzt im grünen Bereich! Besten Dank!

  12. Ladezeiten sind nicht nur überlebenswichtig geworden, sondern maßgeblich für die Platzierung in den Suchmaschinen. Ich persönlich habe gute Erfahrungen mit WP Rocket gemacht. Ist zwar kostenpflichtig, aber meiner Erfahrung nach jeden Cent Wert.

    Beste Grüße!

  13. Vielen Dank für den sehr hilfreichen Artikel! Zum Plugin Optimus sollte allerdings gesagt werden, dass die kostenlose Version nur Bildgrößen bis 100 KB erlaubt. Für alles darüber hinaus muss die kostenpflichtige Premium-Version verwendet werden.

    • Hallo Sebastian,
      ja das stimmt. Das ist wirklich lästig. Entweder man rechnet die Motive vorher mit einem Bildbearbeitungsprogramm herunter, sodass die Bildgröße beim Upload bereits kleiner als 100 KB ist oder man nutzt die kostenpflichtige Premium-Version. Ich habe mich letztendlich für die Premium-Version entschieden.
      Mit besten Grüßen
      Wolf-Dieter

  14. Bei Bildern das Wepb Format nutzen. Von Google entwickelt und verkleinert noch weiter JPG Bilder ohne Qualitätsverlust. Seiten laden da noch schneller. EWW Optimizer unterstützt die Umwandlung nach Wepb (PRO Version)

  15. Leider bin ich zu der Erkenntnis gekommen daß HostEurope nicht der am besten geeignete Webhoster für WordPress Seiten ist. Speziell wenn man seine WP Seite möglichst auf kurze mobile LAdezeiten optimieren will. Host Europe hat kein Opcache, Memcache and Static cacheund keine Möglichkeit to make WebP images.

    • Hallo Herr Michel,
      vielen Dank für Ihren Kommentar. Für den professionellen Betrieb von WordPress mit schnellen Ladezeiten empfehlen wir einen WebServer von Host Europe als Plattform. Über die Produktverwaltung im KIS (Caching-Einstellungen) können Sie sowohl nginx-Caching als auch OpCaching, das bei uns APC User Cache heißt, aktivieren. Die Konvertierung von Bildern in das Format WebP ist mit einem professionellen Bildbearbeitungsprogramm oder mit einem Online-Converter wie z.B. https://image.online-convert.com/convert-to-webp problemlos möglich.
      Mit besten Grüßen
      Wolf-Dieter Fiege

  16. Leider bin ich zu der Erkenntnis gekommen daß HostEurope nicht der am besten geeignete Webhoster für WordPress Seiten ist. Speziell wenn man seine WP Seite möglichst auf kurze mobile LAdezeiten optimieren will. Host Europe hat kein Opcache, Memcache and Static cacheund keine Möglichkeit to make WebP images.

    • Hallo, wenn Sie diese Caching-Optionen nutzen möchten, empfehlen wir Ihnen einen WebServer von Host Europe. Diese sind bereits von uns aus für Website-Performance optimiert und bietet Ihnen darüber hinaus weitere individuelle Caching und PHP Einstellungen für Ihre Webseite.
      https://www.hosteurope.de/WebServer/
      Zudem können Sie mit Ihren Webseiten und Anwendungen problemlos von einem Webhosting-Produkt auf einen WebServer wechseln. Der Umzug erfolgt per automatischer Migration. Sie brauchen sich dabei um nichts zukümmern, alle Einstellungen bleiben erhalten.
      Mit besten Grüßen
      Wolf-Dieter Fiege

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/