PageSpeed | So lädt Ihre Webseite in weniger als 1 Sekunde!

von | Feb 17, 2014 | Allgemein, Webdesign | 0 Kommentare

PageSpeed Website schnell laden | Titelbild
Ein Webseitenbetreiber

Wieso sollte ich Zeit dafür verschwenden, meine schon vorhandene und schöne Website schneller zu machen? Da meine Website schon funktionstüchtig und benutzerfreundlich ist, sehe ich keinen Bedarf noch mehr Zeit in meine Website zu investieren.

So oder ähnlich denken sehr viele über die Geschwindig- und Zugänglichkeit der eigenen Website. Doch genau dieses Verhalten ist fatal, da im Internet Millisekunden entscheiden, ob ein Besucher Ihr Kunde wird oder das Fenster einfach wieder schließt! Wenn der Otto Normalverbraucher zu lange darauf warten muss, dass eine Website geladen wird (3 – 7 Sekunden) oder eine Funktion bzw. Animation nicht flüssig läuft, macht dieser ganz schnell den Klick auf den Pfeil nach links um zur vorherigen, wahrscheinlich schnelleren und zufriedenzustellenden Webseite zurückzukommen. So schnell verliert man einen potentiellen Follower, User oder sogar Kunden!

[toc]

Doch wie macht man eine Webseite schneller?

Falls Ihre Webseite auf WordPress basiert, erfordert das nicht viel Arbeit für viel Ertrag; oder für viel Speed. Um die wohl signifikanteste Veränderung zu erreichen, müssen wir die Daten unsere Webseite komprimieren, dies heißt für den Laien: wir wollen unsere Daten ?kleiner? machen, so dass der Browser des potentiellen Users/Besuchers unserer Website nicht so viele Daten herunterladen muss. Diese Daten werden mit gzip komprimiert und so deutlich kleiner, demzufolge wird die Website schneller geladen. Diese Komprimierung kann durch das WP-Fastest-Cache – Plugin schnell erreicht werden. Die Konfiguration des Programms ist selbsterklärend simpel.

Für den Fall, dass Ihre Website nicht auf WordPress basiert (was wärmstens zu empfehlen ist!), können Sie durch den folgenden Code-Snippet einen ähnlichen Effekt manuell erzielen.

[code lang=“xml“]<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain text/html text/xml
AddOutputFilterByType DEFLATE text/css text/javascript text/x-js
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-javascript application/javascript text/javascript text/x-js text/x-javascript
AddOutputFilterByType DEFLATE font/opentype font/truetype font/eot
</IfModule>

<FilesMatch „.(js|css|html|htm|php|xml)$“>
SetOutputFilter DEFLATE
</FilesMatch>[/code]

Diese paar Zeilen des Codes müssen einfach in die .htaccess Datei des Servers geschrieben werden und schon werden die Daten wie gewünscht komprimiert und es ist nahezu derselbe Effekt wie mit Hilfe des Plugins; nur das die Konfiguration durch das Plugin deutlich vereinfacht ist.

Da WP-Fastest Cache aber die Eigenschaft besitzt, nur bestimmte (nicht kritische) Javascripts zu minimieren und ebenso HTML und CSS Dateien ggf. einfach ausgelassen werden, nutzen wir ebenfalls das Plug-In WP-Minify. Dieses erzwingt die Zusammenfassung aller HTML, CSS und Javascript Dateien pro Format.

Wichtig

Falls Ihre Webseite auf jQuery oder ähnlichen Frameworks basiert, kann WP-Minify diese komplett ausschalten. Sollte Ihre Webseite nicht mehr funktionieren, so exkludieren Sie einfach die Kern .js Dateien (jQuery.js, jQuery-min.js, etc.).

Javascript und Bilder optimieren

Eine weite Option die Webseite schneller zu machen sind Optimierungen von „ressourcen-fressenden“ Dateien, wie Bildern oder Javascripts. In diesem Fall zeigt sich wiedermal eines der Vorteile von WordPress. Nehmen wir an, Sie haben ca. 50 Bilder auf Ihrer Website, die Sie nun optimieren möchten, also müssen Sie jedes einzelne durch einen image-optimizer schicken und erneut als verkleinerte Datei hoch laden. Das ist ziemlich umständlich, zeitaufwendig und vor allem nerven zehrend. Da Sie aber so klug waren, Ihre Webseite mit WordPress zu erstellen, nutzen Sie einfach den EWWW-Image Optimizer, geben die Pfade in denen die Bilder liegen an und schon werden ganz bequem alle bereits hoch geladenen Bilder optimiert. Um die zukünftigen Bilder müssen Sie sich ebenso keine Gedanken machen ? Sie sparen so Zeit, Nerven und viel lästige Arbeit.

Javascripts/Libraries, welche im Head geladen werden, sorgen für Probleme beim Aufruf der Seite, da für jedes neue Script, welches der HTML-Dom liest, wieder von vorne angefangen werden muss. Das bedeutet, wenn man 4 Javascript und 1 Library (z.b. jQuery) hat, lösen diese Javascripts 5 Roundtrips aus, welche die schöne Website verlangsamen. Bei WordPress kann dieses Problem, wie sollte es auch anders sein, mit einem Plugin gelöst werden. Hierzu empfehle ich entweder Asynchronous Javascript oder Async JS and CSS. Es sind zwei Empfehlungen, da sowohl die erste und zweite Empfehlung nicht bei allen Tests immer funktionierten, aber schlussendlich eines der beiden Plugins immer funktionierte.

Den gleichen Effekt erhalten Sie ohne WordPress, indem Sie in die script-tags das Wort ?async? schreiben ? so werden die Javascripts asynchron geladen und blockieren nicht das Laden der Seite.

Google und das „Leverage Browser Cache“

Ein von Google PageSpeed Insights häufig bemängeltes Geschwindigkeitsproblem ist der Browser Cache, welcher in den meisten Fällen von Webseiten nicht automatisch definiert wird, so auch bei WordPress. Auch hier helfen ein paar Zeilen Code in der .htaccess Datei um der Geschwindigkeit einen deutlichen Schub zu geben. Benutzen Sie einfach folgendes Code-Snippet und freuen Sie sich über einen ganzen Geschwindigkeitspunkt mehr.

[code language=“xml“]<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg „access 1 year“
ExpiresByType image/jpeg „access 1 year“
ExpiresByType image/gif „access 1 year“
ExpiresByType image/png „access 1 year“
ExpiresByType text/css „access 1 month“
ExpiresByType application/pdf „access 1 month“
ExpiresByType text/x-javascript „access 1 month“
ExpiresByType application/x-shockwave-flash „access 1 month“
ExpiresByType image/x-icon „access 1 year“
ExpiresDefault „access 2 days“
</IfModule>[/code]

Fazit

Durch ein paar kleine Änderungen kann die Webseite für den Besucher schneller und somit auch attraktiver gemacht werden ? denn Wartezeiten führen nur dazu, die Seite wieder zu verlassen. Mit WordPress lassen sich diese Änderungen auch noch einfach konfigurieren und schön darstellen. Zusätzlich muss man dank WordPress nicht im Code herum suchen und experimentieren, falls man sich nicht auskennt.