Pagespeed: Browser Caching & Komprimierung aktivieren

Pagespeed erhöhen, Ladezeiten verkürzen – mit deflate, expires und htaccess!

Pagespeed erhöhen Deflate Komprimierung Expires Browser Caching

Häufig befinden sich auf einer Website neben dem eigentlichen Text auch eine oder mehrere Grafiken, Bilder oder Videos. Der Pagespeed der Webseite wird dadurch je nach Umfang und Art der Informationen reduziert. Der Quellcode wird durch Applikationen wie zum Beispiel RSS, Javascript oder Flash zusätzlich vergrößert. Auch XML & CSS Code tragen dazu bei den Page Speed zu reduzieren. Durch die Nutzung von DEFLATE zur Komprimierung und EXPIRES zur Aktivierung des Browser-Caching wird die Performance einer Website von Anfang an gesteigert und dadurch ein höherer Pagespeed erzielt.

Die Ladezeit einer Webseite ist nicht nur aus Sicht von Suchmaschinen von Bedeutung. Vor allem der User möchte in Zeiten von schnellem Internet nicht lange warten, bis er eine aufgerufene Webseite angezeigt bekommt. Daher sollte die Optimierung einer Website im Hinblick auf die Geschwindigkeit nicht länger vernachlässigt werden. Insbesondere wenn man mit wenig Aufwand durch Anpassung der .htaccess Datei auf dem Webserver bereits beachtliche Resultate erreichen kann.

Browser Caching Expires und Komprimierung Deflate - Domain Frage DE

Und das Beste: Sie können die Steigerung Ihres Pagespeed sofort von Anfang an selber mitverfolgen.

Bevor Sie anfangen Ihren Pagespeed zu erhöhen, testen Sie ihn in der aktuellen Situation. Verwenden Sie dazu ganz einfach den Pagespeed Test von Google. Dieser Test dauert nur wenige Sekunden.

link-infohttps://developers.google.com/speed/pagespeed/insights/

Alternativ können Sie die Geschwindigkeitssteigerung auch anhand eines realen Beispiels verfolgen. Der Pagespeed der Webseite „https://www.domain-frage.de/domainumzug/“ mit viel Text und mehreren Bildern hatte vor der Optimierung 49 von 100 möglichen Punkten erreicht.

Google Page Speed vor der Optimierung

Jetzt beginnen wir mit der Optimierung der Website Geschwindigkeit.



DEFLATE und EXPIRES Module aktivieren

Im ersten Schritt muss sichergestellt sein, dass die beiden Module mod_deflate.c und mod_expires.c auf dem jeweiligen Webserver aktiviert sind. Dabei kommt es zunächst darauf an, wie Sie Ihre Website hosten.

Ich nutze ein Webhosting-Paket:

Bei einem Webhosting Paket sollten diese beiden Module standardmäßig aktiv sein. Wenn Sie also ein Webhosting Paket nutzen, brauchen Sie an dieser Stelle erst einmal nichts zu tun. Sollten Sie jedoch später keinen oder nur 1 von 2 Verbesserungsschritten feststellen und keinen Root Zugang haben, müssen Sie Ihren Provider anschreiben.

Bitten Sie Ihn dann die Module:

  • mod_deflate.c
  • mod_expires.c

auf Ihrem Hosting Paket zu aktivieren.

Ich nutze einen vServer / dedizierten Server:

Auf diesen Servern sind die Module mod_expires.c und mod_deflate.c nicht automatisch aktiviert. Loggen Sie sich daher auf Ihrem Server als Root ein und geben Sie die folgenden Befehle in die Console ein.

Um das Browser Caching Modul Expires einzuschalten:

a2enmod expires

 

Bei deaktiviertem Browser Caching erhalten Sie dann folgende Meldung:

Enabling module expires.
To activate the new configuration, you need to run:
service apache2 restart

 

Neustarten des Apache2 Web Server mit:

service apache2 restart

oder

/etc/init.d/apache2 restart

 

Deflate Modul für Komprimierung einschalten:

a2enmod deflate

 

Bei inaktiver Komprimierung erhalten Sie die Meldung:

a2enmod deflate
Enabling module deflate.
To activate the new configuration, you need to run:
service apache2 restart

 

Neustarten des Apache2 Web Server mit:

service apache2 restart

oder

/etc/init.d/apache2 restart



 

EXPIRES Code in .htaccess einbinden

