So einfach kannst du die Ladezeit deiner Website verbessern
Dass Google benutzerfreundliche Webseiten mit besseren Positionen in der Suchmaschine belohnt, sollte bekannt sein. Auch schnelle Ladezeiten gehören dazu. Denn wie frustrierend ist es für einen Suchenden, wenn die ersten Treffer in den Ergebnissen vielleicht sein Problem lösen, er dann aber ewig warten muss, bis die Seite geladen ist.
Oft fehlt es jedoch am technischen Verständnis der Website-Betreiber, obwohl bereits einfache und schnelle Lösungen zum Erfolg führen. Die aus meiner Sicht am schnellsten umzusetzenden Maßnahmen, die das Laden einer Seite erheblich beschleunigen, stelle in diesem Beitrag vor.
Warum lädt meine Webseite so langsam?
Die Ursachen dafür können sehr vielseitig sein.
Google stellt mit PageSpeed Insights ein sehr hilfreiches Tool zur Verfügung, worüber man seine Webseite analysieren lassen kann. Hier gibt es dann nützliche Vorschläge, wie man die Seiten flott machen kann.
Anhand der aktuellen ZIELBAR.de-Seite, die wir bisher noch nicht optimiert haben, beginne ich damit gleich mittels dieser Anleitung hier.
Für Testzwecke beschränke ich dies auf die Desktop-Version.
Google PageSpeed Insights
Um für WordPress das ersten Problem
JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen
zu beheben, könnte das kostenlose Plugin Async JS and CSS bereits ein Stückchen, wenn nicht sogar komplett Abhilfe schaffen.
Im nächsten Schritt interessieren mich hier die Vorschläge
Komprimierung aktivieren
sowie
Browser-Caching nutzen
Wobei die Komprimierung bereits von unserem Provider All-Inkl.com serverseitig aktiviert ist. Sehr vorbildlich. Macht’s auch noch ein Stückchen schneller. :-)
Komprimierung mit deflate aktivieren
Mittlerweile ist das Apache-Modul mod_deflate auch bei kleineren Webhosting-Paketen inbegriffen. Oft muss dieses jedoch noch aktiviert werden. Sollte seitens PageSpeed dieser Punkt nicht zu den bestandenen Regeln gehören, können nachfolgenden Zeilen in der Datei .htaccess (liegt im Haupt-Verzeichnis der Webseite) Abhilfe schaffen.
<IfModule mod_deflate.c>
<FilesMatch ".*\.(html|php|css|js|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
AddOutputFilterByType DEFLATE application/javascript application/x-javascript
</IfModule>
Browsercache aktivieren
Mit dem Apache-Modul mod_expire wird der Browser vom Besucher dazu veranlasst, Dateien, die bereits geladen wurden, nicht noch einmal von Server abzuholen. Lediglich Dateien, die im lokalen Speicher bereits länger als einer Woche sind, werden erneut angefordert.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType text/html "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>
Achtung:
Wenn ihr Dateien ändert, die über den Browsercache geladen werden, sehen Andere vielleicht eure Änderungen nicht. Auch wenn das in eurem Browser der Fall ist.
Hier solltet ihr dann die Zeit angepassen oder die entsprechende Zeile für den Dateitypen mit einer Raute (#) am Anfang für 1 Woche auskommentieren.
Die Auswirkungen der Maßnahmen
Das Ergebnis unserer ZIELBAR.de-Seite ist leider nicht gerade repräsentativ. Es gab mit der Cache-Aktivierung unerwartet wenige Pluspunkte. Die Komprimierung macht in der Regel am meisten aus. Diese war hier jedoch bereits aktiv und ließ sich zu Testzwecken auch nicht deaktivieren.
Um euch dennoch anhand einiger Beispiele das Potential dieser minimalen Optimierungsmaßnahmen zeigen zu können, hier mal sehr unterschiedliche Seiten mit den PageSpeed-Werten.
| Webseite | A | B | C | D | |
|---|---|---|---|---|---|
| 1. | www.handelsprogramm.de | 67 | 84 | 71 | 93 |
| 2. | www.reallatino-tours.com | 62 | 81 | 69 | 84 |
| 3. | www.projektzeiterfassung.org | 92 | 92 | 94 | 95 |
| 4. | www.timo.net | 70 | 73 | 82 | 86 |
| 5. | www.dienstzeitende.de | 40 | 65 | 46 | 82 |
Die kleinste Seite (Nummer 3) hat entsprechend das wenigste Potential durch eine Optimierung. Die letzte habe ich mehrfach getestet, da ich es selbst nicht fassen konnte, wie viel hier die Komprimierung ausmacht. Ich glaube, das ist auch die größte von allen.
Fazit
Ungeachtet der unterschiedlichen Auswirkungen auf den PageSpeed-Wert und damit auch schnellere Ladezeiten, erkennt man bei den getesteten Webseiten sehr eindeutig, dass man mit diesen hier vorgestellten Möglichkeiten relativ einfach und vor allem schnell die eigenen Seiten optimieren kann. Gut für die Besucher, die nicht lange warten müssen. Gut für die Positionen der Einträge in der Google-Suchmaschine.
Hi Steve,
Ich selbst verwende für die Optimierung meiner Seitenperformance die beiden Plugins WP Super Cache und WP-Minify.
Besonders WP Super Cache hat mir ziemlich aus der Patsche geholfen, da der Server meines Webhosters Probleme mit dem Caching hatte.
Auf Onlinelupe habe ich vor einiger Zeit mal einen Gastartikel zum Thema geschrieben. Ich poste einfach mal den Link, ich hoffe es geht in Ordnung :D
http://www.onlinelupe.de/online-marketing/rankingfaktor-pagespeed-seiten-performance-optimieren/
Viele Grüße
Marius
Hallo Marius,
ich bevorzuge zwar manuelle Maßnahmen, um Javascript und CSS zu minimieren, die Alternative über Minify scheint eine schnelle Lösung zu sein. Kenne das Plugin selbst noch nicht.
Dein Artikel in Jasminas Blog gefällt mir gut und passt hier super als Ergänzung. :-)
Apropos Minify:
Bin auf eine Anleitung gestoßen, wie man den HTML-Code optimieren kann, ohne ein zusätzliches Plugin zu installieren. Macht WordPress noch etwas schneller.
Es werden alle HTML-Kommentare, überflüssige Leerzeichen und Umbrüche (jeder Umbruch sind 2 Byte!) aus dem Quellcode entfernt.
Ist relativ schnell und einfach umzusetzen. Daher mittlerweile auch in unserem Blog im Einsatz. Sehr empfehlenswert!
http://fastwp.de/snippets/html-minify/
Hallo Steve
Ich war kürzlich bei meiner Website bei 100%, in dem ich die Stylesdateien in den Footer verlagerte.
Allerdings habe ich dann den W3C-Test nicht mehr 100%-ig bestanden. Aber mit über 90% lebt sich auch nicht schlecht :-)
Hallo Walter, danke für Deinen Kommentar. Manchmal ist’s sogar schön, wenn man weiß „da geht noch was“. :-)
Aber das passt schon. Man muss es auch nicht übertreiben. ;-)
Hallo Steve,
schöner Artikel. Ich habe eine ähnliche Anleitung mit einigen Erweiterungen erstellt. Ich würde mich freuen, wenn Du mein Tutorial am Ende Deines Beitrags empfehlen könntest. http://wp-config.tips/2015/03/wordpress-pagespeed-optimierung-all-inkl-com/
Gruß
Bernhard
Ein super hilfreicher Artikel, konnte durch das Browser-Caching die Bewertung bei PageSpeed Insights um 10 Punkte steigern, diese ist mit 64/100 Punkten zwar noch immer total im Keller, aber der Anfang ist getan ;-)
Habt ihr hier weitere so tolle Tipps zur Optimierung der Ladezeiten?
Danke, Slava.
Derzeit haben wir noch keine veröffentlicht. Es werden aber noch einige Artikel zu diesem Thema folgen. Stecke technisch ziemlich tief drin *VorArroganzGlüh* ;-). Kann mich allerdings mit WordPress nicht so richtig anfreunden, um das so zu optimieren, dass ich alle Funktionen, die wir brauchen, auch nutzen kann. Zumindest wäre dieser Weg aus meiner Sicht nicht besonders effizent.
Wenn Interesse an Artikeln für die Webseitenoptimierung im Allgemeinen geht, bin ich gern dabei. ;-)
Beste Grüße
Steve
[…] bin ich bei meiner Suche auf einen Artikel bei Zielbar gestoßen, welcher mir sehr interessant erschien. Dort werden zwei Codeschnipsel aufgeführt, […]
Hallo,
ein Super Artikel, vielen Dank dafür.
Allerdings bekomme ich mein Browser Caching nicht zum laufen.
Habt ihr einen Tip?
Folgendes hab ich in der .htacces stehen:
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
ExpiresActive On
ExpiresDefault „access plus 1 week“
ExpiresByType text/html „access plus 1 week“
ExpiresByType image/gif „access plus 1 week“
ExpiresByType image/jpeg „access plus 1 week“
ExpiresByType image/png „access plus 1 week“
ExpiresByType text/css „access plus 1 week“
ExpiresByType text/javascript „access plus 1 week“
ExpiresByType application/x-javascript „access plus 1 week“
ExpiresByType text/xml „access plus 1 seconds“
# END WordPress
Hallo und vielen Dank für den Bericht. Der letzte wohl größere Fehler ist:
JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen
Gibt es hier eine für Anfänger geeignete Lösung? Es handelt sich um meine http://www.Zeltnerhof.de Seite. Vielen Dank Martina Zeltner
Hallo Martina,
für WordPress könnte dir vielleicht das Plugin WP-Plugin Async JS and CSS etwas unter die Arme greifen. Habs im Beitrag ergänzt. Danke für den „Schupps“. ;-)
Beste Grüße
Steve
Nun hab ich deine Seite gerade getestet?
Nutzt du die Sachen nicht ode warum schneidet deine Seite so „durchschnittlich“ ab ab?
Der Artikel ist schon etwas älter. Mittlerweile haben wir hier andere Plugins und Zusätze integriert. Zudem gab es auch seitens Google Pagespeed Insights Anpassungen. Die Seite ist zum aktuellen Zeitpunkt kein gutes Beispiel. Optimierungen in dieser Richtung stehen derzeit auch nicht ganz so weit oben in unserer Prioritätenliste.
Perfekte Infos!