WordPress Webseite zu langsam? 5 Tipps für weniger Ladezeit bei PageSpeed Insights!

Bitte bewerten
Anzahl: 2 Bewertung: 4

Wir alle wissen aus eigener Erfahrung, dass eine Seite, die zu lange lädt, gerne vorzeitig verlassen wird. Da kann der Inhalt noch so interessant sein! Und weil die Ladezeit für uns Nutzer nun mal so entscheidend ist, hat Google diese 2010 offiziell als Ranking Kriterium eingeführt. Doch obwohl das schon mehr als 5 Jahre zurück liegt, scheint das Thema PageSpeed immer noch ganz unten in der Prio-Liste vieler Webseiten-Betreiber zu liegen.

Dabei gelingt eine Maximierung der Ladezeit schon oft mit wenigen Mitteln. Gerade WordPress Blogs, die aufgrund ihrer Struktur wenig performant sind, profitieren von folgenden Tricks um eine Steigerung von 40%!

Aber bevor es losgeht, sollte der IST-Zustand der Seite unbedingt mit dem Google-Tool PageSpeed Insights untersucht werden. Einfach URL eingeben und schon erhält man erste Hinweise darauf, wie man die Performance seiner Seite verbessern kann.

PageSpeed testen

Auweia, die Ladezeit von Klaudija.de liegt ohne Optimierung im roten Bereich. Höchste Zeit hier mal Gas zu geben!

1. Browser-Caching in .htaccess-Datei um mod_expires erweitern

Diesen Tipp habe ich bereits in dem Beitrag “Das Cache Plugin Problem: Weiße Seite wird statt Inhalt angezeigt” gegeben. Allerdings ist dieser Cache-Code mittlerweile um ein paar Zeilen erweitert worden, die ich euch keinewsweg vorenthalten möchte. Einfach kopieren und in die htaccess-Datei einfügen. Übrigens bedeutet Browser-Caching, dass Ressourcen, wie Bilder, Javascript und mehr als statische Dateien auf dem Zwischenspeicher des Browsers hinterlegt werden, so dass der Nutzer bei einem erneuten Aufruf der Webseite deren Inhalte aus dem Browser-Cache angezeigt bekommt. Das spart natürlich erheblich an Ladezeit ein!

Bei mir hat mod_expires eine Steigerung um 6 Punkte beim PageSpeed Test gebracht.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 minutes"
  ExpiresByType text/woff "access plus 1 month"
  ExpiresByType text/js "access plus 1 month"
  ExpiresByType text/html "access plus 1 minutes"
  ExpiresByType text/css "access plus 1 months"
  ExpiresByType text/javascript "access plus 1 months"
  ExpiresByType text/plain "access plus 1 months"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/js "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 months"
  ExpiresByType application/x-shockwave-flash "access plus 1 months"
  ExpiresByType application/xhtml-xml "access plus 600 seconds"
  ExpiresByType image/gif "access plus 1 years"
  ExpiresByType image/ico "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 years"
  ExpiresByType image/jpg "access plus 1 years"
  ExpiresByType image/png "access plus 1 years"
  ExpiresByType image/x-icon "access plus 1 years"
</IfModule>

2. Komprimierung aktivieren in .htaccess mit mod_deflate und deflate_module

Der Kompressor mod_deflate ist der Turbo Booster im PageSpeed-Test mit satten 13 Punkten! Zwar habe ich diesen Code schon ebenfalls in dem oben genannten Artikel erwähnt, doch mittlerweile ist es mir gelungen den Deflate-Kompressor um weitere zwei Punkte steigern zu können, indem das deflate_module ebenfalls in die htaccess-Datei eingefügt wird.


<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/php text/css text/js text/javascript text/javascript-x
</IfModule>

Jetzt diesen um das deflate_modul ergänzen.

<IfModule deflate_module>
    <IfModule filter_module>
        AddOutputFilterByType DEFLATE text/plain text/html
        AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd
        AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml
        AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript
        AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf
        AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf
    </IfModule>
</IfModule>
PageSpeed steigern

Wow, das kann sich sehen lassen! Berühmte Magazin-Seiten wie BILD.de (47/100), Spiegel.de (46/100) und Rheinische-Post.de (57/100) sehen dagegen richtig blass aus!

3. Mit Autoptimize JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen + CSS reduzieren + Javascript reduzieren

Mit dem kostenlosen Plugin Autoptimize lassen sich gleich drei Fehlermeldungen bei PageSpeed Insights auf einmal beheben. Es bedarf dazu nur zweierlei Häkchen in den Plugin-Einstellungen, nämlich zum einen bei “Javascript Code optimieren” und zum anderen bei “CSS Code optimieren”. Auf diese Weise wird sowohl der CSS- als auch JS-Code reduziert und “above the fold” beseitigt.

So schaut es vor allem bei dem letztgenannten Punkt in PageSpeed Insights aus:

