Eine bessere Ladegeschwindigkeit Ihrer Webseite kann sich beim Besucher und bei Suchmaschinen positiv bemerkbar machen. Hat Ihre Webseite eine hohe Ladezeit kann es passieren das Besucher Ihre Webseite vorzeitig verlassen, was gerade bei Online Shops Auswirkungen auf den Umsatz hat. Aber auch Suchmaschinen sollen heute auf die Ladegeschwindigkeit einer Website achten und so werden Webseiten, die sich schnell laden lassen im Ranking der Suchmaschine bevorzugt, was auch wiederum Auswirkungen auf den Umsatz eines Online Shops haben kann. Shopbetreiber sollten Ihre Ladezeiten also regelmäßig prüfen und gegebenenfalls optimieren.
Aber auch wenn man keinen Online Shop betreibt, ist es sinnvoll Ladezeiten zu optimieren. Schließlich möchte man mit einer eigenen Webseite, einem eigenen Blog oder dem eigenen Forum möglichst viele Menschen erreichen. Wenn diese die Seite nun aufgrund hoher Ladezeiten vorzeitig verlassen, statt sich im Forum zu registrieren, ist dies natürlich schade.
In diesem Beitrag möchten wir Ihnen einige Tipps geben, wie Sie Ihre Seite beschleunigen können.
Ein sehr beliebtes Tool zum Überprüfen der eigenen Seite ist das kostenlose Tool von Google: PageSpeed Insights. Hier trägt man die Adresse seiner Webseite ein und erhält nach der Überprüfung einen Punktestand und Tipps, was man ändern sollte. Die maximale Punktzahl von 100 Punkten wird man aber in den wenigstens Fällen erreichen können, da dies technisch nicht immer möglich ist. Ein Wert von 80 Punkten gilt als gut und sollte angestrebt werden.
Bilder optimieren
Bilder sind schön und wichtig für eine Webseite, kosten aber auch sehr viel Ladezeit. Um die Ladezeit etwas zu verkürzen, sollte man Bilder aber entsprechend optimieren. Wenn Sie z.B. auf Ihrer Webseite nur Bilder in einer Auflösung von 600×400 Pixeln verwenden, ist es nicht nötig diese als 6000×4000 Pixel Datei in die Webseite einzubinden und dann vom Browser auf das entsprechende Maß verkleinern zu lassen. In so einem Fall bietet es sich an die Bilder vorab am Computer in der Größe anzupassen und dann ohne eine so starke Verkleinerung in die Webseite einzubinden. Wenn Sie möchten, können Sie die verkleinerte Datei dann auch noch durch eine erweiterte Optimierung weiter verkleinern, ohne dass es zu Qualitätseinbußen kommt. Wie das möglich ist, erfahren Sie in unserem Beitrag vom 26.11.2014: PNG & JPG Dateien verkleinern und optimieren.
Beides beschleunigt Ihre Webseite Imens und spart Ihnen auch noch Speicherplatz bei Ihrem Webspace.
JavaScript- und CSS-Dateien verkleinern
Mit großer Wahrscheinlichkeit wird ihnen PageSpeed Insight auch vorschlagen, dass Sie JavaScript- und CSS-Dateien verkleinern sollen. Auch hier können Sie viele KB an Daten, die übertragen werden müssen, einsparen. Allerdings ist dies nicht immer ganz so einfach. Bei CMS Systemen wie WordPress bietet es sich an Plugins wie z.B. W3 Total Cache zu verwenden, welche die Arbeit, nach entsprechender Konfiguration, für Sie übernehmen.
Bei einem Forensystem wird es schon etwas schwieriger, da es hier nicht immer entsprechende Plugins gibt. Hier kann man sich die entsprechenden JavaScript- und CSS-Dateien in einem Editor laden, den Inhalt der jeweiligen Datei markieren, kopieren und auf einer Seite wie https://cssminifier.com/ bzw. http://jscompress.com/ einfügen, optimieren lassen, das ganze wieder kopieren und in die Originaldatei einfügen und speichern. Dies ist allerdings bei komplexen Seiten sehr umständlich und wird bei Updates oft wieder überschrieben. In so einem Fall ist es besser, wenn man zu externen Diensten greift, welche die Dateien während der Auslieferung optimieren. So kann dies z.B. Cloudflare. Oder Sie suchen sich einen Webhosting Anbieter, welcher das Server Modul Google mod_pagespeed anbietet. Hier erfolgt die Optimierung der Java und CSS Dateien direkt auf dem Server. Wir bieten dieses Modul in allen Webhosting Tarifen an.
Browser-Caching verwenden
Wieso sollte man etwas erneut laden, was man schon mal geladen hat und es sich nicht verändert hat? Diesen Ansatz verwendet das Browser-Caching. Dateien welche sich in der Regel nicht ständig ändern (CSS-, JavaScript- und Bilddateien) werden auf dem Gerät des Besuchers beim erstmaligen Aufruf der Seite gespeichert. Ruft der Besucher die Seite nun ein weiteres mal auf, müssen diese Datein nicht noch einmal heruntergeladen werden da Sie sich ja schon auf dem Gerät befinden. Was nicht heruntergeladen werden muss spart Zeit. Um das Browser-Caching für Ihre Seite zu aktivieren, reicht es in der Regel aus wenn Sie eine .htaccess Datei anlegen und dort folgenden Inhalt einfügen:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif „access plus 7 days“
ExpiresByType image/ico „access plus 7 days“
ExpiresByType image/jpeg „access plus 7 days“
ExpiresByType image/jpg „access plus 7 days“
ExpiresByType image/png „access plus 7 days“
ExpiresByType text/css „access plus 7 days“
ExpiresByType text/javascript „access plus 7 days“
ExpiresByType application/x-javascript „access plus 7 days“
ExpiresByType application/javascript „access plus 7 days“
</IfModule>
Wichtig hierbei ist das, das Apache Modul mod_expires aktiv ist, dies ist aber bei den meisten Anbietern der Fall. Bei uns natürlich auch.
Komprimierung aktivieren
Viele Teile einer Webseite bestehen aus Dateien die einer Textdatei ähnlich sind (CSS, HTML,..), und Textdateien lassen sich in der Regel großartig komprimieren, wodurch sich das Datenvolumen sehr gut reduzieren lässt. Mit dem Apache Modul deflate können Sie Ihre Webseite während der Datenübertragung automatisch komprimieren lassen. Der Webseiten Besucher erhält dann Ihre Webseite in Form von gzip komprimierten Datein, welche von seinem Webbrowser automatisch entpackt werden. Er merkt keinen Unterschied, außer das die Seite schneller geladen wird. Um die Komprimierung zu aktivieren, fügen Sie folgenden Code in Ihre .htaccess Datei ein:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
