WebsiteKlempner.DE

Webdesign » CSS-Design

 

Die Ladezeit von Webseiten verbessern

Für die Verbesserung der Ladezeit einer Webseite sind mehrere Schritte notwendig. Zunächst gilt es zu analysieren, wo die Schwächen liegen. Diese können zum Einen an der Seite selbst und zum Anderen am Server zu finden sein.

 

Für die Seiten- und Serveranalyse bieten Google das AddOn PageSpeed und Yahoo das AddOn YSlow für Firefox an. Für beide ist die Installation von Firebug Voraussetzung. Nach der Analyse bieten sowohl PageSpeed als auch YSlow Vorschläge zur Verbesserung an. Davon sind sicher nicht alle immer umsetzbar.

 

Um heraus zu finden was der Server kann oder eben nicht kann, sollte zunächst die Abfrage mit einer info.php genügen. Dazu eine PHP-Datei mit folgendem Inhalt erstellen

<?php
phpinfo();
?>

Diese ins Rootverzeichnis hochladen und im Browser aufrufen (z.B. http://www.domain.de/info.php). Scrollt man in der Übersicht etwas nach unten erscheint eine Überschrift "apache2handler". In der Zeile "Loaded Modules" sind die Einträge mod_gzip bzw. mod_deflate und mod_headers von besonderem Interesse.

 

Sind derartige Einträge vorhanden können in der Datei .htaccess zusätzliche Anweisungen zur Komprimierung gesetzt werden:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
  AddOutputFilterByType DEFLATE text/x-css text/x-js
  AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE image/x-icon image/ico
</IfModule>

 

Gleichzeitig sind auch folgende Header-Anweisungen für das Caching und den ETag nützlich:

<ifModule mod_headers.c>
  <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch "\\.(css|ttf)$">
    Header set Cache-Control "max-age=432000, private"
  </filesMatch>
  <filesMatch "\\.(js)$">
    Header set Cache-Control "max-age=432000, private"
  </filesMatch>
  <filesMatch "\\.(xml|txt)$">
    Header set Cache-Control "max-age=86400, must-revalidate"
  </filesMatch>
  <filesMatch "\\.(html|php)$">
    Header set Cache-Control "max-age=86400, proxy-revalidate"
  </filesMatch>
    Header unset ETag
</ifModule>
FileETag None

 

Zusätzlich können noch die Verfallzeiten für die MIME-Typen angegeben werden:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
  ExpiresByType text/javascript "access plus 432000 seconds"
  ExpiresByType application/javascript "access plus 432000 seconds"
  ExpiresByType application/x-javascript  .jsgz "access plus 216000 seconds"
  ExpiresByType text/css "access plus 86400 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/ico "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"
</IfModule>