Vor Autoptimize

pagespeed_css

Es werden alle möglichen CSS & JS-Datein vom PageSpeed Test als Verzögerungsquellen aufgelistet.

Nach Autoptimize

pagespeed_autoptimize

Nur noch Javascript und CSS Dateien, auf die man keinen Einfluss hat, z.b. externer Werbetreibender – bis auf eine CSS-Datei auf dem eigenen Server, die von Autoptimize erstellt wurde und alle Infos enthält.

Ja, es sieht wirklich alles viel ordentlicher aus. Doch trotz dieser nachweisbaren Maßnahme konnte das Punktekonto nicht mehr gesteigert werden. Offensichtlich sind diese Faktoren nicht so wichtig, wie der PageSpeed Insight Test einem glauben machen möchte. Oder aber meine Seite enthält einfach zu wenig CSS&JS-Code, als das eine Zusammenfassung dieser Dateien wirklich viel ausmacht.

4. Bilder optimieren mit EWWW Image Optimizer

Allgemeinhin bekannt sind Bilder oft die größten Übeltäter, wenn es darum geht Ladezeit in Anspruch zu nehmen. Viele denken, dass ein Bild in High Resolution nach dem Upload in die WordPress Datenbank automatisch kleiner wird. Aber dem ist nicht so. Ohne das Plugin EWWW Image Optimizer wird ein Bild stets in Originalgröße hochgeladen, was für eine Internetseite viel zu viel Daten darstellt. Denn eine maximale Auflösung von ca. 800 x 600 Pixel reicht für die meisten Blogs als Beitragsbild völlig aus.

Wer bisher die Bildgröße nicht ganz so genau genommen hat, der wird mit dem kostenlosen Plugin EWWW Image Optimizer ganz auf seine Kosten kommen. Denn das Tool ist nicht nur in der Lage neue Uploads automatisch zu komprimieren, sondern ebenso die vorhandene Bilddatenbank inkl. aller Variationen von Thumbnail bis hin zu Originalgröße nachträglich zu optimieren.

Dazu geht man nach der Aktivierung des Plugins im Dashboard auf Medien > Massenoptimierung. Bei mir hat es rund 30 Minuten gedauert bis alle Bilder komprimiert worden sind. Gebracht hat es beim PageSpeed-Test immerhin zwei Punkte;)

ewww_massenoptimierung

Die Massenoptimierung vom EWWW Image Optimizer nimmt sich jedes einzelne Bild der Mediendatenbank ganz genau vor.

5. Je weniger Revisionen, umso schneller lädt die Datenbank! Delete-Revision jetzt installieren

Revisionen

So schnell kann´s gehen. Zig Revisionen, die man garantiert nie mehr braucht für nur einen Beitrag. Absoluter Datenmüll!

Das kostenlose Plugin Delete-Revision tut exakt das, was man seiner Bezeichnung bereits entnehmen kann. Es entfernt ältere Versionen deiner Beiträge & Seiten. Denn jedesmal, wenn du einen Beitrag überarbeitest und speicherst bzw. dieser automatisch zwischengespeichert wird, legt WordPress eine Revision an. Bei einer ausführlichen Bearbeitung einer Seite können auf diese Weise schnell Dutzende Revisionen zustande kommen.

Um die Datenbank entsprechend sauber zu halten, lassen sich die veralteten Einträge mit Delete-Revision ganz einfach entfernen. Plugin installieren, aktivieren und im Anschluss unter “Einstellungen > Delete-Revision” klicken.

delete-revision

Hier klicken und schon werden alle unnötigen Revisionen aufgezeigt.

Jetzt nur noch im Delete-revision Manager auf “Check redundant Revision” klicken und diese im Anschluss alle entfernen. Schwuppdiwupp ist die Datenbank wie leer gefegt.

Da ich das Plugin schon länger im Einsatz habe, lässt sich leider nicht mehr nachvollziehen, ob und wie viele Punkte dadurch bei PageSpeed Insights wett gemacht werden können. Aber sinnvoll ist es allemal!

Zusammenfassung Optimierung der Ladezeit bei PageSpeed Insight

Mithilfe der aufgeführten fünf Tipps ist es mir gelungen die anfängliche Punktezahl von 56/100 auf das stolze Gesamtergebnis von 79/100 zu optimieren, was eine Steigerung um mehr als 40% entspricht.

pagespeed-end

Das kann sich sehen lassen!

Über den Autor

Klaudija Paunovic
Hi, mein Name ist Klaudija Paunovic und ich schreibe hier in diesem Blog, über alles, was mich interessiert mit sehr viel Leidenschaft und Herzblut. Wenn du mehr über mich erfahren möchtest, dann klicke einfach auf "Über mich" in der gaaanz oberen Leiste. Und sollte dir meine Seite gefallen, freue ich mich riesig über einen Like von dir <3