Hier geht es sowohl für die Webhosting-Paket Variante, als auch für die Server Variante weiter. Im nächsten Schritt werden wir das Browser-Caching aktivieren um den Pagespeed zu erhöhen. Dazu stellen Sie eine Verbindung mit Ihrem Webserver per FTP-Zugang her. Sollten Sie noch nicht über einen FTP-Client verfügen, können Sie zum Beispiel FileZilla verwenden. Im Root-Verzeichnis Ihrer Webseite befindet sich normalerweise die .htaccess Datei. Laden Sie das .htaccess File herunter und speichern Sie das Original-File extra nochmals in einem anderem Verzeichnis oder Ordner auf Ihrem Computer ab. Damit haben Sie eine Sicherung, mit der Sie jederzeit den Urzustand wieder herstellen können.

Öffnen Sie jetzt die .htaccess Datei mit Hilfe eines Texteditors und fügen Sie den folgenden Code vollständig unterhalb des bereits vorhandenen Codes ein:

 

# BEGIN Expires-Headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 seconds"
ExpiresByType text/html "access plus 500 seconds"
ExpiresByType application/xhtml+xml "access plus 500 seconds"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/x-icon "access plus 14 days"
ExpiresByType application/x-shockwave-flash "access plus 14 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
</IfModule>
# END Expires-Headers

 

Speichern Sie nun die .htaccess Datei wieder.

Wichtiger Hinweis

Sollten Sie keine .htaccess Datei auf Ihrem Webserver vorfinden, können Sie selbst einfach eine neue Datei erstellen. Achten Sie beim Speichern auf die korrekte Bezeichnung mit einem Punkt davor: .htaccess

Laden Sie das File anschließend wieder auf Ihren Webserver und überschreiben Sie damit die vorhandene .htaccess Datei

Die erste Maßnahme zur Pagespeed Optimierung ist damit bereits vollbracht. Mit dem Browser-Caching werden unnötige HTTP-Requests vermieden wodurch die Performance der jeweiligen Webseite gesteigert wird. Sie können dies nun mit dem Google Pagespeed Tool erneut prüfen.

In unserem vorhandenen Beispiel hatte sich der Wert durch diese Maßnahme von 49 Punkten auf 60 Punkte erhöht. Auch Sie sollten eine Steigerung nach einem erneuten Pagespeed Test festgestellt haben.

Google Page Speed Expires Browser Caching aktiviert

Somit ergab sich durch das aktivieren des Browser-Caching bereits eine Geschwindigkeitssteigerung von 22,45%.



DEFLATE Code in htaccess einbinden

Im dritten Schritt erhält unsere Website nochmal eine ordentliche Performance Steigerung. Dazu laden wir uns wieder die aktuelle .htaccess Datei vom Webserver herunter, öffnen diese und fügen den folgenden DEFLATE Code zur Komprimierung der Website-Inhalte wieder am Ende der Datei ein:

# Deflate Compression FileType
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>
# End Deflate Compression FileType

# Deflate Compression MimeType
<IfModule mod_deflate.c>
<FilesMatch "\.(jpg|jpeg|gif|png|js|css)$">
ExpiresActive on
ExpiresDefault "access plus 28 days"
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
# End Deflate Compression MimeType

Speichern Sie die .htaccess im Anschluss wieder und laden Sie das File wieder auf Ihren Webserver.

Starten Sie jetzt nochmals einen Test mit dem Google Pagespeed Tool. Die Leistung Ihrer Website sollte sich jetzt durch die Deflate Komprimierung nochmals deutlich erhöht haben. Im Beispiel ergab sich eine nochmalige Leistungssteigerung von 60 auf 81 Punkte. Eine prozentuale Steigerung um weitere 35%.

Google Page Speed Deflate Komprimierung aktiviert

Insgesamt konnte die Beispielwebseite einen Geschwindigkeitszuwachs von ursprünglich 49 Punkten auf 81 Punkte verzeichnen, was einer Leistungssteigerung von 65,31% entspricht!

Dadurch konnten wir auch die anfänglich „Rote Zone“ von Googles Pagespeed Test verlassen.
Wichtiger Hinweis

Der hier abgebildete Expires Code und Deflate Code kann natürlich nach eigenen Bedürfnissen angepasst bzw. ergänzt werden wodurch der Pagespeed weiter gesteigert werden kann.

Hier geht es weiter mit dem Sprung in die „Grüne Pagespeed Zone“ von Google:

Varnish Cache Server - Domain Frage DE

2 Antworten

Trackbacks & Pingbacks

  1. […] Pagespeed: Browser Caching & Komprimierung aktivieren bei Varnish Cache aktivieren – Webinhalte schneller ausliefern […]

  2. […] wurden bereits die Module für Browser-Caching und die Komprimierung von Webinhalten mit Deflate aktiviert. Mit diesen beiden Modulen konnte eine Steigerung der Pagespeed Punkte bei Google von 49 […]

Hinterlassen Sie einen Kommentar

Wollen Sie an der Diskussion teilnehmen?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.