Nicht erst seit Suchmaschinen die Geschwindigkeit von Webseiten in ihren Rankings berücksichtigen, sollte man sich Gedanken über eine Optimierung machen. Hohe Besucherzahlen erhält man nur mit einem performanten System.
Auf dem notwendigen Weg die Reaktionszeit des Servers zu verbessern, stellen sich neben teilweise immensen Geschwindigkeitszuwächsen diverse weitere Vorteile wie zb. verringerter Traffic ein.
Wichtige Tipps zur Beschleunigung von Webseiten!
Es gibt diverse Tricks, um den optimalen Pagespeed zu erreichen. Natürlich sollte erst einmal die technische Seite stimmen. Aber auch dann gibt es noch genug Möglichkeiten, um für Webseiten den Turbo einzuschalten.
Es fängt also schon damit an, für welchen Webhoster und für welches Paket man sich entscheidet. Gegenüber Shared Hosting kann ein Server oder V-Server viele Vorteile auch für die notwendige Optimierung bringen. Dann ist aber auch etwas Fachwissen gefragt.
Da sich in diesem Bereich immer wieder neue Situationen ergeben, kann hier keine wirkliche Empfehlung stattfinden. Manchmal ist von kleineren Hostern mehr zu erwarten, als von den etablierten ganz großen Providern. Aber das kann genausogut auch voll nach hinten losgehen. Da heißt es einfach, Vergleichen und Bewertungen anderer Kunden lesen. Und natürlich ist auch immer alles eine Preisfrage.
Die effiziente Optimierung von Webseiten ist aber keinesfalls nur mit teuerem Webhosting möglich. Verbesserungen lassen sich bei nahezu jedem System durchführen.
Sehr wichtig sind die auf dem Server installierten Module. Wer bereits ein Hosting-Paket gemietet hat, kann die benötigten Module oft nachträglich installieren oder aktivieren, falls sie fehlen.
Ausgehend von einem Linux-Server, welcher ja meistens zum Einsatz kommt, sind hier die Module mod_mime, mod_deflate, mod_setenvif, mod_headers und mod_expires zu nennen.
Ist der direkte Zugriff auf einen Server möglich, können diese Module zb. in der httpd.conf oder vhost.conf konfiguriert werden. Bei virtuellen Servern zb. mit Confixx, kann sich das aber auch etwas anders verhalten. Möglicherweise kann dann über die Confixx-Weboberfläche ein Modul aktiviert und gleich konfiguriert werden.
Hier soll aber die Konfiguration mittels einer htaccess-Datei beschrieben werden. Diese Variante gelingt normalerweise auch mit dem einfachsten Shared-Hosting.
Wenn nicht ohnehin bereits vorhanden, muss also erst einmal eine entsprechende Datei mit der Bezeichnung .htaccess angelegt werden. Dabei sollte keinesfalls der Punkt am Anfang vergessen werden. Damit wird die Datei aus Sicherheitsgründen versteckt auf dem Server abgelegt. Die Einstellungen in dieser Datei greifen entsprechend der Hierarchie, wo auf dem Server sie abgelegt ist. Sinnvoll ist meistens der Ordner, indem auch die gesamte Website bzw. deren index.php liegt. Bei einem CMS die oberste Ebene, nicht der Theme-Ordner.
Komprimierung der Dateitypen
Als erstes wird das Mime-Modul folgendermaßen definiert:
<IfModule mod_mime.c>
AddType application/x-javascript .js
AddType text/css .css
</IfModule>
Damit wird dem Apache-Webserver mitgeteilt, dass er alle CSS- und Javascript-Dateien mit dem Deflate-Modul komprimieren soll.
Nun kann für die Komprimierung der unterschiedlichen Dateitypen das Modul Deflate zb. auf folgende Weise eingetragen werden:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext text/javascript image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/javascript application/rss+xml
</IfModule>
Durch die If-Abfrage würde die Seite ohne Fehler weiterlaufen, auch wenn das Modul nicht zur Verfügung stehen würde. Für einen Test könnte man also diese Abfrage entfernen und hoffen, dass man keinen 500 Internal Server Error bekommt. Kommt kein Error, läuft das Modul. Anstelle von mod_deflate wäre auch mod_gzip noch möglich, was auf älteren Apache 1.3.xx-Systemen zum Einsatz kam und nicht mehr empfohlen werden kann.
Nach der Bezeichnung "DEFLATE" wird alles aufgeführt, was komprimiert ausgegeben werden soll. Das hier gezeigte Beispiel wird mit den meisten Seiten sicher sehr gut funktionieren. Wer es übersichtlicher zb. für Testzwecke haben möchte, kann auch diverse Einzeiler daraus machen. Zb. geht auch:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
Und immer so weiter. Zum Herumprobieren ist das vielleicht gar nicht so verkehrt.
Als nächstes folgen die Einträge für das Modul Setenvif wie folgt:
<IfModule mod_setenvif.c>
SetEnvIfNoCase Request_URI \.(?:rar|zip)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:gif|jpg|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp4)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
Dieses Modul verbietet dem Apache jetzt die unsinnige Komprimierung von Archiven mit RAR oder ZIP-Endung, sowie ohnehin komprimierten Bildern und Audio- bzw. Videodateien. Außerdem werden untaugliche bzw. veraltete Browser an einer komprimierten Ausgabe gehindert, welche sonst fehlerhaft erfolgen würde.
Weiter geht es mit dem Modul Headers:
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
Header set Connection keep-alive
</IfModule>
Hiermit können HTTP-Anfragen und Antwort-Header beeinflusst werden. Header lassen sich zusammenfügen, verschieben, oder entfernen. Mit append wird der Anwort-Header einem vorhandenen Header mit der gleichen Bezeichnung angehängt. Damit können einem Header auch mehrere Werte gegeben werden. Mit set wird ein vorheriger Header einfach ersetzt.
Im Prinzip werden in der ersten Zeile dem Proxy-Server die genauen Bestimmungen in Bezug auf die Zwischenspeicherung mitgeteilt. Die zweite Zeile ist dafür verantwortlich, eine Verbindung aufrecht zu erhalten, welche normalerweise nach einem Transfer geschlossen wird. So können viele Dateien bzw. die Anfragen, über eine einzelne Verbindung genutzt werden, was wesentlich effizienter für die Geschwindigkeit und die CPU-Auslastung des Servers ist.
Der nächste Schritt behandelt das Browser-Caching mit dem Modul Expires. Als erstes wird hier der ETag-Header deaktiviert, weil die Technik als problematisch und langsam gilt. Mit ETag können zb. nicht unterschiedliche Ablaufzeiten für unterschiedliche Dateitypen genutzt werden.
FileETag None
Header unset ETag
Es folgt also die Filesmatch-Direktive, welche für den Umgang mit mehreren Dateitypen verwendet werden sollte.
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|mp3)$">
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 30 days"
Header set Cache-Control "public"
</IfModule>
</FilesMatch>
Nach der Direktive in der ersten Zeile folgen somit reguläre Ausdrücke bzw. Regular Expressions. Auf die hier gezielten Dateiendungen wird das Expires-Modul angewendet und gibt damit an, wann eine zwischengespeicherte Datei abgelaufen ist. Anstelle von access plus 30 days, gibt es noch jede Menge anderer Möglichkeiten wie now plus 1 week usw. Eine gute Dokumentation dazu findet man bei apache.org. Bei Apache.org sind auch alle anderen hier beschriebenen Module genau erklärt, falls man tiefer einsteigen möchte.
Schließlich noch für die statischen Seiten:
<FilesMatch "\.(html|htm|xml|txt|xsl)$">
Header set Cache-Control "private"
</FilesMatch>
Die Angabe "private" gibt an, dass die Anwort nur für einen User gültig ist und nicht zwischengespeichert wird. Das ist also nützlich für statische Seiten wie hier html, xml, txt usw., oder Seiten, welche unabhängig von der Anfrage, die gleiche Antwort zurückgeben.
HTACCESS-DATEI
Die komplette htaccess-Datei könnte damit so aussehen:
## mod mime
<IfModule mod_mime.c>
AddType application/x-javascript .js
AddType text/css .css
</IfModule>
## mod deflate
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext text/javascript image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/javascript application/rss+xml
<IfModule mod_setenvif.c>
SetEnvIfNoCase Request_URI \.(?:rar|zip)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:gif|jpg|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp4)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
Header set Connection keep-alive
</IfModule>
</IfModule>
## Browser-Cache
FileETag None
Header unset ETag
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|mp3)$">
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 30 days"
Header set Cache-Control "public"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|xml|txt|xsl)$">
Header set Cache-Control "private"
</FilesMatch>
Interessant könnte auch das Modul Pagespeed von Google sein. Das Apachemodul ist OpenSource und soll viele der hier genannten Dinge automatisch erledigen.
Dateien minimieren
Ein weiterer sehr wichtiger Schritt ist die Minimierung von Dateien. Sehr sinnvoll ist das für CSS-Dateien und JavaScript. Oft werden diese Dateien auch unnötig geladen, denn sie hätten auch Platz direkt innerhalb der index.php. Das macht natürlich nur Sinn, wenn sie nicht zu groß sind.
Eine CSS-Datei könnte also so eingefügt werden:
<style type="text/css">
CSS-Anweisungen
</style>
und nicht so:
<link rel="stylesheet" href="/css/mein.css" type="text/css" />
Dadurch wird die Antwortzeit des Servers schon etwas verbessert. Idealerweise komprimiert man jegliches Javascript und CSS noch. Es gibt dafür diverse Scripte und Tools im Netz wie zb. cssmin.js. Aber gerade wegen der Automation der Komprimierung sollte man vorsichtig sein und die Dateien vor dem Hochladen möglichst erst lokal prüfen. Und vor dem Hochladen sollten alte Dateien natürlich immer erst gesichert werden. Fehler sind schnell passiert.
Es ist vielleicht gar keine schlechte Idee, auf solche Tools komplett zu verzichten und die Dateien selber aufzuräumen. Auch bei sehr großen Files ist das gar kein Problem. Man braucht nur einen guten Editor mit Suchen/Ersetzen-Funktion. Sehr empfehlenswert hierfür ist der Notepad++.
Die Dateien werden einfach von sämtlichen überflüssigen Zeichen und Leerraum befreit. Natürlich ist hier aufzupassen, dass man nicht die Syntax zerstört. Das passiert leider auch ganz schnell. Zb. hat man eine Anweisung wie #seite { border-top: 2px solid #CED3FF; } Wenn man hier jetzt einfach alle Leerzeichen entfernt, wird diese CSS-Anweisung logischerweise nicht mehr funktionieren. Hier wäre der erzeugte Fehler 2pxsolid.
Mit dem Notepad++ könnte man jetzt folgendermaßen vorgehen:
Man öffnet das Suchen & Ersetzen-Fenster und trägt bei "Suchen" die Klammer "{" ein und bei "Ersetzen durch" die Klammer mit einem Leerzeichen danach bzw. davor. Das Gleiche geht natürlich auch mit Komma, Doppelpunkt, Semikolon usw.
Schließlich kann der Suchmodus noch auf "Erweitert" gesetzt werden. Dann können zb. bei "Suchen nach" die Zeichen "\n, \r, \t" usw. verwendet werden. Bei "Ersetzen durch" wird dann nichts eingetragen. Letztendlich erhält man eine einzeilige Datei mit nahezu keinem Leerraum aber intakter Syntax.
Diese Datei lädt man dann hoch auf den Server. Die ursprüngliche Datei kann man für spätere leichtere Anpassungen behalten und wieder auf die gleiche Art reduzieren. Auch reguläre Ausdrücke können eingesetzt werden. Somit ist alles möglich.
Serverbremsen
Eine Bremse für den Server können auch Werbebanner oder IFrames usw. sein. Zumindest bei Bannern könnte man die Grafiken herunterladen und optimiert selbst innerhalb eines Affiliatecodes einbauen. Aber auch ohne weitere Optimierung kann das schon was bringen.
Wenn man jetzt auch noch möglichst alle selbst eingefügten Bilder optimal komprimiert hat, sollte die Webseite richtig schnell geworden sein.
Cloud Delivery Network
Ein weiterer Weg schnellere Seiten zu haben, ist die Nutzung von Content Delivery Networks. Hier werden Daten bzw. komplette Webauftritte auf unterschiedliche Hochleistungsserver ausgelagert, was Anfragen sehr beschleunigen kann. Weil teuer, ist das meistens nur für größere Firmen interessant. Bei dem nicht ganz unumstrittenen US-Dienst Cloudflare sind diverse Möglichkeiten auch kostenfrei umsetzbar. Natürlich gibt man seine Inhalte bei einer Cloudlösung komplett aus der Hand.
Schließlich hilft es immer, die Hinweise von Diensten wie PageSpeed Insights oder GTMetrix usw. ernst zu nehmen. Auch wenn sich nicht alles verbessern lässt und wahrscheinlich auch nicht alle Möglichkeiten hier angesprochen wurden, wird man mit den hier vorgestellten Vorschlägen sicher einen riesigen Performanceschritt machen können. Und auch Suchmaschinen werden es mit einem besseren Ranking danken.
