B's Internet Informationen

Alles rund um das WWW

Wie reduziere ich die Ladezeit einer Website?

15.05.2012

In dieser Anleitung möchte ich Dir zeigen, wie Du die Ladezeit Deiner (dynamischen) Website drastisch reduzieren kannst. Besonders Websites, die auf Shared Webspace gehostet werden, können hiervor immens profitieren.




Schnellnavigation

Warum die Ladezeit reduzieren?

Noch nie war die Performance einer Website so wichtig wie heute. Die Reduzierung von Ladezeiten ist aktuell eines der heißesten Themen in der Webentwickler-Szene. Dabei wird die Ladezeit nicht als einfaches Feature behandelt. Sie ist eine unglaublich wichtige Eigenschaft für jede Website. Man schaue sich nur an, was Studien der größten Websites zum Thema Ladezeit gezeigt haben:

  • Google: Eine um 0,5 Sekunden langsamere Website führt zu 20% weniger Suchanfragen.
  • Yahoo: Eine um 0,4 Sekunden langsamere Website führt dazu, dass 5-9% mehr Surfer auf "Zurück" klicken bevor die Seite vollständig geladen wurde.
  • Amazon: Eine um 0,1 Sekunden langsamere Website führt zu 1% weniger Verkäufen.
HTTP Requests
Jeder HTTP-Request kostet Zeit.

Du musst nicht immer gleich einen Server einrichten, um die Leistung zu optimieren oder dein Hosting über ein teures CDN laufen lassen. Ich zeige Dir ein paar Tricks, die du mit wenigen Zeilen in der .htaccess anwenden kannst und die auch auf günstigem Shared Webspace funktionieren



Tipp 1: Gzip Datei-Kompression

Durch die Kompression der übertragenen Daten werden die HTTP-Responses des Servers kleiner. Es werden faktisch weniger Daten übermittelt. Damit verbesserst Du nicht nur die Performance deiner Website, du verbrauchst auch weniger Bandbreite. Es lohnt sich, alle Text-Responses zu komprimieren. Dazu zählen:

  • HTML
  • JavaScript
  • CSS
  • XML
  • JSON

Überflüssig ist hingegen die Kompression von Bildern oder PDF-Dateien, da diese bereits komprimiert sind. Sie zu gzippen verschwendet nur Rechenleistung der CPU ohne die Dateigröße zu reduzieren.


Tipp 1.1: Gzip mit .htaccess


Tipp 1.1.1: Gzip auf Apache Webserver

Für Apache Webserver gibt es mit mod_pagespeed ein von Google entwickeltes Modul, welches diverse Optimierungen der Ladezeit automatisch vornimmt. Ist es installiert, kann es ganz normal aktiviert und konfiguriert werden. Wenn es bei deinem Webhoster verfügbar ist, musst du nur die folgenden Zeilen in die .htaccess Datei kopieren:

<IfModule pagespeed_module>
	ModPagespeed on
	# using commands,filters etc
</IfModule>

Aktuell bieten nur sehr wenige Webhoster mod_pagespeed an. Eine Alternative stellt mod_deflate (bzw. auf alten Apache-Versionen 1.3 noch mod_gzip genannt) dar. Auch diese Erweiterung wird über die .htaccess gesteuert:

<ifModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml
application/xhtml+xml text/css text/javascript application/javascript
application/x-javascript
</ifModule>

Hinweis: Eventuell musst Du die Zeilenumbrüche entfernen.


Tipp 1.1.2: Gzip auf nginx Webserver

Auf nginx Webservern musst Du den folgenden Code in die .htaccess kopieren um Gzip-Komprimierung zu aktivieren:

server {
 gzip on;
 gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
}

Tipp 1.2: Gzip mit PHP

Wenn Dein Server auch kein mod_deflate oder mod_gzip unterstützt, bleibt nur noch die Kompression via PHP. Diese funktioniert sowohl auf Apache als auch auf nginx. Du musst lediglich den folgenden Code in eine zentrale PHP-Datei (z.B. header.php packen:

<?php
if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) {
 ob_start( "ob_gzhandler" );
}
else {
 ob_start();
}
?>


Tipp 2: ETags deaktivieren

ETags (Entity Tags) sind ein Mechanismus, der für die Kommunikation zwischen Browser und Server über das Caching im Browser verwendet wird. Sie sind für die meisten Anwendungen jedoch unnötig. Um sie zu deaktivieren, musst Du den folgenden Code in die .htaccess Datei stecken:

Header unset ETag
FileETag None


Tipp 3: Browser Caching steuern

Du hast die Möglichkeit, dem Browser zu sagen, wie lange er bestimmte Dateien nicht neu laden soll. Wenn er sie erneut braucht, zieht er sie einfach aus seinem Cache anstatt sie erneut von Deinem Server herunterzuladen. Das Caching im Browser hilft zwar nur mit wiederkehrenden Besuchern, lohnt sich aber trotzdem!


Tipp 3.1: Browser Caching auf Apache

Auf einem Apache Webserver kannst Du den Browser Cache über die Module mod_expires und mod_headers steuern. Ich empfehle die folgenden Regeln für Deine .htaccess:

Fürs "Ablaufdatum":

# BEGIN Expire headers
 <ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus
2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000
seconds"
  ExpiresByType application/x-javascript "access plus 216000
 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
 </ifModule>
# END Expire headers

Für den Cache:

# BEGIN Cache-Control Headers
 <ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
   Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
   Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
   Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
   Header set Cache-Control "private, must-revalidate"
  </filesMatch>
 </ifModule>
# END Cache-Control Headers

Tipp 3.2: Browser Caching auf nginx

Dieser Code in der .htaccess sorgt auf einem nginx Webserver dafür, dass CSS, JavaScript und Bilder (jpg, png und gif) nur alle 60 Minuten neu geladen werden:

location ~* \.(jpg|png|gif|jpeg|css|js)$ {
 Expires 1h;
}


Tipp 4: JPEGmini

JPEGmini ist ein kostenloser Dienst, der Bildern im JPEG-Format stark komprimiert ohne die Bildqualität zu verschlechtern.



Performance überwachen

Um die Anzahl der SQL-Anfragen und die Ladezeit der Website zu messen, kannst du folgenden PHP-Code in deine Seite einfügen. Zum Beispiel in die footer.php:

Performance: <?php echo get_num_queries(); ?> SQL-Anfragen in
<?php timer_stop(1); ?> Sekunden.


Teilen & Empfehlen



Kommentare

Kennst Du weitere Tricks um die Ladezeit einer Website zu reduzieren? Dann hinterlass doch einen Kommentar!